引用、配置微信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

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

引用、配置微信JSDK,及网页授权_第1张图片
不是微信浏览器.png

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




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

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

引用、配置微信JSDK,及网页授权_第2张图片
wx.config()校验通过.png

你可能感兴趣的:(引用、配置微信JSDK,及网页授权)