微信公衆號開發 - 微信JS-SDK使用(我項目用的是vue)

微信JS-SDK介紹

官方文檔地址：mp.weixin.qq.com/wiki?t=reso…

微信JS-SDK使用，以掃一掃爲例:

1.在須要調用JS接口的頁面引入以下JS文件，（支持https）：

res.wx.qq.com/open/js/jwe…

2.js-sdk的簽名權限,這個權限是由後臺提供的,前端只須要把簽名權限注入到wx.config中就能夠了，下面是咱們項目的寫法，我對請求進行了封裝,參數拼接用了qs插件

wxConfig([    //調用得到簽名和受權的方法
        "checkJsApi",
        "scanQRCode",
      ],
      {
        success: data => {
          alert("微信驗證權限成功");
          alert(data);
        }
      }
    );
    
export const wxConfig = async (jsApiList, { success }) => { 
    const data = {
        url: location.href.split('#')[0],  //當前路徑
        appType: appType  //這個參數是咱們項目後臺須要的，咱們項目名稱
    }
    const url = '/wx/getJsSdkPermission?' + qs.stringify(data);  //獲取簽名
    await http.get({ url, data }, {
        success: (data) => {
            wx.config({
                beta: true, // 必須這麼寫，不然wx.invoke調用形式的jsapi會有問題
                debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId: "XXXXXXXXXX", // 必填，企業號的惟一標識，此處填寫企業號corpid
                timestamp: data.timestamp, // 必填，生成簽名的時間戳
                nonceStr: data.noncestr, // 必填，生成簽名的隨機串
                signature: data.sign, // 必填，簽名，見附錄1
                jsApiList // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
            });
            wx.ready(function(data) {
                alert('微信權限成功');
                success && success(data);
                // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
            })
            wx.error(function(res){
                console.log(res);
            });
        }
    });
}
複製代碼

這裏須要注意的地方debug在上線後要改成false,jsApiList裏要填你要使用的接口,否則沒有做用，我如今用scanQRCode接口，受權成功後，纔可使用api裏的方法

3.給掃一掃按鈕添加點擊事件,調用 wx.scanQRCode方法， 注意：由於這塊是須要用戶觸發的，因此沒必要放在wx.ready()方法中，若須要頁面加載時就執行的話，如分享接口，就必須放在wx.ready()方法中執行

handelScan() { //調起企業微信掃一掃接口 
      wx.scanQRCode({
        desc: "scanQRCode desc",
        needResult: 1, // 默認爲0，掃描結果由企業微信處理，1則直接返回掃描結果，
        scanType: ["qrCode", "barCode"], // 能夠指定掃二維碼仍是條形碼（一維碼），默認兩者都有
        success: function(res) {
          const result = res.resultStr;   //返回結果
        },
        error: function(res) {
          if (res.errMsg.indexOf("function_not_exist") > 0) {
            alert("版本太低請升級");
          }
        }
      });
    }
複製代碼