JSSDK曾經引爆前端以及后端的工程師，其魔性的力量毋庸置疑，在我們的技術眼里它的實現原理和根本是不能夠被改變的，這篇文章就不對其js的實現做任何評價和解說了(因為我也不是很懂，哈哈)，這里要說的是它的config配置實現，參考文檔：http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html? ！

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包，通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗；本篇將面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項！JSSDK使用步驟：

步驟一：在微信公眾平臺綁定安全域名

步驟二：后端接口實現JS-SDK配置需要的參數

步驟三：頁面實現JS-SDk中config的注入配置，并實現對成功和失敗的處理

(一)在微信公眾平臺綁定安全域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”(如下圖)，如果需要使用支付類接口，需要確保支付目錄在支付的安全域名下，否則將無法完成支付！(注：登錄后可在“開發者中心”查看對應的接口權限)，因為我用的是測試號，所以登錄以后界面就如下圖：

(二)后端接口實現JS-SDK配置需要的參數

1 wx.config({2 debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。3 appId: '', // 必填，公眾號的唯一標識4 timestamp: , // 必填，生成簽名的時間戳5 nonceStr: '', // 必填，生成簽名的隨機串6 signature: '',// 必填，簽名，見附錄17 jsApiList: [] // 必填，需要使用的JS接口列表8 });

我們查看js-sdk的配置文檔和以上的代碼可以發現config的配置需要4個必不可少的參數appId、timestamp、nonceStr、signature，這里的signature就是我們生成的簽名！

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用于調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket ,所以這里我們將jsapi_ticket的獲取放到定時任務中，因為它和token的生命周期是一致的，所以在這里我們將他們放到一起。

①將原有的定時任務WeChatTask中獲取token的代碼做如下修改：

1 packagecom.gede.wechat.common;2 importjava.text.SimpleDateFormat;3 importjava.util.Date;4 importjava.util.HashMap;5 importjava.util.Map;6

7 importcom.gede.web.util.GlobalConstants;8 importcom.gede.wechat.util.HttpUtils;9

10 importnet.sf.json.JSONObject;11 /**

12 *@authorgede13 *@versiondate：2019年5月26日 下午7:50:3814 * @description ：15 */

16 public classWeChatTask {17 /**

18 * @Description: 任務執行體19 *@param @throwsException20 */

21 public void getToken_getTicket() throwsException {22 Map params = new HashMap();23 //獲取token執行體

24 params.put("grant_type", "client_credential");25 params.put("appid", GlobalConstants.getInterfaceUrl("appid"));26 params.put("secret", GlobalConstants.getInterfaceUrl("AppSecret"));27 String jstoken =HttpUtils.sendGet(28 GlobalConstants.getInterfaceUrl("tokenUrl"), params);29

30 String access_token =JSONObject.fromObject(jstoken).getString(31 "access_token"); //獲取到token并賦值保存

32 GlobalConstants.interfaceUrlProperties.put("access_token", access_token);33

34 //獲取jsticket的執行體

35 params.clear();36 params.put("access_token", access_token);37 params.put("type", "jsapi");38 String jsticket =HttpUtils.sendGet(39 GlobalConstants.getInterfaceUrl("ticketUrl"), params);40 String jsapi_ticket =JSONObject.fromObject(jsticket).getString(41 "ticket");42 GlobalConstants.interfaceUrlProperties.put("jsapi_ticket", jsapi_ticket); //獲取到js-SDK的ticket并賦值保存

43

44 System.out.println("jsapi_ticket================================================" +jsapi_ticket);45 System.out.println(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())+"token為=============================="+access_token);46 }47 }

然后我們根據【JS-SDK使用權限簽名算法】對參數進行簽名得到signature，這里的url必須采用前端傳遞到后端，因為每次的url會有所變化，

②所以我們自定義一個權限簽名算法JSSDK_Config類，如下：

1 packagecom.gede.wechat.common;2

3 importjava.security.MessageDigest;4 importjava.util.Formatter;5 importjava.util.HashMap;6 importjava.util.UUID;7 importcom.gede.web.util.GlobalConstants;8

9 /**

10 *@authorgede11 *@versiondate：2019年5月30日 下午2:52:5712 * @description ：13 */

14 public classJSSDK_Config {15

16 /**

17 * @Description: 前端jssdk頁面配置需要用到的配置參數18 *@param @returnhashmap {appid,timestamp,nonceStr,signature}19 *@param @throwsException20 *@authorgede21 */

22 public static HashMap jsSDK_Sign(String url) throwsException {23 String nonce_str =create_nonce_str();24 String timestamp=GlobalConstants.getInterfaceUrl("timestamp");25 String jsapi_ticket=GlobalConstants.getInterfaceUrl("jsapi_ticket");26 //注意這里參數名必須全部小寫，且必須有序

27 String string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" +nonce_str28 + "&timestamp=" + timestamp + "&url=" +url;29 MessageDigest crypt = MessageDigest.getInstance("SHA-1");30 crypt.reset();31 crypt.update(string1.getBytes("UTF-8"));32 String signature =byteToHex(crypt.digest());33 HashMap jssdk=new HashMap();34 jssdk.put("appId", GlobalConstants.getInterfaceUrl("appid"));35 jssdk.put("timestamp", timestamp);36 jssdk.put("nonceStr", nonce_str);37 jssdk.put("signature", signature);38 returnjssdk;39

40 }41

42 private static String byteToHex(final byte[] hash) {43 Formatter formatter = newFormatter();44 for (byteb : hash) {45 formatter.format("%02x", b);46 }47 String result =formatter.toString();48 formatter.close();49 returnresult;50 }51

52 private staticString create_nonce_str() {53 returnUUID.randomUUID().toString();54 }55

56 }

③編寫使用JSSDK的controller類。新增JssdkController，代碼如下：

1 packagecom.gede.wechat.controller;2

3 importjava.util.Map;4 importorg.springframework.stereotype.Controller;5 importorg.springframework.web.bind.annotation.RequestMapping;6 importorg.springframework.web.bind.annotation.RequestMethod;7 importorg.springframework.web.bind.annotation.RequestParam;8 importorg.springframework.web.bind.annotation.ResponseBody;9

10

11 /**

12 *@authorgede13 *@versiondate：2019年5月30日 下午3:03:3114 * @description ：15 */

16 @Controller17 @RequestMapping("/jssdk")18 public classJssdkController {19 /**

20 * @Description: 前端獲取微信JSSDK的配置參數21 *@param @paramresponse22 *@param @paramrequest23 *@param @paramurl24 *@param @throwsException25 */

26 @RequestMapping(value="config",method=RequestMethod.POST)27 @ResponseBody28 publicMessage JSSDK_config(29 @RequestParam(value = "url", required = true) String url) {30 try{31 System.out.println(url);32 Map configMap =JSSDK_Config.jsSDK_Sign(url);33 returnMessage.success(configMap);34 } catch(Exception e) {35 System.out.println("error happened!!!");36 returnMessage.error();37 }38

39 }40 }

到這里我們后端對jssdk的簽名參數的封裝就基本完成了，其中用到了我們自己寫的Message類，代碼如下：

1 packagecom.gede;2

3 importcom.gede.Code;4

5 /**

6 *@authorgede7 *@versiondate：2019年5月30日 下午3:09:358 * @description ：用于消息回復9 */

10 public classMessage {11 private intcode;12 privateString msg;13 privateObject data;14 publicMessage() {15

16 }17

18 public intgetCode() {19 returncode;20 }21

22 public void setCode(intcode) {23 this.code =code;24 }25

26 publicString getMsg() {27 returnmsg;28 }29

30 public voidsetMsg(String msg) {31 this.msg =msg;32 }33

34 publicObject getData() {35 returndata;36 }37

38 public voidsetData(Object data) {39 this.data =data;40 }41

42 public Message(intcode,String msg) {43 this.code=code;44 this.msg=msg;45 }46

47 public Message(intcode,String msg,Object data) {48 this.code=code;49 this.msg=msg;50 this.data=data;51 }52 /**

53 * 返回成功消息54 *@paramcontent 內容55 *@return成功消息56 */

57 public staticMessage success(String content, Object data) {58 return newMessage(Code.SUCCESS, content, data);59 }60 /**

61 * 返回成功消息62 *@paramcontent 內容63 *@return成功消息64 */

65 public staticMessage success(String content) {66 return newMessage(Code.SUCCESS, content);67 }68 /**

69 * 返回成功消息70 *@paramcontent 內容71 *@return成功消息72 */

73 public staticMessage success(Object data) {74 System.out.println(Code.SUCCESS);75 return new Message(Code.SUCCESS, "操作成功",data);76 }77 /**

78 * 返回成功消息79 *@paramcontent 內容80 *@return成功消息81 */

82 public staticMessage success() {83 return new Message(Code.SUCCESS, "操作成功");84 }85 /**

86 * 返回失敗消息87 *@paramcontent 內容88 *@return成功消息89 */

90 public static Message error(intcode,String content, Object data) {91 return newMessage(code, content, data);92 }93 /**

94 * 返回失敗消息95 *@paramcontent 內容96 *@return成功消息97 */

98 public staticMessage error(String content, Object data) {99 return newMessage(Code.FAIL, content, data);100 }101

102 /**

103 * 返回失敗消息104 *@paramcontent 內容105 *@return成功消息106 */

107 public staticMessage error(String content) {108 return newMessage(Code.FAIL, content);109 }110 /**

111 * 返回失敗消息112 *@paramcontent 內容113 *@return成功消息114 */

115 public staticMessage error() {116 return new Message(Code.FAIL, "操作失敗");117 }118

119 }

code類代碼為：

1 packagecom.gede;2 /**

3 *@authorgede4 *@versiondate：2019年5月30日 下午3:10:345 * @description ：狀態碼6 */

7 public classCode {8 public static final int SUCCESS = 200; //成功

9 public static final int PARAMATER = 400; //參數錯誤

10 public static final int FAIL =500; //系統異常

11 }

到這里我們就開始寫前端界面，來響應我們的方法。

(三)頁面實現JS-SDk中config的注入配置，并實現對成功和失敗的處理

這里在web目錄下新建jssdkconfig.jsp，在jsp頁面用ajax方式獲取并進行配置，并開啟debug模式，打開之后就可以看到配置是否成功的提示，簡單代碼如下：

1

2 pageEncoding="UTF-8"%>

3

4

5

6

7

8

JSSDk配置

9

10

11

12 functionjssdk() {13 $.ajax({14 url :"http://zqfbk.iok.la/wechat/wechatconfig/jssdk",15 type :'post',16 dataType :'json',17 contentType :"http://zqfbk.iok.la/mychat/jssdk/config",18 data : {19 'url': location.href.split('#')[0]20 },21 success :function(data) {22 wx.config({23 debug :true,24 appId : data.data.appId,25 timestamp : data.data.timestamp,26 nonceStr : data.data.nonceStr,27 signature : data.data.signature,28 jsApiList : ['checkJsApi','onMenuShareTimeline',29 'onMenuShareAppMessage','onMenuShareQQ',30 'onMenuShareWeibo','hideMenuItems',31 'showMenuItems','hideAllNonBaseMenuItem',32 'showAllNonBaseMenuItem','translateVoice',33 'startRecord','stopRecord','onRecordEnd',34 'playVoice','pauseVoice','stopVoice',35 'uploadVoice','downloadVoice','chooseImage',36 'previewImage','uploadImage','downloadImage',37 'getNetworkType','openLocation','getLocation',38 'hideOptionMenu','showOptionMenu','closeWindow',39 'scanQRCode','chooseWXPay',40 'openProductSpecificView','addCard','chooseCard',41 'openCard']42 });43 }44 });45 }46

47 functionisWeiXin5() {48 varua=window.navigator.userAgent.toLowerCase();49 varreg= /MicroMessenger\/[5-9]/i;50 returnreg.test(ua);51 }52

53 window.οnlοad= function() {54 //if (isWeiXin5() == false) {

55 //alert("您的微信版本低于5.0，無法使用微信支付功能，請先升級！");

56 //}

57 jssdk();58 };59

60

61

62

nihao

63

64

(四)pc端進行測試

我的瀏覽器是火狐developer版的，其他的也都差不多，打開瀏覽器按F12，找到一個叫網絡的窗口，也有的瀏覽器叫network像我的就是network。

①運行項目后，打開瀏覽器輸入訪問地址http://zqfbk.iok.la/mychat/；點擊Jssdk這里需要設置一下超鏈接，因為懶得從視圖控制器返回了，超鏈接代碼：

Welcome to Mychat

">UserInfo

">Jssdk

②在我么點擊Jssdk的時候，先按f12 打開network視圖窗口。，然后再點擊，效果圖如下:

③如果你看到你的狀態碼中沒有404，那你多半成功了，我們找對對應的文件名為config的那一行點擊一下，進行查看，此時后臺也會做出成功提示，上圖：

如果提示是這樣，那么標識我們的配置是成功的，那么到這里微信jssdk的配置就基本完成了。

總結

以上是生活随笔為你收集整理的微信jssdk开发 java_Java微信公众平台开发(十一)--微信JSSDK中Config配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。