微信JS SDK網頁接口

1、JS端

一、綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

備註：登陸後可在「開發者中心」查看對應的接口權限。

二、引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

三、經過config接口注入配置

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: '${timestamp}', // 必填，生成簽名的時間戳（注意這裏接受後臺傳來的參數，在Js中能夠直接使用這種方式接受）
    nonceStr: '${nonceStr}', // 必填，生成簽名的隨機串
    signature: '${signature}',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

appId：公衆號原始ID

timestamp：當前時間的時間戳

nonce_str：隨機字符串

signature：簽名。

一、首先經過https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appId&secret=secret接口獲得token

二、經過https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi獲得ticket

三、經過這些參數指定方式進行簽名,簽名方式使用SHA1，獲得signature（注意須要傳遞URL,URL是指訪問當前頁面的URL。不知道這裏URL解釋錯了沒用）

 

2、後臺端調用接口獲得相應參數，傳遞到前端（spring mvc /servlet/struts2均可以）

 request.setAttribute("timestamp", data.get("timestamp"));
 request.setAttribute("nonceStr", data.get("nonceStr"));
 request.setAttribute("signature", data.get("signature"));
 request.getServletContext().getRequestDispatcher("/wechat.jsp").forward(request,response);

 

三：使用微信官網提供的調試工具進行調試。http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign

注意：

一、獲取驗證參數接口，獲得相應參數（php、java、nodejs以及python）

http://demo.open.weixin.qq.com/jssdk/sample.zip

２、分享接口並非只有認證號能用，如今測試號和未認證號到能夠用。（以測試的）

３、測試分享接口須要注意的是，須要你主動去觸發分享接口（好比分享到朋友圈，而後點擊分享按鈕觸發Ｊｓ代碼）

４、使用圖像和音頻上傳接口上傳的圖片和音頻只有3天的有效期，若是圖片和音頻你想長期使用的話，你本地也要保存。

不理解：

一、連接中包含php、java、nodejs以及python的示例代碼供第三方參考，第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制。

二、全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）。

三、不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回。

四、對於調用jssdk的時候，wx.ready須要注意，判斷你的事件是不是頁面加載的時候主動觸發，仍是用戶有操做的觸發。若是頁面加載的時候自動觸發，你必需要用wx.ready包括對應的事件，不然不須要。