微信開發(fā)交流群：148540125
歡迎留言据某、轉(zhuǎn)發(fā)搭儒、打賞
系列文章參考地址 極速開發(fā)微信公眾號
項(xiàng)目源碼參考地址 點(diǎn)我點(diǎn)我--歡迎Start
查看公眾號是否有使用JSSDK的權(quán)限
服務(wù)號、訂閱號可以通過登錄微信公眾平臺查看開發(fā)>接口權(quán)限
使用JSSDK主要包括
1、判斷當(dāng)前客戶端版本是否支持指定JS接口宠进、
2、分享接口（微信認(rèn)證）
3藐翎、圖像接口
4、音頻接口
5实幕、智能接口（識別語音并返回結(jié)果）
6吝镣、設(shè)備信息（獲取網(wǎng)絡(luò)狀態(tài)）
7、地理位置
8昆庇、界面操作
9末贾、微信掃一掃
10、微信小店（服務(wù)號必須通過微信認(rèn)證）
11整吆、微信卡券 （微信認(rèn)證）
12拱撵、微信支付（服務(wù)號必須通過微信認(rèn)證）
使用JSSDK步驟
步驟一：綁定域名
先登錄微信公眾平臺進(jìn)入公眾號設(shè)置的功能設(shè)置里填寫JS接口安全域名。
步驟二：引入JS文件
在需要調(diào)用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 標(biāo)準(zhǔn)模塊加載方法加載
步驟三：通過config接口注入權(quán)限驗(yàn)證配置
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)府蛇，可以在pc端打開集索，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印汇跨。
appId: '', // 必填务荆，公眾號的唯一標(biāo)識
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填穷遂，生成簽名的隨機(jī)串
signature: '',// 必填函匕，簽名，見附錄1
jsApiList: [] // 必填蚪黑，需要使用的JS接口列表盅惜，所有JS接口列表見附錄2
});
簽名算法生成規(guī)則
請 官方參考文檔
下面具體來講講 開源項(xiàng)目weixin_guide中的封裝中剩。
使用的時(shí)候只要在Controller方法上添加一個(gè)攔截器 JSSDKInterceptor 來實(shí)現(xiàn)簽名驗(yàn)證再將wx.config需要的參數(shù)設(shè)置對應(yīng)的屬性在頁面上進(jìn)行獲取。
攔截器實(shí)現(xiàn)如下：
public class JSSDKInterceptor implements Interceptor{
/**
* 如果要支持多公眾賬號酷窥，只需要在此返回各個(gè)公眾號對應(yīng)的 ApiConfig 對象即可 可以通過在請求 url 中掛參數(shù)來動態(tài)從數(shù)據(jù)庫中獲取
* ApiConfig 屬性值
*/
public ApiConfig getApiConfig() {
ApiConfig ac = new ApiConfig();
// 配置微信 API 相關(guān)常量
ac.setToken(PropKit.get("token"));
ac.setAppId(PropKit.get("appId"));
ac.setAppSecret(PropKit.get("appSecret"));
/**
* 是否對消息進(jìn)行加密咽安，對應(yīng)于微信平臺的消息加解密方式： 1：true進(jìn)行加密且必須配置 encodingAesKey
* 2：false采用明文模式，同時(shí)也支持混合模式
*/
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 一定要?jiǎng)討B(tài)獲取蓬推，不能 hardcode.
String url = "http://" + controller.getRequest().getServerName() // 服務(wù)器地址
// + ":"
// + getRequest().getServerPort() //端口號
+ controller.getRequest().getContextPath() // 項(xiàng)目名稱
+ controller.getRequest().getServletPath();// 請求頁面或其他地址
String qs = controller.getRequest().getQueryString(); // 參數(shù)
if (qs != null) {
url = url + "?" + (controller.getRequest().getQueryString());
}
System.out.println("url>>>>" + url);
String timestamp = create_timestamp();
// 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序
//注意這里參數(shù)名必須全部小寫妆棒，且必須有序
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中使用
/**
* 對整個(gè)Controller或者其中的方法添加JSSDK簽名驗(yàn)證攔截器
*/
@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>
測試結(jié)果
在AppConfig 中添加路由me.add("/jssdk", JSSDKController.class,"/view");手機(jī)中訪問 http://域名[/項(xiàng)目名稱]/jssdk ,如果設(shè)置了 debug= true 成功了就會彈出
如果出現(xiàn) {"errorMsg":"config:invalid url domian"} 請檢查步驟一：綁定域名 與你訪問的域名是否在安全域名列表當(dāng)中
步驟四：通過ready接口處理成功驗(yàn)證
config信息驗(yàn)證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后沸伏，config是一個(gè)客戶端的異步操作糕珊，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行毅糟。對于用戶觸發(fā)時(shí)才調(diào)用的接口红选，則可以直接調(diào)用，不需要放在ready函數(shù)中姆另。
wx.ready(function(){
// 1 判斷當(dāng)前版本是否支持指定 JS 接口喇肋，支持批量判斷
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
//下面就可以寫一系列的接口了
......
});
步驟五：通過error接口處理失敗驗(yàn)證
wx.error(function (res) {
alert(res.errMsg);
});
步驟六：接口調(diào)用
攔截器具體實(shí)現(xiàn) 參考地址 點(diǎn)這里
js 接口調(diào)用參考地址 點(diǎn)這里
以上就是JSSDK使用的介紹。
歡迎留言迹辐、轉(zhuǎn)發(fā)蝶防、打賞項(xiàng)目
源碼參考地址 點(diǎn)我點(diǎn)我--歡迎Start
