vue,一路走来（13）--vue微信分享

vue微信分享

今天记录一下vue微信分享。

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说，见文档，只有绑定了才能进行下一步的动作

2.需要引入js文件   import wx from 'weixin-js-sdk'

3.通过config接口注入权限验证配置，所有需要使用JS-SDK的页面必须先注入配置信息 配置信息需要后端返回

  share(){
    if(this.hdusers!=[]){
    this.$http.post(this._getUrl()+"Index/wxShare",
          {"url":window.location.href},{emulateJSON:true}
        ).then((response) => {
              response = response.body;
             // console.log(response)
             this.wxInit(response);
    });
    }
  },

mounted(){
    this.share();
  },

             //微信分享使用方法
  wxInit(sd){
    // alert(window.location.href)
   let links=window.location.href;  //分享出去的链接
   let title='向您推荐：'+this.hdusers.name+'的活动微站';  //分享的标题
   let desc='关注'+this.hdusers.name+'有新活动通知您'; //分享的详情介绍
   let imgUrl=this.hduserpic; 
     wx.config({
       debug: false,
       appId: sd.appId,
       timestamp: sd.timestamp,
       nonceStr: sd.nonceStr,
       signature: sd.signature,
       jsApiList: [
         'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'
       ]
     }); 
     wx.ready(function () {
      wx.onMenuShareTimeline({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link:links, // 分享链接
        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:links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function () {
          // alert("成功分享给QQ")
          Toast({
                      message: "成功分享到QQ"
                    });
        },
        cancel: function () {
          // alert("分享失败,您取消了分享!")
          Toast({
                      message: "分享失败,您取消了分享!"
                    });
        }
      });
      wx.onMenuShareWeibo({
        title:title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function () {
          // alert("成功分享给朋友")
          Toast({
                      message: "成功分享到腾讯微博"
                    });
        },
        cancel: function () {
          // alert("分享失败,您取消了分享!")
          Toast({
                      message: "分享失败,您取消了分享!"
                    });
        }
      });
      wx.onMenuShareQZone({
        title:title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function () {
          // alert("成功分享给朋友")
          Toast({
                      message: "成功分享到QQ空间"
                    });
        },
        cancel: function () {
          // alert("分享失败,您取消了分享!")
          Toast({
                      message: "分享失败,您取消了分享!"
                    });
        }
      });
     });
     wx.error(function(res){
       // alert("error")
       // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
     });
  },

 重点：

在每个需要分享的页面成功配置后，最后发现一个问题，我在微信登陆后，后台跳回我的页面的时候，安卓手机的微信没问题，而我的苹果手机分享就一直不成功，是因为我用的是history模式，ios的微信记录的url发生了改变，因为ios的微信对于vue的单页面项目只记住第一次进来的url，所以在每一个第一次进来的url都必须注入权限验证配置，不然在后续其他页面的分享是分享不成功的。

https://github.com/vuejs/vue-router/issues/481  微信分享问题