vue-cli调用微信分享的jssdk可能的问题

是2017年9月7号解决的问题,时间太久可能就又被腾讯偷偷改掉了.

插件引用了 weixin-js-sdk

1 history模式下,android上的分享和ios上是不一样的

由于ios走路由跳转,路径一直是历史记录,想传参数必须是首页的地址,或者地址跳转走的不是路由,用a标签;所以针对前一种,直接写死第一页就行了

这里不是app.vue,而是网站的第一页,通常是index.vue或者home.vue 等.

在分享的页面处理wx.config,wx.ready等就可以了.

2 android的处理

android的路由处理不是历史记录,是真的页面跳转,所有要获取当前页 windows.location.href.spit('#')[0], 如果是hash模式,或者带个锚点什么的有用.

然后,这个就是在需要分享的页面单独这只wx.config,wx.ready 这些..

3 wx.onfig不能只放在首页,因为只处理了ios

4 代码

mounted: function() {
    this.getConfig();
},

methods: {
     getConfig() {
        let self = this;
        let url = window.location.href.split('#')[0];

        let paramUrl = self.$store.state.phone_device == 0 ? 'http://首页域名.com/home' : url;
        rest.post('/wxapi/base/getWxConfig', { 'url': paramUrl })
            .then(function(response) {
                let res = response.data.data;
                self.wxInit(res);
            })
    },
    wxInit(res) {
        let links = 'http://分享跳转地址';
        let linkUrl = 'http://微信以外的跳转地址/static/shareqq.html'; // 微信以外的
        let title = '名字';
        let desc = '简介.';
        let imgUrl = '分享图标/sharelogo.png';
        wx.config({
            debug: false,
            appId: res.appId,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
        });
        wx.ready(function() {
            wx.onMenuShareTimeline({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: linkUrl, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function() {
                    // alert("分享到朋友圈成功")
                    Toast({
                        message: "成功分享到朋友圈"
                    });
                },
                cancel: function() {
                    // alert("分享失败,您取消了分享!")
                    Toast({
                        message: "分享失败,您取消了分享!"
                    });
                }
            });
            //微信分享菜单测试
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: links, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function() {
                    // alert("成功分享给朋友")
                    Toast({
                        message: "成功分享给朋友"
                    });
                },
                cancel: function() {
                    // alert("分享失败,您取消了分享!")
                    Toast({
                        message: "分享失败,您取消了分享!"
                    });
                }
            });

            wx.onMenuShareQQ({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: linkUrl, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function() {
                    // alert("成功分享给QQ")
                    Toast({
                        message: "成功分享到QQ"
                    });
                },
                cancel: function() {
                    // alert("分享失败,您取消了分享!")
                    Toast({
                        message: "分享失败,您取消了分享!"
                    });
                }
            });
            wx.onMenuShareWeibo({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: linkUrl, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function() {
                    // alert("成功分享给朋友")
                    Toast({
                        message: "成功分享到腾讯微博"
                    });
                },
                cancel: function() {
                    // alert("分享失败,您取消了分享!")
                    Toast({
                        message: "分享失败,您取消了分享!"
                    });
                }
            });
            wx.onMenuShareQZone({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: linkUrl, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function() {
                    // alert("成功分享给朋友")
                    Toast({
                        message: "成功分享到QQ空间"
                    });
                },
                cancel: function() {
                    // alert("分享失败,您取消了分享!")
                    Toast({
                        message: "分享失败,您取消了分享!"
                    });
                }
            });

        });
        wx.error(function(err) {
            alert(JSON.stringify(err))
        });
    }
}

• 感觉还可以

赏

凑合看吧,有问题github上见.