H5配置微信JSSDK -- 调用微信扫一扫

H5配置微信JSSDK -- 调用微信扫一扫

1.npm下载 / 导入相关JS

npm install weixin-js-sdk 

在需要调用JS接口的页面引入如下JS文件，（支持https）：[http://res.wx.qq.com/open/js/jweixin-1.2.0.js](http://res.wx.qq.com/open/js/jweixin-1.2.0.js)

2.引用（全局）main.js

import wx from "weixin-js-sdk";

3.配置

• 1.通过config接口注入权限验证配置

    WEIXIN_JSDK() {
        const url = encodeURIComponent(location.href.split("#")[0]); //获取当前页面路由
        http.fetchGet(`后端接口${url}`).then(data => {
            let a = data.data.data;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: a.appid, // 必填，公众号的唯一标识
                timestamp: a.timestamp, // 必填，生成签名的时间戳
                nonceStr: a.noncestr, // 必填，生成签名的随机串
                signature: a.signature, // 必填，签名
                jsApiList: ["scanQRCode", "getLocation"] // 必填，需要使用的JS接口列表
            });
        });
    },

注： jsApiList:[]用什么拿什么 接口列表：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#63
如果url后面有参数，一定要用encodeURIComponent转码，没有就不用加。

• 2.调起扫一扫接口

      wx.ready(function() {
        wx.scanQRCode({
          // 微信扫一扫接口
          desc: "scanQRCode desc",
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            const getCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            } else {
         
            }
          },
          fail: function(res) {
            Toast(res.errMsg);
          }
        });
      });

微信公众号配置

1.JS接口安全域设置

2.jpg

2.配置ip白名单

8.png