欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-02 12:26:20
配合https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 官方文档...

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里面引入;
vue公众号h5掉微信扫一扫三步搞定

三.配置微信wx.config文件,调用官方api就OK了(代码可复制,图片上有注意细节)

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

 // 设备二维码掉摄像头解析
    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

相关标签: js vue.js