測試js的介面功能，我用的是BAE伺服器不是SAE伺服器。SAE伺服器不能寫入檔案，測試會出問題。
什麼叫js-sdk，我先示範js-sdk介面的具體作用。
我在微信隨便開啟一片推送文章如下圖：
點開第一篇文章
上面就是我們的串連文章，如果我們把這篇文章發送給朋友，顯示效果如下圖：
分享到朋友圈我們再來看看效果：
為什麼同樣是文章串連，在公眾號、發送給朋友、發送到朋友圈顯示的介面效果不一樣。公眾號的顯示效果是因為微信公眾帳號在推送的時候調用了微信的訊息介面，而後兩者是因為頁面調用js-sdk相關的sdk介面。
發送給朋友調用了js介面的擷取“分享給朋友”按鈕點擊狀態及自訂分享內容介面。
發送給朋友圈調用了js介面的擷取“分享到朋友圈”按鈕點擊狀態及自訂分享內容介面。
下面我們來實現調用js-sdk介面的步驟：
第一步：微信公眾平台進入“公眾號設定”的“功能設定”裡填寫“JS介面安全網域名稱”。
如下圖：
只有置於該網域名稱下的頁面才能調用js介面。
第二步：http://demo.open.weixin.qq.com/jssdk/sample.zip串連這個地址下載 ，開啟裡面的php檔案夾，你發現4個php檔案
前面3 個php檔案是設定檔，不要動它，sample.php是我們在微信中開啟的串連頁面，在這個頁面中我們來編寫我們的頁面代碼。這個檔案我用來測試，裡面的代碼跟原版已經不同。
<?php// echo "nihao";require_once "jssdk.php";$jssdk = new JSSDK("wxaf471be5d2bc9521", "93f5c3817074d43e7a7ab3f403cc72dd");//JSSDK中的參數是appid和appsecret。$signPackage = $jssdk->GetSignPackage();//擷取配置參數。?>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /></head><body> <div>我靠</div> <div>豬八戒</div> <button style="color: red" id="btn">你好</button> <button id="btn1">唐生</button></body><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//這個是js-sdk檔案，一定要引入。<script> var button = document.getElementsByTagName("button"); var btn = document.getElementById("btn"); var div = document.getElementsByTagName("div")[0]; var btn1 = document.getElementById("btn1"); //wx表示一個js-sdk構建的一個對象。config（）是它的一個方法，這個介面用來驗證配置。 wx.config({ debug: true,//true表示每調用一個介面資訊都會在頁面alert一段字串。方便測試過程中國是否能正確調用介面。 appId: '<?php echo $signPackage["appId"];?>', timestamp: <?php echo $signPackage["timestamp"];?>, nonceStr: '<?php echo $signPackage["nonceStr"];?>', signature: '<?php echo $signPackage["signature"];?>', //上面的4個參數，如果你像深入瞭解其來源就去查看jssdk.php代碼。測試過程不需要對上面的代碼做任何操作。 jsApiList: [ // 所有要調用的 API 都要加到這個列表中 'onMenuShareAppMessage',//擷取“分享給朋友”按鈕點擊狀態及自訂分享內容介面。 'chooseImage',//擷取手機相片介面 'openLocation'//擷取微信地圖介面 ] });//所有的js調用介面都要放到下面的ready（）中。 wx.ready(function () { // 在這裡調用 API //擷取“分享給朋友”按鈕點擊狀態，點擊後發送給朋友微信，微信上的推送顯示內容就是下面的資料 wx.onMenuShareAppMessage({ title: '大聖', // 分享標題 desc: '我要堅持', // 分享描述 link: 'http://www.baidu.com', // 分享連結 imgUrl: 'http://discuz.comli.com/weixin/weather/icon/cartoon.jpg', // 分享表徵圖 type: 'link', // 分享類型,music、video或link，不填預設為link dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空白 success: function () { // 使用者確認分享後執行的回呼函數 alert("success"); }, cancel: function () { // 使用者取消分享後執行的回呼函數 alert("error"); } }); //拍照或從手機相簿選擇。點擊頁面上的按鈕就可以調用手機裡的相簿。 btn.onclick = function(){ wx.chooseImage({ count: 1, // 預設9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標籤的src屬性顯示圖片 } }) }; //微信內建地圖介面。點擊該按鈕就可轉到顯示當前位置的地圖頁面 btn1.onclick = function() { wx.openLocation({ latitude: 0, // 緯度，浮點數，範圍為90 ~ -90 longitude: 0, // 經度，浮點數，範圍為180 ~ -180。 name: '', // 位置名 address: '', // 地址詳情說明 scale: 1, // 地圖縮放層級,整形值,範圍從1~28。預設為最大 infoUrl: '' // 在查看位置介面底部顯示的超連結,可點擊跳轉}); } });// wx.checkJsApi({// jsApiList: ['onMenuShareAppMessage'], // 需要檢測的JS介面列表，所有JS介面列表見附錄2,// success: function(res) {// // 以索引值對的形式返回，可用的api值true，不可用為false// // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}// alert("success");// }// });// btn.onclick = function() {// div.innerText = "齊天大聖";// wx.onMenuShareAppMessage({// title: '大聖', // 分享標題// desc: '我要堅持', // 分享描述// link: 'http://www.baidu.com', // 分享連結// imgUrl: 'http://discuz.comli.com/weixin/weather/icon/cartoon.jpg', // 分享表徵圖// type: 'link', // 分享類型,music、video或link，不填預設為link// dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空白// success: function () { // // 使用者確認分享後執行的回呼函數// alert("success");// },// cancel: function () { // // 使用者取消分享後執行的回呼函數// alert("error");// }// }); // }</script></html>
測試js的介面功能，我用的是BAE伺服器不是SAE伺服器。SAE伺服器不能寫入檔案，測試會出問題。
更多功能及詳細資料，請大家訪問http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
