微信公衆號開發之如何使用JSSDK

微信開發交流羣：148540125
歡迎留言、轉發、打賞

系列文章參考地址 極速開發微信公衆號
項目源碼參考地址 點我點我--歡迎Start

查看公衆號是否有使用JSSDK的權限

服務號、訂閱號能夠經過登陸微信公衆平臺查看開發>接口權限

使用JSSDK主要包括
一、判斷當前客戶端版本是否支持指定JS接口、
二、分享接口（微信認證）
三、圖像接口
四、音頻接口
五、智能接口（識別語音並返回結果）
六、設備信息（獲取網絡狀態）
七、地理位置
八、界面操做
九、微信掃一掃
十、微信小店（服務號必須經過微信認證）
十一、微信卡券 （微信認證）
十二、微信支付（服務號必須經過微信認證）

使用JSSDK步驟

官方參考文檔

步驟一：綁定域名

先登陸微信公衆平臺進入公衆號設置的功能設置裏填寫JS接口安全域名。

步驟二：引入JS文件
在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備註：支持使用 AMD/CMD 標準模塊加載方法加載

步驟三：經過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

簽名算法生成規則

請 官方參考文檔

下面具體來說講 開源項目weixin_guide中的封裝。

使用的時候只要在Controller方法上添加一個攔截器 JSSDKInterceptor 來實現簽名驗證再將wx.config須要的參數設置對應的屬性在頁面上進行獲取。

攔截器實現以下：

public class JSSDKInterceptor   implements Interceptor{
  /**
   * 若是要支持多公衆帳號，只須要在此返回各個公衆號對應的 ApiConfig 對象便可 能夠經過在請求 url 中掛參數來動態從數據庫中獲取
   * ApiConfig 屬性值
   */
  public ApiConfig getApiConfig() {
    ApiConfig ac = new ApiConfig();

    // 配置微信 API 相關常量
    ac.setToken(PropKit.get("token"));
    ac.setAppId(PropKit.get("appId"));
    ac.setAppSecret(PropKit.get("appSecret"));

    /**
     * 是否對消息進行加密，對應於微信平臺的消息加解密方式： 1：true進行加密且必須配置 encodingAesKey
     * 2：false採用明文模式，同時也支持混合模式
     */
    ac.setEncryptMessage(PropKit.getBoolean("encryptMessage", false));
    ac.setEncodingAesKey(PropKit.get("encodingAesKey",
        "setting it in config file"));
    return ac;
  }
  
  @Override
  public void intercept(Invocation inv) {
    inv.invoke();
    Controller controller = inv.getController();
    ApiConfigKit.setThreadLocalApiConfig(getApiConfig());
    JsTicket jsApiTicket = JsTicketApi.getTicket(JsApiType.jsapi);
    String jsapi_ticket = jsApiTicket.getTicket();
    String nonce_str = create_nonce_str();
    // 注意 URL 必定要動態獲取，不能 hardcode.
    String url = "http://" + controller.getRequest().getServerName() // 服務器地址
        // + ":"
        // + getRequest().getServerPort() //端口號
        + controller.getRequest().getContextPath() // 項目名稱
        + controller.getRequest().getServletPath();// 請求頁面或其餘地址
    String qs = controller.getRequest().getQueryString(); // 參數
    if (qs != null) {
      url = url + "?" + (controller.getRequest().getQueryString());
    }
    System.out.println("url>>>>" + url);
    String timestamp = create_timestamp();
    // 這裏參數的順序要按照 key 值 ASCII 碼升序排序
    //注意這裏參數名必須所有小寫，且必須有序
    String  str = "jsapi_ticket=" + jsapi_ticket +
        "&noncestr=" + nonce_str +
        "&timestamp=" + timestamp +
        "&url=" + url;

    String signature = HashKit.sha1(str);

    System.out.println("appId " + ApiConfigKit.getApiConfig().getAppId()
        + "  nonceStr " + nonce_str + " timestamp " + timestamp);
    System.out.println("url " + url + " signature " + signature);
    System.out.println("nonceStr " + nonce_str + " timestamp " + timestamp);
    System.out.println(" jsapi_ticket " + jsapi_ticket);
    System.out.println("nonce_str  " + nonce_str);
    
    controller.setAttr("appId", ApiConfigKit.getApiConfig().getAppId());
    controller.setAttr("nonceStr", nonce_str);
    controller.setAttr("timestamp", timestamp);
    controller.setAttr("url", url);
    controller.setAttr("signature", signature);
    controller.setAttr("jsapi_ticket", jsapi_ticket);
  }

  private static String create_timestamp() {
    return Long.toString(System.currentTimeMillis() / 1000);
  }

  private static String create_nonce_str() {
    return UUID.randomUUID().toString();
  }
}

在Controller中使用

/**
 * 對整個Controller或者其中的方法添加JSSDK簽名驗證攔截器
 */
@Before(JSSDKInterceptor.class)
public class JSSDKController extends Controller{
  //@Before(JSSDKInterceptor.class)
  public void index(){
    render("share.jsp");
  }
  
  public void customer(){
    render("customer.jsp");
  }
  
  public void pic(){
    render("pic.jsp");
  }
}

JSP頁面上面使用

<script type="text/javascript">
 wx.config({
    debug: true,
      appId:'${appId}',
      timestamp: '${timestamp}',
      nonceStr: '${nonceStr }',
      signature: '${signature}',
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        ...
      ]
  });

  </script>

測試結果

在AppConfig 中添加路由me.add("/jssdk", JSSDKController.class,"/view");手機中訪問 http://域名[/項目名稱]/jssdk ,若是設置了 debug= true 成功了就會彈出

若是出現 {"errorMsg":"config:invalid url domian"} 請檢查步驟一：綁定域名 與你訪問的域名是否在安全域名列表當中

步驟四：經過ready接口處理成功驗證

config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。

wx.ready(function(){
    // 1 判斷當前版本是否支持指定 JS 接口，支持批量判斷
  document.querySelector('#checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
//下面就能夠寫一系列的接口了
......
});

步驟五：經過error接口處理失敗驗證

wx.error(function (res) {
  alert(res.errMsg);
});

步驟六：接口調用

攔截器具體實現 參考地址 點這裏
js 接口調用參考地址 點這裏

以上就是JSSDK使用的介紹。
歡迎留言、轉發、打賞項目

源碼參考地址 點我點我--歡迎Start