微信公众号开发 - 微信JS-SDK使用(我项目用的是vue)

微信JS-SDK介绍

官方文档地址：mp.weixin.qq.com/wiki?t=reso…

微信JS-SDK使用，以扫一扫为例:

1.在需要调用JS接口的页面引入如下JS文件，（支持https）：

res.wx.qq.com/open/js/jwe…

2.js-sdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了，下面是我们项目的写法，我对请求进行了封装,参数拼接用了qs插件

    wxConfig([    //调用获得签名和授权的方法
        "checkJsApi",
        "scanQRCode",
      ],
      {
        success: data => {
          alert("微信验证权限成功");
          alert(data);
        }
      }
    );
    
export const wxConfig = async (jsApiList, { success }) => { 
    const data = {
        url: location.href.split('#')[0],  //当前路径
        appType: appType  //这个参数是我们项目后台需要的，我们项目名称
    }
    const url = '/wx/getJsSdkPermission?' + qs.stringify(data);  //获取签名
    await http.get({ url, data }, {
        success: (data) => {
            wx.config({
                beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: "XXXXXXXXXX", // 必填，企业号的唯一标识，此处填写企业号corpid
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.noncestr, // 必填，生成签名的随机串
                signature: data.sign, // 必填，签名，见附录1
                jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function(data) {
                alert('微信权限成功');
                success && success(data);
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            })
            wx.error(function(res){
                console.log(res);
            });
        }
    });
}
复制代码

这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用，我现在用scanQRCode接口，授权成功后，才可以使用api里的方法

3.给扫一扫按钮添加点击事件,调用 wx.scanQRCode方法， 注意：因为这块是需要用户触发的，所以不必放在wx.ready()方法中，若需要页面加载时就执行的话，如分享接口，就必须放在wx.ready()方法中执行

    handelScan() { //调起企业微信扫一扫接口 
      wx.scanQRCode({
        desc: "scanQRCode desc",
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
        success: function(res) {
          const result = res.resultStr;   //返回结果
        },
        error: function(res) {
          if (res.errMsg.indexOf("function_not_exist") > 0) {
            alert("版本过低请升级");
          }
        }
      });
    }
复制代码