但是很多人在配置和使用的時候,老是出各種錯誤。最近項目也涉及到這個,就記錄一下過程,并對方法進行封裝。
基本步驟如下:1.綁定域名先確保你使用的是認證的賬號(訂閱號,服務號),因為沒認證的號是沒有JS安全域名配置權限的。建議開發前先看看公眾號類型的接口權限說明。登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
2.引入JS文件在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.QQ.com/open/js/jweixin-1.0.0.js請注意,如果你的頁面啟用了https,務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否則將無法在iOS9.0以上系統中成功使用JSSDK如需使用搖一搖周邊功能,請引入 jweixin-1.1.0.js3.通過config接口注入權限驗證配置所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調用。
wx.config({ debug: true, // 開啟調試模式 appId: '', // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填,生成簽名的隨機串 signature: '',// 必填,簽名,見附錄1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2});4.通過ready接口處理成功驗證config信息驗證后會執行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。wx.ready(function(){ // 對于用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。});這些基本步驟在 微信JS-SDK說明文檔 里邊講的很清楚了。但很多人在開發的時候用自己服務器不知道上邊第3步配置信息該如何配置,我就具體說說方法吧。1.下載jssdk的demo下載地址:http://demo.open.weixin.qq.com/jssdk/sample.zip2.解壓demo,獲取JSSDK的驗證類將jssdk.php放到自己的服務器上引入自己的程序。
3.獲取簽名信息初始化JSSDK類之后,獲取簽名信息,然后將簽名信息填寫到上邊步驟3中配置項中就OK了。
require_once "jssdk.php";$jssdk = new JSSDK("yourAppID", "yourAppSecret");$signPackage = $jssdk->GetSignPackage(); wx.config({ debug: true, appId: '<?php echo $signPackage["appId"];?>', timestamp: <?php echo $signPackage["timestamp"];?>, nonceStr: '<?php echo $signPackage["nonceStr"];?>', signature: '<?php echo $signPackage["signature"];?>', jsApiList: [ // 所有要調用的 API 都要加到這個列表中 ]});方法的封裝:用法: 前端頁面嵌入代碼 <php>echo register_jssdk(true);</php> 或者{php echo register_jssdk(true);}根據自己使用的框架而定。
/** * 微信jssdk * @param [bool] $debug [是否是使用debug模式] * @return [string] 微信jssdk代碼 */function register_jssdk($debug=false){ require_once APP_ROOT.'/Api/jssdk.php'; $appid = 'wechat_appid'; $secret = 'wechat_secret'; $jssdk = new JSSDK($appid,$secret); $signPackage = $jssdk->GetSignPackage(); if($debug){ $debug = 'true'; }else{ $debug = 'false'; } $js = "<script src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script> <script> wx.config({ debug: ".$debug.", appId: '".$signPackage["appId"]."', timestamp: ".$signPackage["timestamp"].", nonceStr: '".$signPackage["nonceStr"]."', signature: '".$signPackage["signature"]."', jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'sto
就是這么簡單!
新聞熱點
疑難解答