工作中需要使用wxJSDK實(shí)現(xiàn)微信頁(yè)面授權(quán)登錄訪問訪問后臺(tái)數(shù)據(jù)（微信JS-SDK說(shuō)明文檔）。

以下步驟：

1.判斷頁(yè)面環(huán)境是否屬于微信瀏覽器

//init.js
/**
 * 檢測(cè)瀏覽器
 * */
function judgeBrowser() {
    if(typeof window.browser != 'object') {
        window.browser = {
            versions: function() {
                let u = navigator.userAgent;
                return {
                    trident: u.indexOf('Trident') > -1, //IE內(nèi)核
                    presto: u.indexOf('Presto') > -1, //opera內(nèi)核
                    webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端
                    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應(yīng)該程序，沒有頭部與底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        };
    }
}else{
  console.warn('不是微信瀏覽器,請(qǐng)?jiān)谖⑿艦g覽器打開');
}
judgeBrowser();
console.log('是否屬于微信瀏覽器',browser.versions.weixin) // true or false

如果不是微信瀏覽器,則顯示如下：

不是微信瀏覽器.png

2.如果是微信瀏覽器，引入wxJSDK ，執(zhí)行權(quán)限配置校驗(yàn)函數(shù)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,// 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
    appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: '', // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    signature: '',// 必填，簽名
    jsApiList: [],// 必填，需要使用的JS接口列表
  });
  //通過ready接口處理成功驗(yàn)證
  wx.ready(function(){
    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
    console.log('wx.ready');
  });
  //通過error接口處理失敗驗(yàn)證
  wx.error(function(res){
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
    console.log('wx.error',res);
  });
}
</script>

其中參數(shù)：
appId：公眾號(hào)ID,從公眾號(hào)后臺(tái)控制面板復(fù)制即可
signature：簽名由后臺(tái)生成簽名提供
timestamp：生成簽名的時(shí)間戳，由后臺(tái)連同簽名一起返回
nonceStr：生成簽名的隨機(jī)串,由后臺(tái)連同簽名一起返回

如果wx.config()權(quán)限校驗(yàn)通過,則微信調(diào)試工具Console面板如下:

wx.config()校驗(yàn)通過.png