微信開發交流群：148540125
歡迎留言、轉發

檢視公眾號是否有使用JSSDK的許可權

服務號、訂閱號可以通過登入微信公眾平臺檢視開發>介面許可權

使用JSSDK主要包括
1、判斷當前客戶端版本是否支援指定JS介面、
2、分享介面（微信認證）
3、影象介面
4、音訊介面
5、智慧介面（識別語音並返回結果）
6、裝置資訊（獲取網路狀態）
7、地理位置
8、介面操作
9、微信掃一掃
10、微信小店（服務號必須通過微信認證）
11、微信卡券 （微信認證）
12、微信支付（服務號必須通過微信認證）

使用JSSDK步驟

步驟一：繫結域名

先登入微信公眾平臺進入公眾號設定

步驟三：通過config介面注入許可權驗證配置

wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
 

});

簽名演算法生成規則

使用的時候只要在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使用的介紹。
歡迎留言、轉發