文章目錄
前言
微信JS-SDK是微信公衆平臺 面向網頁開發者提供的基於微信內的網頁開發工具包。
通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。
找了很多資料包括官方文檔發現都不夠詳細，這裏自己整理記錄下JAVA使用微信JSSDK的詳細步驟。
步驟
這裏先放上官方的微信JSSDK說明文檔，關於各種關鍵字的介紹可以先看這裏，如果有點不清晰可以看我下面的總結，之後會對每一步作詳細解釋。
- ①微信公總號授權JSSDK安全域名
- ②引入JS-SDK
- ③公衆號配置IP白名單來允許獲取access_token
- ④使用APPID和AppSecret來獲取access_token
- ⑤使用access_token獲取jsapi_ticket
- ⑥使用jsapi_ticket和url生成wx.config認證需要的參數。
微信公總號授權JS-SDK安全域名
登錄微信開放平臺,進入設置—>公衆號設置—>功能設置—>JS接口安全域名
引入JS-SDK
在自己的jsp頁面添加以下
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
這裏吐槽一下官方文檔，引入JS-SDK過後官方文檔的下一步就是通過config接口注入權限驗證配置，但沒有介紹config權限驗證需要的參數哪裏獲取，這裏也浪費了我一些時間。
公衆號配置IP白名單來允許獲取access_token
這一步很重要，自己就遇到過坑一直獲取不到access_token查了很多資料才發現是這裏的配置問題
進入開發–>基本配置—>IP白名單
使用APPID和AppSecret來獲取access_token
使用get請求https://api.weixin.qq.com/cgi-bin/token這個地址，來獲取access_token。注意這裏的access_token是有時效的，需要定時刷新。此請求需要3個參數:grant_type、appid、secret,其中grant_type是固定的，傳入“client_credential”，appid和secret需要在微信公衆號下查看。
使用access_token獲取jsapi_ticket
使用get請求https://api.weixin.qq.com/cgi-bin/ticket/getticket這個地址來獲取jsapi_ticket。和access_token一樣，jsapi_ticket也是有時效的,需要定時刷新。此請求需要兩個參數access_token和type,其中access_token爲上一步所獲取的token,type爲固定值傳入"jsapi"。至此config所需的準備工作已經完成。
使用jsapi_ticket和url生成wx.config認證需要的參數
利用上文獲取到的jsapi_ticket和請求的url可以生成config認證需要的參數。具體認證需要哪些參數官方文檔中已有提到，這裏只貼代碼:
**
* ClassName: JSSDK_Config
*
* @author hHui
* @Description: 用戶微信前端頁面的jssdk配置使用
*/
public class JSSDK_Config {
public static Map<String, String> jsSDK_Sign(String url) {
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String jsapi_ticket = GlobalConstants.getInstance().getString(Constants.TICKET_KEY);
String string1;
String signature = "";
//注意這裏參數名必須全部小寫，且必須有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
try {
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
ret.put("url", url);
ret.put("appId", GlobalConstants.getInstance().getString("appid"));
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
return ret;
}
private static String byteToHex(final byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash) {
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
}
jsSDK_Sign方法即爲生成config參數的,我使用的是spring框架，這裏將後端Controller和前段ajax請求也貼出來。
後端接口
/**
* 微信配置接口
*/
@RestController
@RequestMapping("/wechatconfig")
public class WeChatController {
@RequestMapping("/jssdk")
public Message JSSDK_config(@RequestParam(value = "url", required = true) String url) {
try {
Map<String, String> configMap = JSSDK_Config.jsSDK_Sign(url);
return Message.success(configMap);
} catch (Exception e) {
return Message.error();
}
}
}
Message類
/**
* ClassName: Message
*
* @Description: 用於消息回覆
*/
public class Message {
private int code;
private String msg;
private Object data;
public Message() {
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public Message(int code, String msg) {
this.code = code;
this.msg = msg;
}
public Message(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
/**
* 返回成功消息
*
* @param content 內容
* @return 成功消息
*/
public static Message success(String content, Object data) {
return new Message(Code.SUCCESS, content, data);
}
/**
* 返回成功消息
*
* @param content 內容
* @return 成功消息
*/
public static Message success(String content) {
return new Message(Code.SUCCESS, content);
}
/**
* 返回成功消息
*
* @return 成功消息
*/
public static Message success(Object data) {
return new Message(Code.SUCCESS, "操作成功", data);
}
/**
* 返回成功消息
*
* @return 成功消息
*/
public static Message success() {
return new Message(Code.SUCCESS, "操作成功");
}
/**
* 返回失敗消息
*
* @param content 內容
* @return 成功消息
*/
public static Message error(int code, String content, Object data) {
return new Message(code, content, data);
}
/**
* 返回失敗消息
*
* @param content 內容
* @return 成功消息
*/
public static Message error(String content, Object data) {
return new Message(Code.FAIL, content, data);
}
/**
* 返回失敗消息
*
* @param content 內容
* @return 成功消息
*/
public static Message error(String content) {
return new Message(Code.FAIL, content);
}
/**
* 返回失敗消息
*
* @return 成功消息
*/
public static Message error() {
return new Message(Code.FAIL, "操作失敗");
}
}
前段ajax請求
function jssdk() {
$.ajax({
url: "/wechatconfig/jssdk",
type: 'post',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: {
'url': location.href.split('#')[0]
},
success: function (data) {
wx.config({
debug: true,
appId: data.data.appId,
timestamp: data.data.timestamp,
nonceStr: data.data.nonceStr,
signature: data.data.signature,
jsApiList: ['checkJsApi']//此處只申請使用了一個接口，可根據需要申請多個接口的使用權
});
wx.ready(function () {//配置成功會調用此方法
});
wx.error(function (res) {//配置失敗調用此方法
}
);
}
});
}
至此，微信JSSDK相關配置已經完成，可以使用微信的JSSDK所提供的方法。水平有限，如有錯誤或不盡詳細的地方歡迎指出。