Java微信公眾平臺開發(fā)（13）微信JSSDK中Config配置

更新時間：2017年04月26日 11:34:14 作者：dapengniao

這篇文章主要為大家詳細介紹了Java微信公眾平臺開發(fā)第十三步，微信JSSDK中Config配置，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前端開發(fā)工程師和關(guān)注前端開發(fā)的開發(fā)者們在2015年中肯定被騰訊的JSSDk引爆過，搞APP的、搞前端的甚至是是搞后端的都跑過來湊熱鬧，但是在我們的技術(shù)眼里它的實現(xiàn)原理和根本是不能夠被改變的，這篇文章就不對其js的實現(xiàn)做任何評價和解說了（因為我也不是很懂，哈哈），這里要說的是它的config配置實現(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ā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗；本篇將面向網(wǎng)頁開發(fā)者介紹微信JS-SDK如何使用及相關(guān)注意事項！JSSDK使用步驟：

步驟一：在微信公眾平臺綁定安全域名
步驟二：后端接口實現(xiàn)JS-SDK配置需要的參數(shù)
步驟三：頁面實現(xiàn)JS-SDk中config的注入配置，并實現(xiàn)對成功和失敗的處理

（一）在微信公眾平臺綁定安全域名

先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”(如下圖)，如果需要使用支付類接口，需要確保支付目錄在支付的安全域名下，否則將無法完成支付?。ㄗⅲ旱卿浐罂稍?ldquo;開發(fā)者中心”查看對應的接口權(quán)限）

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

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

我們查看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會導致api調(diào)用受限，影響自身業(yè)務，開發(fā)者必須在自己的服務全局緩存jsapi_ticket ,所以這里我們將jsapi_ticket的獲取放到定時任務中，因為它和token的生命周期是一致的，所以在這里我們將他們放到一起，將原有的定時任務中獲取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: 微信兩小時定時任務體
 * @author dapengniao
 * @date 2016年3月10日 下午1:42:29
 */
public class WeChatTask {
  /**
   * @Description: 任務執(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); // 獲取到js-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)限簽名算法】對參數(shù)進行簽名得到signature，這里的url必須采用前端傳遞到后端，因為每次的url會有所變化，如下：

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
        + "&timestamp=" + 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();
    }
 
  }
 
}

到這里我們后端對jssdk的簽名參數(shù)的封裝就基本完成了，下一步就只需要我們前端調(diào)用就可以了！

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

在第二步中我們將后端接口代碼完成了，這里新建jssdkconfig.jsp，在jsp頁面用ajax方式獲取并進行配置，并開啟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，無法使用微信支付功能，請先升級！");
    //     }
    jssdk();
  };
</script>
</head>
<body>
</body>
</html>

最后我們運行代碼，查看運行結(jié)果：