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  微信分享問題