引用、配置微信JSDK，及网页授权

工作中需要使用wxJSDK实现微信页面授权登录访问访问后台数据（微信JS-SDK说明文档）。

以下步骤：

1.判断页面环境是否属于微信浏览器

//init.js
/**
 * 检测浏览器
 * */
function judgeBrowser() {
    if(typeof window.browser != 'object') {
        window.browser = {
            versions: function() {
                let u = navigator.userAgent;
                return {
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        };
    }
}else{
  console.warn('不是微信浏览器,请在微信浏览器打开');
}
judgeBrowser();
console.log('是否属于微信浏览器',browser.versions.weixin) // true or false

如果不是微信浏览器,则显示如下：

不是微信浏览器.png

2.如果是微信浏览器，引入wxJSDK ，执行权限配置校验函数wx.config({})

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="./js/init.js"></script>
<script>
//判断浏览器
if(browser.versions.weixin){
  wx.config({
    debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: '', // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [],// 必填，需要使用的JS接口列表
  });
  //通过ready接口处理成功验证
  wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    console.log('wx.ready');
  });
  //通过error接口处理失败验证
  wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    console.log('wx.error',res);
  });
}
</script>

其中参数：
appId：公众号ID,从公众号后台控制面板复制即可
signature：签名由后台生成签名提供
timestamp：生成签名的时间戳，由后台连同签名一起返回
nonceStr：生成签名的随机串,由后台连同签名一起返回

如果wx.config()权限校验通过,则微信调试工具Console面板如下:

wx.config()校验通过.png

最后编辑于：2019.07.18 10:54:33