前置動(dòng)作（后端開(kāi)發(fā)）

步驟一：綁定域名

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

設(shè)置JS接口安全域名后，公眾號(hào)開(kāi)發(fā)者可在該域名下調(diào)用微信開(kāi)放的JS接口。

注意事項(xiàng)：

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

2、填寫(xiě)的域名須通過(guò)ICP備案的驗(yàn)證。

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

4、 一個(gè)自然月內(nèi)最多可修改并保存五次，本月剩余保存次數(shù)：5

細(xì)節(jié)需要注意內(nèi)容：
簡(jiǎn)單理解就是，前端h5項(xiàng)目運(yùn)行的服務(wù)器域名，注意是域名，不是IP！

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

如果把這個(gè)txt文件放置在根目錄，你的h5訪問(wèn)路徑就不能帶路徑，也就是放置在根路徑下面，http://xxx,xxx/index.html是沒(méi)有問(wèn)題的，如果h5項(xiàng)目是http://xxx.xxx/mp/index.html，這是行不通；

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

參考鏈接：
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文件

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

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)，可改訪問(wèn)：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載

步驟三： 從后端獲取權(quán)限配置簽名

要從后端獲取如下內(nèi)容：

{"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簽名算法可以下載微信公眾平臺(tái)demo 獲取簽名算法中，需要開(kāi)發(fā)者傳入 jsapi_ticket 和 url ，其中 jsapi_ticket 需要通過(guò) http://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=ACCESS_TOKEN 接口獲取，url 為調(diào)用頁(yè)面的完整 url 注意： 1. jsapi_ticket 的有效期為 7200 秒，開(kāi)發(fā)者必須全局緩存 jsapi_ticket ，防止超過(guò)調(diào)用頻率。

因?yàn)槲⑿殴娖脚_(tái)java的demo只實(shí)現(xiàn)了簽名算法，還需要自己去獲取jsapi_ticket
jsapi_ticket的獲取又需要依賴access_token故貼出實(shí)現(xiàn)代碼如下：
jspi_ticket應(yīng)該失效前通過(guò)看門(mén)狗去獲取更新，讓它一直有效，這里是通過(guò)緩存方式，但并發(fā)很高時(shí)，可以發(fā)生緩存穿透，一瞬間耗光獲取access_token的次數(shù)（可能性極低）

/*** 常量appId**/private static String APP_ID = "wx673b63";/*** 常量appSecret 開(kāi)發(fā)者密鑰**/private static String APP_SECRET = "89168a79f7884";/*** 常量redis緩存超時(shí) 單位秒 微信有效期2小時(shí)**/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();}}//返回為空，無(wú)法獲取ticketif (StringUtils.isEmpty(jsapi_ticket)) {throw new TikTokListServiceException(ResultEnum.WEIXIN_TICKET_ERROR);}// 注意 URL 一定要?jiǎng)討B(tài)獲取，不能 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 ，防止超過(guò)調(diào)用頻率。access_token 次數(shù)2000/*** 考慮并發(fā)情況* 1、并發(fā)后一個(gè)access_token獲取，在沒(méi)有獲取到ticket之前，前一個(gè)access_token 失效，ticket就無(wú)法獲取。* 考慮后解決方案：* 微信公眾平臺(tái)已解決：中控服務(wù)器需要根據(jù)這個(gè)有效時(shí)間提前去刷新新access_token。在刷新過(guò)程中，中控服務(wù)器可對(duì)外繼續(xù)輸出的老access_token，* 此時(shí)公眾平臺(tái)后臺(tái)會(huì)保證在5分鐘內(nèi)，新老access_token都可用，這保證了第三方業(yè)務(wù)的平滑過(guò)渡** 2、以后多次出現(xiàn)200+請(qǐng)求同時(shí)進(jìn)來(lái)的時(shí)候，緩存失效，去請(qǐng)求微信，200*n > 2000后，使用次數(shù)就被限制* 考慮后解決方案：（未實(shí)施）* a.使用看門(mén)狗線程在緩存要過(guò)期時(shí)，生成新的ticket，替換緩存，請(qǐng)求一直命中緩存* b.在緩存失效后加雙重檢查鎖，生成緩存前只允許一個(gè)線程操作對(duì)微信請(qǐng)求** 3、后續(xù)開(kāi)發(fā)注意 微信運(yùn)營(yíng)描述：access_token可能大于2小時(shí)，也有可能小于兩小時(shí)***/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請(qǐng)求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里寫(xiě)內(nèi)容，第二個(gè)參數(shù)為過(guò)期時(shí)間，單位為：秒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遠(yuǎn)程調(diào)用**/private String httpReqExecute(String url) {String result = "";DefaultHttpClient httpclient = null ;try {httpclient = new DefaultHttpClient();HttpPost httppost = new HttpPost(url);// 執(zhí)行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(" 微信分享 調(diào)用微信 API 失敗！", e);} finally { // 關(guān)閉連接，釋放資源httpclient.getConnectionManager().shutdown();}return result;}

步驟四：通過(guò)config接口注入權(quán)限驗(yàn)證配置

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）。

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

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

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

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

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

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

常見(jiàn)2個(gè)錯(cuò)誤及解決方法

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

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

2、確認(rèn)config中nonceStr（js中駝峰標(biāo)準(zhǔn)大寫(xiě)S）, timestamp與用以簽名中的對(duì)應(yīng)noncestr, timestamp一致。

3、確認(rèn)url是頁(yè)面完整的url(請(qǐng)?jiān)诋?dāng)前頁(yè)面alert(location.href.split(‘#’)[0])確認(rèn))，包括’http(s)😕/‘部分，以及’？‘后面的GET參數(shù)部分,但不包括’#'hash后面的部分。

4、確認(rèn) config 中的 appid 與用來(lái)獲取 jsapi_ticket 的 appid 一致。

確保一定緩存access_token和jsapi_ticket。

5、確保你獲取用來(lái)簽名的url是動(dòng)態(tài)獲取的，動(dòng)態(tài)頁(yè)面可參見(jiàn)實(shí)例代碼中php的實(shí)現(xiàn)方式。如果是html的靜態(tài)頁(yè)面在前端通過(guò)ajax將url傳到后臺(tái)簽名，前端需要用js獲取當(dāng)前頁(yè)面除去’#‘hash部分的鏈接（可用location.href.split(’#')[0]獲取,而且需要encodeURIComponent），因?yàn)轫?yè)面一旦分享，微信客戶端會(huì)在你的鏈接末尾加入其它參數(shù)，如果不是動(dòng)態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁(yè)面簽名失敗。

the permission value is offline verifying這個(gè)錯(cuò)誤是因?yàn)閏onfig沒(méi)有正確執(zhí)行，或者是調(diào)用的JSAPI沒(méi)有傳入config的jsApiList參數(shù)中。建議按如下順序檢查：

1、確認(rèn)config正確通過(guò)。

2、如果是在頁(yè)面加載好時(shí)就調(diào)用了JSAPI，則必須寫(xiě)在wx.ready的回調(diào)中。

3、確認(rèn)config的jsApiList參數(shù)包含了這個(gè)JSAPI。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。