Java微信公眾平臺(tái)開發(fā)（13） 微信JSSDK中Config配置
前端開發(fā)工程師和關(guān)注前端開發(fā)的開發(fā)者們在2015年中肯定被騰訊的JSSDk引爆過，搞APP的、搞前端的甚至是是搞后端的都跑過來湊熱鬧，但是在我們的技術(shù)眼里它的實(shí)現(xiàn)原理和根本是不能夠被改變的，這篇文章就不對(duì)其js的實(shí)現(xiàn)做任何評(píng)價(jià)和解說了（因?yàn)槲乙膊皇呛芏?，哈哈），這里要說的是它的config配置實(shí)現(xiàn)，參考文檔：http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html ！
微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包，通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)；本篇將面向網(wǎng)頁開發(fā)者介紹微信JS-SDK如何使用及相關(guān)注意事項(xiàng)！JSSDK使用步驟：
步驟一：在微信公眾平臺(tái)綁定安全域名
步驟二：后端接口實(shí)現(xiàn)JS-SDK配置需要的參數(shù)
步驟三：頁面實(shí)現(xiàn)JS-SDk中config的注入配置，并實(shí)現(xiàn)對(duì)成功和失敗的處理
（一）在微信公眾平臺(tái)綁定安全域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”(如下圖)，如果需要使用支付類接口，需要確保支付目錄在支付的安全域名下，否則將無法完成支付?。ㄗⅲ旱卿浐罂稍?ldquo;開發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限）
（二）后端接口實(shí)現(xiàn)JS-SDK配置需要的參數(shù)
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});我們查看js-sdk的配置文檔和以上的代碼可以發(fā)現(xiàn)config的配置需要4個(gè)必不可少的參數(shù)appId、timestamp、nonceStr、signature，這里的signature就是我們生成的簽名！
生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號(hào)用于調(diào)用微信JS接口的臨時(shí)票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會(huì)導(dǎo)致api調(diào)用受限，影響自身業(yè)務(wù)，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket ,所以這里我們將jsapi_ticket的獲取放到定時(shí)任務(wù)中，因?yàn)樗蛅oken的生命周期是一致的，所以在這里我們將他們放到一起，將原有的定時(shí)任務(wù)中獲取token的代碼做如下修改：
package com.cuiyongzhi.wechat.common;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import net.sf.json.JSONObject;
import com.cuiyongzhi.web.util.GlobalConstants;
import com.cuiyongzhi.wechat.util.HttpUtils;
/**
* ClassName: WeChatTask
* @Description: 微信兩小時(shí)定時(shí)任務(wù)體
* @author dapengniao
* @date 2016年3月10日 下午1:42:29
*/
public class WeChatTask {
/**
* @Description: 任務(wù)執(zhí)行體
* @param @throws Exception
* @author dapengniao
* @date 2016年3月10日 下午2:04:37
*/
public void getToken_getTicket() throws Exception {
Map<String, String> params = new HashMap<String, String>();
//獲取token執(zhí)行體
params.put("grant_type", "client_credential");
params.put("appid", GlobalConstants.getInterfaceUrl("appid"));
params.put("secret", GlobalConstants.getInterfaceUrl("AppSecret"));
String jstoken = HttpUtils.sendGet(
GlobalConstants.getInterfaceUrl("tokenUrl"), params);
String access_token = JSONObject.fromObject(jstoken).getString(
"access_token"); // 獲取到token并賦值保存
GlobalConstants.interfaceUrlProperties.put("access_token", access_token);
//獲取jsticket的執(zhí)行體
params.clear();
params.put("access_token", access_token);
params.put("type", "jsapi");
String jsticket = HttpUtils.sendGet(
GlobalConstants.getInterfaceUrl("ticketUrl"), params);
String jsapi_ticket = JSONObject.fromObject(jsticket).getString(
"ticket");
GlobalConstants.interfaceUrlProperties
.put("jsapi_ticket", jsapi_ticket); // 獲取到j(luò)s-SDK的ticket并賦值保存
System.out.println("jsapi_ticket================================================" + jsapi_ticket);
System.out.println(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())+"token為=============================="+access_token);
}
}
然后我們根據(jù)【JS-SDK使用權(quán)限簽名算法】對(duì)參數(shù)進(jìn)行簽名得到signature，這里的url必須采用前端傳遞到后端，因?yàn)槊看蔚膗rl會(huì)有所變化，如下：
package com.cuiyongzhi.wechat.common;
import java.security.MessageDigest;
import java.util.Formatter;
import java.util.HashMap;
import java.util.UUID;
import com.cuiyongzhi.web.util.GlobalConstants;
/**
* ClassName: JSSDK_Config
* @Description: 用戶微信前端頁面的jssdk配置使用
* @author dapengniao
* @date 2016年3月19日 下午3:53:23
*/
public class JSSDK_Config {
/**
* @Description: 前端jssdk頁面配置需要用到的配置參數(shù)
* @param @return hashmap {appid,timestamp,nonceStr,signature}
* @param @throws Exception
* @author dapengniao
* @date 2016年3月19日 下午3:53:23
*/
public static HashMap<String, String> jsSDK_Sign(String url) throws Exception {
String nonce_str = create_nonce_str();
String timestamp=GlobalConstants.getInterfaceUrl("timestamp");
String jsapi_ticket=GlobalConstants.getInterfaceUrl("jsapi_ticket");
// 注意這里參數(shù)名必須全部小寫，且必須有序
String string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str
+ "×tamp=" + timestamp + "&url=" + url;
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
String signature = byteToHex(crypt.digest());
HashMap<String, String> jssdk=new HashMap<String, String>();
jssdk.put("appId", GlobalConstants.getInterfaceUrl("appid"));
jssdk.put("timestamp", timestamp);
jssdk.put("nonceStr", nonce_str);
jssdk.put("signature", signature);
return jssdk;
}
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();
}
}
然后我們將后端簽名的方法集成到Controller層，形成代碼如下：
package com.cuiyongzhi.wechat.controller;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.cuiyongzhi.Message;
import com.cuiyongzhi.wechat.common.JSSDK_Config;
/**
* ClassName: WeChatController
* @Description: 前端用戶微信配置獲取
* @author dapengniao
* @date 2016年3月19日 下午5:57:36
*/
@Controller
@RequestMapping("/wechatconfig")
public class WeChatController {
/**
* @Description: 前端獲取微信JSSDK的配置參數(shù)
* @param @param response
* @param @param request
* @param @param url
* @param @throws Exception
* @author dapengniao
* @date 2016年3月19日 下午5:57:52
*/
@RequestMapping("jssdk")
public Message JSSDK_config(
@RequestParam(value = "url", required = true) String url) {
try {
System.out.println(url);
Map<String, String> configMap = JSSDK_Config.jsSDK_Sign(url);
return Message.success(configMap);
} catch (Exception e) {
return Message.error();
}
}
}
到這里我們后端對(duì)jssdk的簽名參數(shù)的封裝就基本完成了，下一步就只需要我們前端調(diào)用就可以了！
（三）頁面實(shí)現(xiàn)JS-SDk中config的注入配置，并實(shí)現(xiàn)對(duì)成功和失敗的處理
在第二步中我們將后端接口代碼完成了，這里新建jssdkconfig.jsp，在jsp頁面用ajax方式獲取并進(jìn)行配置，并開啟debug模式，打開之后就可以看到配置是否成功的提示，簡單代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>JSSDk配置</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function jssdk() {
$.ajax({
url : "http://wechat.cuiyongzhi.com/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', 'onMenuShareTimeline',
'onMenuShareAppMessage', 'onMenuShareQQ',
'onMenuShareWeibo', 'hideMenuItems',
'showMenuItems', 'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem', 'translateVoice',
'startRecord', 'stopRecord', 'onRecordEnd',
'playVoice', 'pauseVoice', 'stopVoice',
'uploadVoice', 'downloadVoice', 'chooseImage',
'previewImage', 'uploadImage', 'downloadImage',
'getNetworkType', 'openLocation', 'getLocation',
'hideOptionMenu', 'showOptionMenu', 'closeWindow',
'scanQRCode', 'chooseWXPay',
'openProductSpecificView', 'addCard', 'chooseCard',
'openCard' ]
});
}
});
}
function isWeiXin5() {
var ua = window.navigator.userAgent.toLowerCase();
var reg = /MicroMessenger\/[5-9]/i;
return reg.test(ua);
}
window.onload = function() {
// if (isWeiXin5() == false) {
// alert("您的微信版本低于5.0，無法使用微信支付功能，請先升級(jí)！");
// }
jssdk();
};
</script>
</head>
<body>
</body>
</html>
最后我們運(yùn)行代碼，查看運(yùn)行結(jié)果：
如果提示是這樣，那么標(biāo)識(shí)我們的配置是成功的，那么到這里微信jssdk的配置就基本完成了，下一篇講述【微信web開發(fā)者工具】的使用，歡迎你的翻閱，如有疑問可以留言討論！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Springboot集成Ehcache3實(shí)現(xiàn)本地緩存的配置方法
EhCache是一個(gè)純Java的進(jìn)程內(nèi)緩存框架,是 Hibernate 中默認(rèn)的 CacheProvider,同Redis一樣,EhCache 不是純內(nèi)存緩存,它支持基于內(nèi)存和磁盤的二級(jí)緩存,本文介紹Springboot集成Ehcache3實(shí)現(xiàn)本地緩存的配置方法,感興趣的朋友一起看看吧2024-04-04
詳解Spring與Mybatis的整合方法（基于Eclipse的搭建）
這篇文章主要介紹了Spring與Mybatis的整合方法（基于Eclipse的搭建）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
解決springboot中自定義JavaBean返回的json對(duì)象屬性名稱大寫變小寫問題
開發(fā)過程中發(fā)現(xiàn)查詢返回的數(shù)據(jù)出現(xiàn)自定義的JavaBean的屬性值大小寫格式出現(xiàn)問題,導(dǎo)致前端無法接受到數(shù)據(jù),目前有四種解決方法,根據(jù)大佬的經(jīng)驗(yàn)之談,前兩種是最簡單便捷的,后兩種是比較通用的方法,需要的朋友可以參考下2023-10-10
關(guān)于重寫equals()方法和hashCode()方法及其簡單的應(yīng)用
這篇文章主要介紹了關(guān)于重寫equals()方法和hashCode()方法及其簡單的應(yīng)用,網(wǎng)上的知識(shí)有些可能是錯(cuò)誤的，關(guān)于?equals()?方法的理解，大家討論不一樣,需要的朋友可以參考下2023-04-04
Java instanceof關(guān)鍵字的的進(jìn)一步理解
這篇文章主要介紹了Java instanceof關(guān)鍵字的的進(jìn)一步理解,本文用一些實(shí)例講解了instanceof操作符的一些知識(shí),需要的朋友可以參考下2015-03-03
這篇文章主要介紹了淺談Java多線程編程中Boolean常量的同步問題,主要針對(duì)線程之間同步了不同的布爾對(duì)象的問題,需要的朋友可以參考下2015-10-10
學(xué)習(xí)Java之如何對(duì)時(shí)間進(jìn)行格式化
當(dāng)我們在默認(rèn)情況下構(gòu)造出來的時(shí)間對(duì)象，它的時(shí)間格式并不適合我們閱讀，并且在開發(fā)時(shí)，pc端、Android端、iOS端等展示的時(shí)間格式可能也并不完全一樣，本文就從這幾個(gè)問題給大家介紹如何對(duì)時(shí)間進(jìn)行格式化，感興趣的同學(xué)可以借鑒一下2023-05-05
idea與eclipse項(xiàng)目相互導(dǎo)入的過程(圖文教程)
這篇文章主要介紹了idea與eclipse項(xiàng)目相互導(dǎo)入的過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
MPAndroidChart開源圖表庫的使用介紹之餅狀圖、折線圖和柱狀圖
這篇文章主要介紹了MPAndroidChart開源圖表庫的使用介紹之餅狀圖、折線圖和柱狀圖的相關(guān)資料,需要的朋友可以參考下2016-02-02
SpringCloud Eureka自我保護(hù)機(jī)制原理解析
這篇文章主要介紹了SpringCloud Eureka自我保護(hù)機(jī)制原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02