我在前幾篇部落格中寫到了獲取呼叫JS-SDK需要使用的access_token,網頁授權獲取使用者基本資訊,獲取JS-SDK使用簽名演算法需要使用的jsapi_ticket,現在我們使用微信JS-SDK,注入配置,並驗證是否正確.我用的是微信測試號

一.繫結域名(填寫JS介面安全域名).

二.引入JS檔案

在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

三：通過config介面注入許可權驗證配置

使用wx.config({

    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。

    appId: '', // 必填，公眾號的唯一標識

    timestamp: , // 必填，生成簽名的時間戳

    nonceStr: '', // 必填，生成簽名的隨機串

    signature: '',// 必填，簽名

    jsApiList: [] // 必填，需要使用的JS介面列表

});驗證配置是否正確.

四.生成簽名.

1.簽名需要的欄位:noncestr（隨機字串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分）

2.在公共方法中定義函式nonceStr()用於獲取隨機字串.

//生成隨機字串
 
function nonceStr(){
//定義一個字串
$chars='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
//當前的時間戳
$time = time();
//從該字串中獲取隨機字串
$chars = $chars.$time;
//打亂字串
$chars = str_shuffle($chars);
return substr($chars,0,16);
}

3.生成簽名.

在公共方法中定義signature()函式，用於生成簽名

//生成簽名函式,引數$time(生成簽名的時間),$url(網頁的url),$nonceStr(隨機字串)
 
//因為我們注入網頁的配置資訊中，生成簽名的時間和隨機字串必須和注入的一樣，
//所以我生成簽名的時候傳遞一個引數，以達到相同的時間戳，和隨機字串。
function signature($time,$url,$nonceStr){
//拼接字串
$string = 'jsapi_ticket='.getJsapiTicket().'&noncestr='.$nonceStr.'&timestamp='.$time.'&url='.$url;
//生成簽名
$string = sha1($string);
return $string;
}

五.生成呼叫微信JS-SDK介面所需要的配置資訊

在公共方法中定義getConfig()函式，用於生成配置資訊

//生成使用微信JS-SDK需要注入的配置資訊,引數$url(當前網址的url)
function getConfig($url){
$array = [];
$array['debug'] = true;
$array['appId'] = C('appID');
//生成簽名的時間戳
$time = time();
$array['timestamp'] = $time;
//簽名使用的隨機字串
$nonceStr = nonceStr();
$array['nonceStr'] = $nonceStr;
$array['signature'] = signature($time,$url,$nonceStr);
//設定需要使用的js介面
$array['jsApiList'] = ['chooseImage'];
//返回配置資訊
return json_encode($array);
}

六.獲取配置資訊並注入到網頁，通過微信開發者工具檢視配置是否正確.

class IndexController extends BaseController {
public function index(){
//當前的網址
        // 注意 URL 一定要動態獲取，不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
//獲取配置資訊
$config = getConfig($url);
//傳入配置資訊到網頁中
$this->assign('config',$config);
$this->display();
}
}

在網頁中獲取配置資訊並通過

wx.config({$config});驗證

我們在微信開發者工具中開啟該網頁，會發現配置正確.

以上是生成配置資訊並驗證的流程，有問題請大家指出，謝謝