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

風華振茂發表於2017-12-12
JS

微信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是得到的返回值
});
複製程式碼

相關文章