Vue中使用微信JS-SDK，配置分享

這是微信系列的第二篇，這裡講會講到微信SDK分享的運用（分享都會了，其他的API不就一通百通了嗎）

1：微信公眾平臺配置好域名

2：專案引入微信js-sdk

這裡我需要用到微信js-sdk的.js檔案，匯入方式：

1. 下載js檔案,在vue中引入
2. CDN引入
3. npm安裝依賴

這裡我就直接npm install weixin-js-sdk安裝了依賴了,然後在需要的地方引入（也可以弄成mixin）

3：config介面注入許可權驗證配置

wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
    appId
 
: '', // 必填，公眾號的唯一標識		【公眾號平臺檢視】
    timestamp: , // 必填，生成簽名的時間戳    【後臺返回】
    nonceStr: '', // 必填，生成簽名的隨機串	【後臺返回】
    signature: '',// 必填，簽名				【後臺返回】
    jsApiList: [] // 必填，需要使用的JS介面列表【例如分享的幾個Api：'onMenuShareAppMessage', 'onMenuShareQQ'】
});

注意！：config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後

4：ready介面處理成功驗證

wx.ready(function(){
    /*config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。
	  對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。*/
});

5：error介面處理失敗驗證

wx.error(function(res){
    // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
});

6：組合前面講到的3個方法，建立要用sdk.js，配置好

import wx from 'weixin-js-sdk'			//微信sdk依賴
import http from '../lib/featch'		// 封裝的axios
const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']
										//要用到微信API
										
function getJSSDK(url, dataForWeixin) {
  http.get('/OAutho/JsSdkConfig?url=' + encodeURIComponent(url)).then(res => {
    wx.config({
      debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
      appId: 'wx9d399xxxxxxxxx14', // 必填，公眾號的唯一標識
      timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: res.data.noncestr, // 必填，生成簽名的隨機串
      signature: res.data.signature, // 必填，簽名
      jsApiList: jsApiList // 必填，需要使用的JS介面列表
    })
    wx.ready(function () {
      wx.onMenuShareAppMessage({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) { },
        success: function success(res) {
          console.log('已分享');
        },
        cancel: function cancel(res) {
          console.log('已取消');
        },
        fail: function fail(res) {
          alert(JSON.stringify(res));
        }
      });
      // 2.2 監聽“分享到朋友圈”按鈕點選、自定義分享內容及分享結果介面
      wx.onMenuShareTimeline({
        title: dataForWeixin.title,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          // alert('使用者點選分享到朋友圈');
        },
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          //alert('已取消');
        },
        fail: function fail(res) {
          alert(JSON.stringify(res));
        }
      });
	// 2.3 監聽“分享到QQ”按鈕點選、自定義分享內容及分享結果介面
      wx.onMenuShareQQ({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          //alert('使用者點選分享到QQ');
        },
        complete: function complete(res) {
          alert(JSON.stringify(res));
        },
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          //alert('已取消');
        },
        fail: function fail(res) {
          //alert(JSON.stringify(res));
        }
      });
      // 2.4 監聽“分享到微博”按鈕點選、自定義分享內容及分享結果介面
      wx.onMenuShareWeibo({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger(res) {
          //alert('使用者點選分享到微博');
        },
        complete: function complete(res) {
          // alert(JSON.stringify(res));
        },
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          // alert('已取消');
        },
        fail: function fail(res) {
        // alert(JSON.stringify(res));
        }
      });
    })
    wx.error(function (res) {
      alert("微信驗證失敗");
    });
  })
}
export default {
  // 獲取JSSDK
  getJSSDK: getJSSDK
}

7：在需要分享的地方

import sdk from '../../assets/sdk/sdk' //引入sdk.js
var url = window.location.href.split('#')[0]
var obj = {
  title: this.userInfo.UserName,		//分享標題
  desc: '個人資料',						//分享內容
  linkurl: location.protocol+"//"+location.host+'/dist/#/show?id=' + this.userInfo.Id,//分享連結
  img: this.userInfo.Photo,				//分享內容顯示的圖片
}
sdk.getJSSDK(url, obj) 					//傳入sdk.js需要的引數

注意：這裡傳入的URL為當前的地址，傳給後臺獲取簽名，因為這裡是vue，所以地址要去掉#後面的東西，微信不會識別#後面的內容

注意：確認簽名演算法：

• 確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
• 確認url是頁面完整的url(請在當前頁面alert(location.href.split(’#’)[0])確認)，包括’http(s)