微信公眾號開發教程[017]-網頁開發-JSSDK
阿新 • • 發佈：2019-01-24
我承接app和微信公眾號開發,如果有誰需要的話,可以惠顧我,謝謝.
QQ: 40678884
微信: szuzsq
-------------------------------------------------------------------------------------------------------------------------------------
jssdk就是在微信頁面裡呼叫手機裝置(如相機,重力感應等)的一套javascript程式碼. 題外話,做app時,在網頁裡呼叫手機裝置,比較出名的是cordova,大家可以度娘一下,練練手.不過我嫌這玩意麻煩,就自己寫了套,是從 WebViewJavascriptBridge: https://github.com/marcuswestin/WebViewJavascriptBridge裡面改過來的,原始WebViewJavascriptBridge只支援ios,我改為也支援android了,同時優化了一下程式碼.大家如果有需要,可以找我(QQ:40678884).這玩意,其實就是在頁面和手機之間打個洞,例如頁面提供個javascript函式,讓iphone的ios程式碼呼叫(允許有引數和返回值);或者反過來ios提供個函式讓javascript呼叫.
言歸正傳,使用jssdk也不難.
1).繫結域名.
例如,我的程式碼如下:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>3).下載官方的示例程式碼:
在程式碼裡提供了幾種語言的實現.我使用php..裡面的sample.php我改了一下,就是我要呼叫手機裝置了.,程式碼如下:
<?php //檔名: http://szuzsq.tunnel.qydev.com/weixin/sample.php error_reporting(E_ALL || ~E_NOTICE); header("Content-type:text/html; charset=utf-8"); require_once "jssdk.php"; $jssdk = new JSSDK("wxf649ff600f132a41", "5baf64562b15223f919165d083f9b889"); $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--因為在手機中，所以新增viewport--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>微信測試</title> </head> <body> <button id="weixin" style="display: block; margin: 2em auto">微信介面測試</button> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> 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都要加到這個列表中,這裡以影象介面為例 "chooseImage", "previewImage", "uploadImage", "downloadImage"] }); var btn = document.getElementById('weixin'); wx.ready(function() { //在這裡呼叫API btn.onclick = function() { wx.chooseImage({ success: function(res) { var localIds = res.localIds; //返回選定照片的本地ID列表,localId可以作為img標籤的src屬性顯示圖片 } }); } }); </script> </body> </html>
4).在我這邊的jssdk.php程式碼裡,提交get請求的程式碼,有些問題.開啟了ssl驗證,我就把它關了(即改為和我在utils.php裡的curl_http_get程式碼一樣).大家酌情考慮.程式碼如下:
private function httpGet($url) {
//$curl = curl_init();
//curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
//curl_setopt($curl, CURLOPT_TIMEOUT, 500);
//// 為保證第三方伺服器與微信伺服器之間資料傳輸的安全性，所有微信介面採用https方式呼叫，必須使用下面2行程式碼開啟ssl安全校驗。
//// 如果在部署過程中程式碼在此處驗證失敗，請到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別檔案。
//curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
//curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
//curl_setopt($curl, CURLOPT_URL, $url);
//$res = curl_exec($curl);
//curl_close($curl);
//return $res;
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); //將curl會話獲取的資訊以字串返回,而不是直接輸出
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); //禁止curl驗證對等證書(peer's certificate)
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0); //不檢查伺服器SSL證書中是否存在一個公用名(common name)
curl_setopt($curl, CURLOPT_POST, false); //傳送 GET請求.型別為:application/x-www-form-urlencoded
//curl_setopt($curl, CURLOPT_POSTFIELDS, $data); //PHP的curl支援通過給此選項傳遞關聯陣列(而不是字串)來生成multipart/form-data的POST請求
$result = curl_exec($curl);
if($errno = curl_errno($curl))
$result = "$errno:" . curl_error($curl);
curl_close($curl);
return $result;
}以下是效果圖:
