微信開發交流群：148540125
歡迎留言、轉發、打賞
系列文章參考地址 極速開發微信公眾號
項目源碼參考地址 點我點我--歡迎Start
查看公眾號是否有使用JSSDK的權限
服務號、訂閱號可以通過登錄微信公眾平臺查看開發>接口權限
使用JSSDK主要包括
1、判斷當前客戶端版本是否支持指定JS接口、
2、分享接口（微信認證）
3、圖像接口
4、音頻接口
5、智能接口（識別語音并返回結果）
6、設備信息（獲取網絡狀態）
7、地理位置
8、界面操作
9、微信掃一掃
10、微信小店（服務號必須通過微信認證）
11、微信卡券 （微信認證）
12、微信支付（服務號必須通過微信認證）
使用JSSDK步驟
步驟一：綁定域名
先登錄微信公眾平臺進入公眾號設置的功能設置里填寫JS接口安全域名。
步驟二：引入JS文件
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備注：支持使用 AMD/CMD 標準模塊加載方法加載
步驟三：通過config接口注入權限驗證配置
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
簽名算法生成規則
請 官方參考文檔
下面具體來講講 開源項目weixin_guide中的封裝。
使用的時候只要在Controller方法上添加一個攔截器 JSSDKInterceptor 來實現簽名驗證再將wx.config需要的參數設置對應的屬性在頁面上進行獲取。
攔截器實現如下：
public class JSSDKInterceptor implements Interceptor{
/**
* 如果要支持多公眾賬號，只需要在此返回各個公眾號對應的 ApiConfig 對象即可 可以通過在請求 url 中掛參數來動態從數據庫中獲取
* ApiConfig 屬性值
*/
public ApiConfig getApiConfig() {
ApiConfig ac = new ApiConfig();
// 配置微信 API 相關常量
ac.setToken(PropKit.get("token"));
ac.setAppId(PropKit.get("appId"));
ac.setAppSecret(PropKit.get("appSecret"));
/**
* 是否對消息進行加密，對應于微信平臺的消息加解密方式： 1：true進行加密且必須配置 encodingAesKey
* 2：false采用明文模式，同時也支持混合模式
*/
ac.setEncryptMessage(PropKit.getBoolean("encryptMessage", false));
ac.setEncodingAesKey(PropKit.get("encodingAesKey",
"setting it in config file"));
return ac;
}
@Override
public void intercept(Invocation inv) {
inv.invoke();
Controller controller = inv.getController();
ApiConfigKit.setThreadLocalApiConfig(getApiConfig());
JsTicket jsApiTicket = JsTicketApi.getTicket(JsApiType.jsapi);
String jsapi_ticket = jsApiTicket.getTicket();
String nonce_str = create_nonce_str();
// 注意 URL 一定要動態獲取，不能 hardcode.
String url = "http://" + controller.getRequest().getServerName() // 服務器地址
// + ":"
// + getRequest().getServerPort() //端口號
+ controller.getRequest().getContextPath() // 項目名稱
+ controller.getRequest().getServletPath();// 請求頁面或其他地址
String qs = controller.getRequest().getQueryString(); // 參數
if (qs != null) {
url = url + "?" + (controller.getRequest().getQueryString());
}
System.out.println("url>>>>" + url);
String timestamp = create_timestamp();
// 這里參數的順序要按照 key 值 ASCII 碼升序排序
//注意這里參數名必須全部小寫，且必須有序
String str = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
String signature = HashKit.sha1(str);
System.out.println("appId " + ApiConfigKit.getApiConfig().getAppId()
+ " nonceStr " + nonce_str + " timestamp " + timestamp);
System.out.println("url " + url + " signature " + signature);
System.out.println("nonceStr " + nonce_str + " timestamp " + timestamp);
System.out.println(" jsapi_ticket " + jsapi_ticket);
System.out.println("nonce_str " + nonce_str);
controller.setAttr("appId", ApiConfigKit.getApiConfig().getAppId());
controller.setAttr("nonceStr", nonce_str);
controller.setAttr("timestamp", timestamp);
controller.setAttr("url", url);
controller.setAttr("signature", signature);
controller.setAttr("jsapi_ticket", jsapi_ticket);
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
}
在Controller中使用
/**
* 對整個Controller或者其中的方法添加JSSDK簽名驗證攔截器
*/
@Before(JSSDKInterceptor.class)
public class JSSDKController extends Controller{
//@Before(JSSDKInterceptor.class)
public void index(){
render("share.jsp");
}
public void customer(){
render("customer.jsp");
}
public void pic(){
render("pic.jsp");
}
}
JSP頁面上面使用
<script type="text/javascript">
wx.config({
debug: true,
appId:'${appId}',
timestamp: '${timestamp}',
nonceStr: '${nonceStr }',
signature: '${signature}',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
...
]
});
</script>
測試結果
在AppConfig 中添加路由me.add("/jssdk", JSSDKController.class,"/view");手機中訪問 http://域名[/項目名稱]/jssdk ,如果設置了 debug= true 成功了就會彈出
如果出現 {"errorMsg":"config:invalid url domian"} 請檢查步驟一：綁定域名 與你訪問的域名是否在安全域名列表當中
步驟四：通過ready接口處理成功驗證
config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
wx.ready(function(){
// 1 判斷當前版本是否支持指定 JS 接口，支持批量判斷
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
//下面就可以寫一系列的接口了
......
});
步驟五：通過error接口處理失敗驗證
wx.error(function (res) {
alert(res.errMsg);
});
步驟六：接口調用
攔截器具體實現 參考地址 點這里
js 接口調用參考地址 點這里
以上就是JSSDK使用的介紹。
歡迎留言、轉發、打賞項目
源碼參考地址 點我點我--歡迎Start
