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,微信配置失败");
      }
    },
希望对各位会有帮助吧,大家取其精华,去其糟粕哈,写博客也写得不是很好,大家多包含
Logo

前往低代码交流专区

更多推荐