微信JS-SDK的使用，及遇到的問題

微信JS-SDK說明文檔地址

必要的前提準備

1.微信認證過的公共號 必須是認證過的，未認證或者認證過時都不行 2.一個域名 須要備案過的 3.一臺服務器 前端頁面須要的appId、signature是須要後臺傳遞過來的。官方默認後臺程序有PHP、Python、Node、Java版本

配置過程

綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」（發佈用的那個域名）

獲取access_token

這部分工做屬於後臺開發，主要功能是利用公衆號APPID、APPSECRET從微信服務器獲取對應的access_token。

前端權限驗證配置

步驟一：引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

步驟二：從後臺獲得權限驗證配置信息

封裝權限驗證配置信息函數

/**
 * 微信受權js-sdk
 * @param {*} param0 
 */
export const wxConfig = ($appId,$timestamp,$nonceStr,$signature) => {
    wx.config({
        debug: false,// 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。移動端會經過彈窗來提示相關信息。若是分享信息配置不正確的話，能夠開了看對應報錯信息
        appId: $appId,
        timestamp: $timestamp,
        nonceStr: $nonceStr,
        signature: $signature,
        jsApiList: [//須要使用的JS接口列表,分享默認這幾個，若是有其餘的功能好比圖片上傳之類的，須要添加對應api進來
            'scanQRCode', // 掃一掃
            'checkJsApi',
            'onMenuShareTimeline', // 分享到微信朋友圈
            'onMenuShareAppMessage', // 分享到朋友
            'onMenuShareQQ', // 分享到QQ好友
            'onMenuShareWeibo'  // 分享到微博
        ]
    });
};

複製代碼

封裝微信掃一掃的函數

/**
 * 調起掃碼
 */
export const wxScanQRCode = (successFun) => {
    wx.scanQRCode({
        needResult: 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
        scanType: ["qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
        success: function (res) {
            var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
            successFun && successFun(result);
        }
    });
}
複製代碼

封裝微信分享的函數

/**
 * 微信分享
 */
export const wxShareConfig = ($imgUrl,$desc,$title,$link,successFun) => {
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            "imgUrl": $imgUrl,//分享圖，默認當相對路徑處理，因此使用絕對路徑的的話，「http://」協議前綴必須在。
            "desc" : $desc,//摘要,若是分享到朋友圈的話，不顯示摘要。
            "title" : $title,//分享卡片標題
            "link": $link,//分享出去後的連接，這裏能夠將連接設置爲另外一個頁面。
            "success":function(response){//分享成功後的回調函數
                let onMennuShareId = 1;
                successFun && successFun(response,onMennuShareId);
            },
            'cancel': function () { 
                // 用戶取消分享後執行的回調函數
            }
        });//分享給好友
        wx.onMenuShareTimeline({
            "imgUrl": $imgUrl,//分享圖，默認當相對路徑處理，因此使用絕對路徑的的話，「http://」協議前綴必須在。
            "desc" : $desc,//摘要,若是分享到朋友圈的話，不顯示摘要。
            "title" : $title,//分享卡片標題
            "link": $link,//分享出去後的連接，這裏能夠將連接設置爲另外一個頁面。
            "success":function(response){//分享成功後的回調函數
                let onMennuShareId = 3;
                successFun && successFun(response,onMennuShareId);
            },
            'cancel': function () { 
                // 用戶取消分享後執行的回調函數
            }
        });//分享到朋友圈
    });
};
複製代碼

步驟三：獲取微信SDK簽名，調用微信掃一掃、分享

獲取微信SDK簽名，開發項目中遇到的問題

須要注意的點： 1.獲取簽名發送的url必定要是當前頁面的url，否則會簽名失敗； 2.發送的當前url若是沒有帶參數，而後編碼後再發過去，在ios下會出現第一次獲得簽名時是失敗的，刷新後再獲得才成功，在安卓下沒有問題；解決方法是不帶參數的url不用編碼 3.發送的當前url若是後面帶有參數，不編碼發送獲取簽名是成功的；可是若是是作分享，在分享好的頁面若是再要調起微信簽名，會簽名失敗，這種狀況就須要編碼後才發送url,就能夠屢次簽名都成功

獲取微信SDK簽名使用方法

/**
*發送當前頁面的url，從後臺獲得相應的appid、timestamp、nonceStr、signature
*/
callAxios({
            method: 'get',
            url: `${APP_CONFIG.getwechatSign}?url=${window.location.href}`,
        })
        .then((response) => {
            wxConfig(response.data.appId, response.data.timestamp, response.data.nonceStr, response.data.signature);
 })
複製代碼

在須要用到分享的頁面調用上面封裝好的微信分享函數

// 微信自定義分享連接和圖文
wxShareConfig($imgUrl,$desc,$title,$link, function(response) {

 });
複製代碼

在須要用到掃一掃的地方調用上面封裝好微信掃一掃函數

wxScanQRCode (function(response) {
	let index = response .lastIndexOf("\,");  
	response  = response .substring(index + 1, response.length);
	//  response是獲得的返回值
});
複製代碼