前置動作（后端開發）

步驟一：綁定域名

js安全域名配置很重要，前端的服務的域名，非常重要！
1、先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
JS接口安全域名需要和示例格式一模一樣，不需要帶http/https
備注：登錄后可在“開發者中心”查看對應的接口權限。
2、需要開啟開發者密鑰，配置ip白名單（后端服務器ip，獲取access_token等白名單不攔截）。
注意：ip白名單每天都在變化，可以參考官方獲取ip方式
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_the_WeChat_server_IP_address.html

設置JS接口安全域名后，公眾號開發者可在該域名下調用微信開放的JS接口。

注意事項：

1、可填寫五個域名或路徑（例：wx.qq.com或wx.qq.com/mp），需使用由字母、數字、“-”或中文組成的合法域名，不支持IP地址、端口號及短鏈域名。

2、填寫的域名須通過ICP備案的驗證。

3、 將文件MP_verify_Pd7Rn8KfdBv1xmNh.txt（點擊下載）上傳至填寫域名或路徑指向的web服務器（或虛擬主機）的目錄（若填寫域名，將文件放置在域名根目錄下，例如wx.qq.com/MP_verify_Pd7Rn8KfdBv1xmNh.txt；若填寫路徑，將文件放置在路徑目錄下，例如wx.qq.com/mp/MP_verify_Pd7Rn8KfdBv1xmNh.txt），并確保可以訪問。

4、 一個自然月內最多可修改并保存五次，本月剩余保存次數：5

細節需要注意內容：
簡單理解就是，前端h5項目運行的服務器域名，注意是域名，不是IP！

有一個txt文件要放置在提供的域名目錄下，可以是根目錄，也可以指定目錄下面，配置好之后，直接瀏覽器地址欄訪問這個路徑，能打開就成功了，此處還有一個坑：

如果把這個txt文件放置在根目錄，你的h5訪問路徑就不能帶路徑，也就是放置在根路徑下面，http://xxx,xxx/index.html是沒有問題的，如果h5項目是http://xxx.xxx/mp/index.html，這是行不通；

同理，如果你把這個txt文件放置在某個文件下，如：http://xxx.xxx/mp，放在mp文件夾下，那你的h5也要放在這個路徑下面，http://xxx.xxx/mp/index.html；不然肯定有問題；

參考鏈接：
https://www.cnblogs.com/web-wjg/p/11346656.html
https://www.csdn.net/tags/OtDacgwsNDE0ODUtYmxvZwO0O0OO0O0O.html
https://www.mk2048.com/blog/blog_kijhh0j20hab.html

步驟二：引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

備注：支持使用 AMD/CMD 標準模塊加載方法加載

步驟三： 從后端獲取權限配置簽名

要從后端獲取如下內容：

{"traceID": "09a3cad4-f426-4167-a375-c0676b4709e","retCode": 200,"retMsg": "success","data": {"signature": "a42a05f53400e380a000ef3832740f804ab","appId": "wx6d67b63","jsapi_ticket": "O3SMpm8bG7kJnF36aXbe8-83NpQ5KpEh_hfAfmkSN73KjH2CcJdtqwyli__Tj7uujod5sK7L6T69JQ","url": "https://xxxxxx分享地址","nonceStr": "66e4a737-ca38-467d-a53f-6d5e4d24b0b1","timestamp": "1650878949"} } java簽名算法可以下載微信公眾平臺demo 獲取簽名算法中，需要開發者傳入 jsapi_ticket 和 url ，其中 jsapi_ticket 需要通過 http://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=ACCESS_TOKEN 接口獲取，url 為調用頁面的完整 url 注意： 1. jsapi_ticket 的有效期為 7200 秒，開發者必須全局緩存 jsapi_ticket ，防止超過調用頻率。

因為微信公眾平臺java的demo只實現了簽名算法，還需要自己去獲取jsapi_ticket
jsapi_ticket的獲取又需要依賴access_token故貼出實現代碼如下：
jspi_ticket應該失效前通過看門狗去獲取更新，讓它一直有效，這里是通過緩存方式，但并發很高時，可以發生緩存穿透，一瞬間耗光獲取access_token的次數（可能性極低）

/*** 常量appId**/private static String APP_ID = "wx673b63";/*** 常量appSecret 開發者密鑰**/private static String APP_SECRET = "89168a79f7884";/*** 常量redis緩存超時 單位秒 微信有效期2小時**/private static int TICKET_TIMEOUT = 30*60;/*** 微信 access_token 地址**/private static String ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token";/*** 微信 ticket 地址**/private static String TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";/*** 微信 jsApiTicket redis key**/private static String REDIS_TICKET = "jsApiTicket_";@Autowiredpublic RedisTemplate redisTemplate;/*** @Description 微信分享，獲取前端JS-SDK配置**/@Overridepublic ResponseResult getWeiXinConfig(String url){//wxInfo[0] appId//wxInfo[1] appsecretString[] wxInfo = new String[]{APP_ID,APP_SECRET};String jsapi_ticket = "";//獲取jsapi_ticketString ticketResString = getShareJsApiTicket(wxInfo);//解析ticketif (StringUtils.isNotEmpty(ticketResString)) {Integer code = (Integer) JSONPath.read(ticketResString, "$.errcode");if (code == 0) {jsapi_ticket = JSONObject.parseObject(ticketResString).get("ticket").toString();}}//返回為空，無法獲取ticketif (StringUtils.isEmpty(jsapi_ticket)) {throw new TikTokListServiceException(ResultEnum.WEIXIN_TICKET_ERROR);}// 注意 URL 一定要動態獲取，不能 hardcodeMap<String, String> ret = WeiXinSignUtil.sign(jsapi_ticket, url,wxInfo[0]);return ResultUtil.getResult(ResultEnum.SUCCESS, ret);}/*** @Description 微信分享，獲取JsapiTicket**/private String getShareJsApiTicket(String[] wxInfo) {String jsApiTicket = "";//jsapi_ticket 的有效期為 7200 秒，必須全局緩存 jsapi_ticket ，防止超過調用頻率。access_token 次數2000/*** 考慮并發情況* 1、并發后一個access_token獲取，在沒有獲取到ticket之前，前一個access_token 失效，ticket就無法獲取。* 考慮后解決方案：* 微信公眾平臺已解決：中控服務器需要根據這個有效時間提前去刷新新access_token。在刷新過程中，中控服務器可對外繼續輸出的老access_token，* 此時公眾平臺后臺會保證在5分鐘內，新老access_token都可用，這保證了第三方業務的平滑過渡** 2、以后多次出現200+請求同時進來的時候，緩存失效，去請求微信，200*n > 2000后，使用次數就被限制* 考慮后解決方案：（未實施）* a.使用看門狗線程在緩存要過期時，生成新的ticket，替換緩存，請求一直命中緩存* b.在緩存失效后加雙重檢查鎖，生成緩存前只允許一個線程操作對微信請求** 3、后續開發注意 微信運營描述：access_token可能大于2小時，也有可能小于兩小時***/try {jsApiTicket = (String) redisTemplate.opsForValue().get(REDIS_TICKET+wxInfo[0]);}catch (Exception e){e.printStackTrace();}if(StringUtils.isNotEmpty(jsApiTicket)){log.warn("ticket from redis jsApiTicket: " + jsApiTicket);return jsApiTicket;}//獲取accessTokenString accessToken = getWeiXinAccessToken(wxInfo);if (StringUtils.isEmpty(accessToken)) { // 獲取 accessToken 失敗return null;}//ticket請求String url = TICKET_URL+"?access_token="+ accessToken + "&type=jsapi";//獲取ticketjsApiTicket = httpReqExecute(url);log.warn("ticket from weixin api jsapiTicket is: " + jsApiTicket);if(StringUtils.isNotEmpty(jsApiTicket)) {// 向redis里寫內容，第二個參數為過期時間，單位為：秒redisTemplate.opsForValue().set(REDIS_TICKET+wxInfo[0],jsApiTicket,TICKET_TIMEOUT, TimeUnit.SECONDS);return jsApiTicket;}return null;}/*** @Description 微信分享，獲取access_token**/private String getWeiXinAccessToken(String[] wxInfo){String url = ACCESS_TOKEN_URL+"?grant_type=client_credential&appid="+ wxInfo[0] + "&secret=" + wxInfo[1];String result = this.httpReqExecute(url);log.warn("from weixin api accessToken: " + result);Integer code = null;try {code = (Integer) JSONPath.read(result, "$.errcode");} catch (RuntimeException e) {e.printStackTrace();}try {if(StringUtils.isNotEmpty(result)) {// 解析access_tokenString accessToken = JSONObject.parseObject(result).get("access_token").toString();return accessToken;}} catch (Exception e) {e.printStackTrace();}return null;}/*** @Description HTTP遠程調用**/private String httpReqExecute(String url) {String result = "";DefaultHttpClient httpclient = null ;try {httpclient = new DefaultHttpClient();HttpPost httppost = new HttpPost(url);// 執行HttpResponse response = httpclient.execute(httppost);HttpEntity entity = response.getEntity();if(entity != null && response.getStatusLine().getStatusCode() == 200){result = EntityUtils.toString(entity, "UTF-8");}} catch (Exception e) {log.error(" 微信分享 調用微信 API 失敗！", e);} finally { // 關閉連接，釋放資源httpclient.getConnectionManager().shutdown();}return result;}

步驟四：通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

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

分享接口
請注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即將廢棄。請盡快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0）

wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用wx.updateAppMessageShareData({ title: '', // 分享標題desc: '', // 分享描述link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致imgUrl: '', // 分享圖標success: function () {// 設置成功}}) });

自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容（1.4.0）

wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用wx.updateTimelineShareData({ title: '', // 分享標題link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致imgUrl: '', // 分享圖標success: function () {// 設置成功}}) });

常見2個錯誤及解決方法

invalid signature簽名錯誤。建議按如下順序檢查：

1、確認簽名算法正確，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。

2、確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。

3、確認url是頁面完整的url(請在當前頁面alert(location.href.split(‘#’)[0])確認)，包括’http(s)😕/‘部分，以及’？‘后面的GET參數部分,但不包括’#'hash后面的部分。

4、確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。

確保一定緩存access_token和jsapi_ticket。

5、確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當前頁面除去’#‘hash部分的鏈接（可用location.href.split(’#')[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗。

the permission value is offline verifying這個錯誤是因為config沒有正確執行，或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按如下順序檢查：

1、確認config正確通過。

2、如果是在頁面加載好時就調用了JSAPI，則必須寫在wx.ready的回調中。

3、確認config的jsApiList參數包含了這個JSAPI。

總結

以上是生活随笔為你收集整理的总结之通过微信公众平台实现h5微信客户端自定义分享标题、描述和图标（前后端实现）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。