微信 JSSDK wx.config 完整配置指南：參數獲取與簽名算法詳解

前言

在微信網頁開發中，wx.config 是調用 JSSDK 接口的前置條件。許多開發者在初次接入時，常對 timestamp、nonceStr、signature 三個參數的來源感到困惑。本文將系統梳理配置流程，並提供可直接落地的 Java 實現代碼。

核心參數說明

• timestamp：當前時間戳（秒級），需與後端生成簽名時使用的值完全一致。
• nonceStr：隨機字符串，長度建議 16 位以上，同樣需前後端一致。
• signature：簽名，通過 jsapi_ticket、nonceStr、timestamp、url 按字典序拼接後進行 SHA1 加密生成。

後端獲取 jsapi_ticket 流程

1. 用 appid 和 appsecret 請求 access_token。
2. 攜帶 access_token 請求 https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi 獲取 jsapi_ticket。
3. jsapi_ticket 有效期 7200 秒，建議全局緩存並定時刷新。

Java 關鍵代碼實現

1. 獲取 jsapi_ticket

public static String getJsapiTicket(String accessToken) {
    String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
    JSONObject json = CommonUtil.httpsRequest(url, "GET", null);
    return json != null ? json.getString("ticket") : "";
}

2. 生成簽名 signature

public static String getJsSDKSignature(String jsapiTicket, String nonceStr, String timestamp, String url) {
    String string1 = "jsapi_ticket=" + jsapiTicket
                   + "&noncestr=" + nonceStr
                   + "×tamp=" + timestamp
                   + "&url=" + url;
    try {
        MessageDigest md = MessageDigest.getInstance("SHA-1");
        byte[] digest = md.digest(string1.getBytes("UTF-8"));
        return byteToHex(digest);
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}

private static String byteToHex(byte[] bytes) {
    StringBuilder sb = new StringBuilder();
    for (byte b : bytes) {
        sb.append(String.format("%02x", b));
    }
    return sb.toString();
}

前端配置示例

wx.config({
    debug: true,
    appId: '${appId}',
    timestamp: ${timestamp},
    nonceStr: '${nonceStr}',
    signature: '${signature}',
    jsApiList: ['playVoice', 'pauseVoice', 'stopVoice', ...]
});

常見坑點提醒

• URL 必須動態獲取：簽名用的 url 必須是當前頁面完整 URL（不含 # 及其後部分），且不可重定向後的地址。
• 緩存策略：access_token 和 jsapi_ticket 必須服務端緩存，頻繁請求會觸發限流。
• 驗證工具：可使用微信官方 JSSDK 簽名校驗工具 快速排查。

總結

掌握 wx.config 的核心在於理解簽名生成的「四要素」與「字典序拼接規則」。後端負責安全獲取票據並計算簽名，前端負責動態渲染參數。建議將簽名邏輯封裝為通用工具類，並配合定時任務自動刷新票據，確保生產環境穩定運行。