在vuejs中引入微信JS SDK的最佳方式是怎么样的？

Question

最近使用vuejs做了一个公众号页面，因为涉及到分享，需要调用微信jssdk。

网上找了些参考资料，我是这么实现的：

1. 写了服务端接口，获取 token，计算签名

2. 前端组件里，在了ready里面，先通过this.$http.get调用服务端获取签名，再调用wx.config进行初始化

这样做的后果是，每次都需要一个http请求，所以微信jssdk初始化速度慢，同时注册的微信API，有时候生效，有时候不生效，不知道是什么原因导致的。

我就注册了一个API，如下：

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

突然换到vuejs，有点理不清，请各位赐教，在vuejs里面如何初始化及注册微信SDK最合适？或者有没有可参考的代码？

谢谢！

Answer 1

既然你写了服务端接口,为什么不通过cookie把token传过来呢

Answer 2

关键在于你调用wx.onMenuShareAppMessage的时机，如果是非SPA的vue.js应用，wx.config放到ready钩子里执行，然后将wx.onMenuShareAppMessage包在wx.ready方法内，以保证其在微信JSSDK获取到此接口权限时再注册事件。在此之前可以通过一些过渡效果延缓页面加载。

var example1 = new Vue({
    el: '#example-1',
    data: {

    },
    ready: function() {
        this.$http.get({
            url: 'api/wx/tokenSignature',
            data: {
                url: mui.os.ios === true? window.url : (location.protocol + '//' + location.host + '/wx' + url)
            },
            success: function(json) {
                wx.config({
                    debug: false,
                    appId: json.appId,
                    timestamp: parseInt(json.timestamp),
                    nonceStr: json.nonce,
                    signature: json.signature,
                    jsApiList: [
                        'onMenuShareAppMessage'
                    ]
                });
                wx.ready(function () {
                    wx.onMenuShareAppMessage({
                        success: function () { 
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () { 
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
            }
        })
    }
})

如果你用到了vue-router，那么JSSDK时好时坏的的情况在Android下是肯定会发生的，wx.config也需要在适当的钩子函数里执行，重点在于vue-router切换view时url的变化。

Answer 3

https://segmentfault.com/a/11...

可以参考这篇文章

Answer 4

请问你解决了吗

Answer 5

楼主,现在应该怎么解决呢??

Answer 6

楼主解决了吗，我也碰到一样的问题了，微信分享时好时不好，自定义的title，img都是好的时候显示，不好的时候就没有