微信內(nèi)H5頁面自定義分享

時間：2023-05-14 10:03:01 | 來源：網(wǎng)站運營

時間：2023-05-14 10:03:01 來源：網(wǎng)站運營

微信內(nèi)H5頁面自定義分享：微信內(nèi)的H5頁面默認是可以分享到微信好友、微信朋友圈、QQ好友、QQ空間的，但是如果想對分享的標題和圖標實現(xiàn)自定義，就需要做開發(fā)。

微信JS-SDK是微信公眾平臺 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。

JSSDK使用步驟：

步驟一：綁定域名

先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。JS-SDK的所有接口在調(diào)用之前要設(shè)置簽名，簽名的生成需要頁面的url，調(diào)用JS-SDK接口的頁面需要跟配置的“JS接口安全域名”一致才可以。如下圖所示：

步驟二：引入JS文件

在需要調(diào)用JS接口的頁面引入如下JS文件，http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。支持使用 AMD/CMD 標準模塊加載方法加載。

步驟三：通過config接口注入權(quán)限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用。同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用。其中的簽名信息signature需要服務(wù)器端提供。timestamp和nonceStr是參與簽名生成的字段，因此也可以由服務(wù)端一并提供，代碼如下所示：

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

wx.ready(function(){ // config信息驗證通過后會執(zhí)行ready方法， // 所有接口調(diào)用都必須在config接口獲得結(jié)果之后， // config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口， // 則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。 // 對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。});步驟五：通過error接口處理失敗驗證

wx.error(function(res){ // config信息驗證失敗會執(zhí)行error函數(shù)， // 如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看， // 也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。});所有接口通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個對象，除了每個接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：

1. success：接口調(diào)用成功時執(zhí)行的回調(diào)函數(shù)。
2. fail：接口調(diào)用失敗時執(zhí)行的回調(diào)函數(shù)。
3. complete：接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
4. cancel：用戶點擊取消時的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會用到。
5. trigger: 監(jiān)聽Menu中的按鈕點擊時觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。

備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。

以上幾個函數(shù)都帶有一個參數(shù)，類型為對象，其中除了每個接口本身返回的數(shù)據(jù)之外，還有一個通用屬性errMsg，其值格式如下：

調(diào)用成功時："xxx:ok" ，其中xxx為調(diào)用的接口名

用戶取消時："xxx:cancel"，其中xxx為調(diào)用的接口名

調(diào)用失敗時：其值為具體錯誤信息

自定義“分享給微信朋友”及“分享到QQ好友”按鈕的分享內(nèi)容，示例代碼如下所示：

wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調(diào)用 wx.updateAppMessageShareData({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: '', // 分享圖標 success: function () { // 設(shè)置成功 } })});自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容，示例代碼如下所示：

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

簽名的生成步驟：

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會導(dǎo)致api調(diào)用受限，影響自身業(yè)務(wù)，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket 。

1.獲取access_token（有效期7200秒，2個小時開發(fā)者必須在自己的服務(wù)全局緩存access_token）：access_token是公眾號的全局唯一接口調(diào)用憑據(jù)，公眾號調(diào)用各接口時都需使用access_token。開發(fā)者需要進行妥善保存。具體請參考以下官方文檔：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

公眾號和小程序均可以使用AppID和AppSecret調(diào)用本接口來獲取access_token。AppID和AppSecret可在“微信公眾平臺-開發(fā)-基本配置”頁中獲得（需要已經(jīng)成為開發(fā)者，且?guī)ぬ枦]有異常狀態(tài)）。調(diào)用接口時，請登錄“微信公眾平臺-開發(fā)-基本配置”提前將服務(wù)器IP地址添加到IP白名單中，點擊查看設(shè)置方法，否則將無法調(diào)用成功。小程序無需配置IP白名單。示例代碼如下所示：

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET返回的JSON如下:

{"access_token":"ACCESS_TOKEN","expires_in":7200}2. 用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket（有效期7200秒，2個小時，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket）

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi成功返回如下JSON：

{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200}3.生成JS-SDK權(quán)限驗證的簽名

參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網(wǎng)頁的URL，不包含#及其后面部分） 。

首先：對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

順序依次為：jsapi_ticket，noncestr，timestamp，url。

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value然后：對string1進行sha1簽名，得到signature。

signature=sha1(string1) // 0f9de62fce790f9a083d5c99e95740ceb90c27ed注意事項

1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2. 簽名用的url必須是調(diào)用JS接口頁面的完整URL。
3. 出于安全考慮，開發(fā)者必須在服務(wù)器端實現(xiàn)簽名的邏輯。