微信公众号开发 - 微信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("版本太低请升级");
          }
        }
      });
    }
复制代码