vue公眾號h5掉微信掃一掃（三部曲）

配合官方檔案https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 ，了解簡單流程

一.第一步系結域名，就是你在公眾號登錄之后要設定域名，token令牌等，還有白名單，這個叫后端弄好先，

二.安裝js-sdk的或者weixin-jsapi包，這有個坑點就是專案如果是vue你要用weixin-jsapi，用js-sdk會有別的坑問題

（用npm 或yarn安裝npm install weixin-js-sdk --save 或者npm install weixin-jsapi --save）import wx from “weixin-jsapi” 在main.js里面引入;

三.配置微信wx.config檔案，呼叫官方api就OK了（代碼可復制，圖片上有注意細節）

 // 設備二維碼掉攝像頭決議
    EquCode() {
      this.wxScanCode();
    },
    async wxScanCode() {
      let result = await apiWxConfig({
        url: window.location.href.split("#")[0], // 獲取當前掃碼界面的url，url后面不能攜帶任何引數及#號，所以在此進行分割
      });
      console.log("result", result);
      console.log("rresult.data.timestamp", result.data.timestamp);
      if (result.code == 200) {
        // 后端回傳的引數
        var timestamp = result.data.timestamp;
        var noncestr = result.data.nonceStr;
        var signature = result.data.signature;
        var appId = result.data.appId;
        console.log("rresult.data.timestamp", result.data.timestamp);
        wx.config({
          debug: false, // 開啟除錯模式,呼叫的所有api的回傳值會在客戶端alert出來，若要查看傳入的引數，可以在pc端打開，引數資訊會通過log打出，僅在pc端時才會列印，
          //                                debug : true, // 開啟除錯模式,呼叫的所有api的回傳值會在客戶端alert出來，若要查看傳入的引數，可以在pc端打開，引數資訊會通過log打出，僅在pc端時才會列印，
          appId: appId, // 必填，公眾號的唯一標識
          timestamp: timestamp, // 必填，生成簽名的時間戳
          nonceStr: noncestr, // 必填，生成簽名的隨機串
          signature: signature, // 必填，簽名，見附錄1
          jsApiList: ["checkJsApi", "scanQRCode", "chooseWXPay"], // 必填，需要使用的JS介面串列，所有JS介面串列見附錄2
        }); // 錯誤時
        wx.error(function (res) {
          alert("出錯了：" + res.errMsg); //這個地方的好處就是wx.config配置錯誤，會彈出視窗哪里錯誤，然后根據微信檔案查詢即可，
        });
        let tant = this;
        wx.ready(function () {
          wx.checkJsApi({
            jsApiList: ["scanQRCode"],

            success: function (res1) {
              wx.scanQRCode({
                needResult: 1, // 默認為0，掃描結果由微信處理，1則直接回傳掃描結果，
                scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
                success: function (res) {
                  var result = res.resultStr;
                  // 當needResult 為 1 時，掃碼回傳的結果
                  // location.href=res.resultStr;//掃描結果傳遞到的處理頁面,跳轉到這個頁面
                  // alert(result);
                  // location.href=res.resultStr;//掃描結果傳遞到的處理頁面,跳轉到這個頁面
                  // sessionStorage.setItem('saomiao_result',result);
                  //其它網頁呼叫二維碼掃描結果：
                  // var result = sessionStorage.getItem("saomiao_result");
                  setTimeout(() => {
                    if (result != "" && result != undefined) {
                      setToken("No", result);
                      tant.scanCode = getToken("No");
                    } else {
                      alert("未掃到編號");
                    }
                  }, 2000);
                },
                error: function (res) {
                  alert("出錯了", +res);
                  console.log(res);
                },
              });
            },
          });
        });
      } else {
        this.$toast.fail("js-sdk，微信配置失敗");
      }
    },

希望對各位會有幫助吧，大家取其精華，去其糟粕哈，寫博客也寫得不是很好，大家多包含