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

2,706 阅读2分钟

微信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("版本过低请升级");
          }
        }
      });
    }