vue公众号h5掉微信扫一扫三步搞定

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，微信配置失败");
      }
    },

希望对各位会有帮助吧，大家取其精华，去其糟粕哈，写博客也写得不是很好，大家多包含

本文地址：https://blog.csdn.net/weixin_45575933/article/details/109355036