當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

微信jssdk开发 java_Java微信公众平台开发(十一)--微信JSSDK中Config配置

發(fā)布時間：2023/12/20 javascript 44 豆豆

生活随笔收集整理的這篇文章主要介紹了微信jssdk开发 java_Java微信公众平台开发(十一)--微信JSSDK中Config配置小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

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

步驟二：后端接口實(shí)現(xiàn)JS-SDK配置需要的參數(shù)

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

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

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

(二)后端接口實(shí)現(xiàn)JS-SDK配置需要的參數(shù)

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

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

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

①將原有的定時任務(wù)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: 任務(wù)執(zhí)行體19 *@param @throwsException20 */

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

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的執(zhí)行體

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); //獲取到j(luò)s-SDK的ticket并賦值保存

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 }

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

②所以我們自定義一個權(quán)限簽名算法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頁面配置需要用到的配置參數(shù)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 //注意這里參數(shù)名必須全部小寫，且必須有序

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

11 /**

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

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

20 * @Description: 前端獲取微信JSSDK的配置參數(shù)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的簽名參數(shù)的封裝就基本完成了，其中用到了我們自己寫的Message類，代碼如下：

1 packagecom.gede;2

3 importcom.gede.Code;4

5 /**

6 *@authorgede7 *@versiondate：2019年5月30日下午3:09:358 * @description ：用于消息回復(fù)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 內(nèi)容55 *@return成功消息56 */

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

61 * 返回成功消息62 *@paramcontent 內(nèi)容63 *@return成功消息64 */

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

69 * 返回成功消息70 *@paramcontent 內(nèi)容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 內(nèi)容80 *@return成功消息81 */

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

86 * 返回失敗消息87 *@paramcontent 內(nèi)容88 *@return成功消息89 */

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

94 * 返回失敗消息95 *@paramcontent 內(nèi)容96 *@return成功消息97 */

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

102 /**

103 * 返回失敗消息104 *@paramcontent 內(nèi)容105 *@return成功消息106 */

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

111 * 返回失敗消息112 *@paramcontent 內(nèi)容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 ：狀態(tài)碼6 */

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

9 public static final int PARAMATER = 400; //參數(shù)錯誤

10 public static final int FAIL =500; //系統(tǒng)異常

11 }

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

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

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

2 pageEncoding="UTF-8"%>

JSSDk配置

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

nihao

(四)pc端進(jìn)行測試

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

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

Welcome to Mychat

">UserInfo

">Jssdk

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

③如果你看到你的狀態(tài)碼中沒有404，那你多半成功了，我們找對對應(yīng)的文件名為config的那一行點(diǎn)擊一下，進(jìn)行查看，此時后臺也會做出成功提示，上圖：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： shell脚本执行方式，更方便更快捷。
下一篇：格雷码的FPGA实现