微信內 H5 頁面自定義分享

2021 年 6 月 8 日
筆記
H5, Js/jQuery, 程式碼專區, 微信/小程式, 微信授權, 自定義分享

起源：

最近公司在做一個活動的h5頁面，在微信內打開時需要進行微信授權，然後後端會重定向到這個頁面並且攜帶了一些參數（openid等）。問題是點擊微信的原生分享時，會把攜帶的這些參數一起分享出去，等於把用戶資訊泄露了。所以為了解決這個問題，只能實現自定義微信分享的功能，可以自定義分享的地址、標題、圖標還有簡介。

事先需要做的：

1.微信公眾號：必須是經過微信認證的，沒有認證的或者認證過期的都不可以；

2.經過備案的域名：必須是備案過的，不然是無法使用的；

3.綁定域名：首先你需要將需要分享的網址的域名綁定到微信公眾平台上面，

具體操作：先登錄微信公眾平台進入「公眾號設置」的「功能設置」里填寫：JS介面安全域名；還要在”安全中心”中設置：IP白名單

後台需要做的：

1.後台伺服器：前台頁面需要後台伺服器傳過來一些配置參數，比如appId、timestamp、nonceStr、signature這幾個參數都是後台從微信公眾平台獲取到的，需要後台進行配合；

2.獲取access_token：利用公共號APPID、APPSECRET從微信伺服器獲取對應的access_token，這裡是後台開發小夥伴的範圍不多做解釋；

後台需要傳的參數格式：

簽名的生成步驟：

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用於調用微信JS介面的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由於獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局快取jsapi_ticket 。

1. 獲取access_token（有效期7200秒，2個小時開發者必須在自己的服務全局快取access_token）：access_token是公眾號的全局唯一介面調用憑據，公眾號調用各介面時都需使用access_token。開發者需要進行妥善保存。具體請參考以下官方文檔：

//link.zhihu.com/?target=https%3A//developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

公眾號和小程式均可以使用AppID和AppSecret調用本介面來獲取access_token。AppID和AppSecret可在「微信公眾平台-開發-基本配置」頁中獲得（需要已經成為開發者，且帳號沒有異常狀態）。調用介面時，請登錄「微信公眾平台-開發-基本配置」提前將伺服器IP地址添加到IP白名單中，點擊查看設置方法，否則將無法調用成功。小程式無需配置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個小時，開發者必須在自己的服務全局快取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許可權驗證的簽名

參與簽名的欄位包括noncestr（隨機字元串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分）。

首先：對所有待簽名參數按照欄位名的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

注意事項

簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
簽名用的url必須是調用JS介面頁面的完整URL。
出於安全考慮，開發者必須在伺服器端實現簽名的邏輯。

前端需要做的：

參考官方文檔：//developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3

1、在項目中引用微信的js-sdk

官方文檔上寫的是1.6.0

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

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

2、配置config

所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法調用。同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用。其中的簽名資訊signature需要伺服器端提供。timestamp和nonceStr是參與簽名生成的欄位，因此也可以由服務端一併提供，程式碼如下所示：

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數資訊會通過log打出，僅在pc端時才會列印。
    appId: '', 
    timestamp: , 
    nonceStr: '', 
    signature: '',
    jsApiList: [] 
});

參數說明:

appId：公眾號的唯一標識，在公眾號中可以取到；

timestamp：生成簽名的時間戳

nonceStr: 生成簽名的隨機串

signature: 最後生成的簽名

jsApiList: 需要使用的JS介面列表，我們這裡是用分享介面，將分享幾個api介面填進去，例如：[‘updateAppMessageShareData’, ‘updateTimelineShareData’, ‘onMenuShareQQ’]

3、通過ready介面處理成功驗證

wx.ready(function(){
  // config資訊驗證通過後會執行ready方法，
  // 所有介面調用都必須在config介面獲得結果之後，
  // config是一個客戶端的非同步操作，所以如果需要在頁面載入時就調用相關介面，
  // 則須把相關介面放在ready函數中調用來確保正確執行。
  // 對於用戶觸發時才調用的介面，則可以直接調用，不需要放在ready函數中。
});

4、通過error介面處理失敗驗證

wx.error(function(res){
  // config資訊驗證失敗會執行error函數，
  // 如簽名過期導致驗證失敗，具體錯誤資訊可以打開config的debug模式查看，
  // 也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。
});

所有介面通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個介面本身需要傳的參數之外，還有以下通用參數：

success：介面調用成功時執行的回調函數。
fail：介面調用失敗時執行的回調函數。
complete：介面調用完成時執行的回調函數，無論成功或失敗都會執行。
cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支援Menu中的相關介面。

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

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

調用成功時：”xxx:ok” ，其中xxx為調用的介面名

用戶取消時：”xxx:cancel”，其中xxx為調用的介面名

調用失敗時：其值為具體錯誤資訊

官方示例程式碼：

自定義「分享給微信朋友」及「分享到QQ好友」按鈕的分享內容（JSSDK 1.4.0以上版本支援）：

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

自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（JSSDK 1.4.0以上版本支援）：

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

獲取「分享給朋友」按鈕點擊狀態及自定義分享內容介面（即將廢棄）：

wx.onMenuShareAppMessage({
  title: '', // 分享標題
  desc: '', // 分享描述
  link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
  imgUrl: '', // 分享圖標
  type: '', // 分享類型,music、video或link，不填默認為link
  dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
  success: function () {
    // 用戶點擊了分享後執行的回調函數
  }
});

獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容介面（即將廢棄）：

wx.onMenuShareTimeline({
  title: '', // 分享標題
  link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
  imgUrl: '', // 分享圖標
  success: function () {
  // 用戶點擊了分享後執行的回調函數
  }
},

獲取「分享到QQ」按鈕點擊狀態及自定義分享內容介面（即將廢棄）：

wx.onMenuShareQQ({
  title: '', // 分享標題
  desc: '', // 分享描述
  link: '', // 分享鏈接
  imgUrl: '', // 分享圖標
  success: function () {
  // 用戶確認分享後執行的回調函數
  },
  cancel: function () {
  // 用戶取消分享後執行的回調函數
  }
});

注意：

如果用舊版的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ 介面，請用1.4.0或者1.0.0的SDK。

我們用新介面的時候一直提示沒有許可權，用原介面的時候提示簽名錯誤，後來換了1.0.0的SDK，後台又重新檢查了下簽名，並把 jsapi_ticket 快取去掉。主要就是要一步步去測試，然後就神奇的好了。

完整的自定義分享程式碼：

getWXShare() {
          axios.get('***/***/getShareTicket', MD5({
            url: location.href
          }), function (data) {
            if (data.code === 200) {
              wx.config({
                // debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數資訊會通過log打出，僅在pc端時才會列印。
                appId: data.data.appId, //後台 必填，公眾號的唯一標識
                timestamp: data.data.timestamp, // 必填，後台生成簽名的時間戳
                nonceStr: data.data.nonceStr, // 必填，後台生成簽名的隨機串
                signature: data.data.signature,// 必填，後台簽名
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage','onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
              });

              wx.ready(function () {
                //分享到朋友圈(舊)
                wx.onMenuShareTimeline({
                  title: '要分享的標題', // 分享標題
                  desc: '要分享的簡介',
                  link: "要分享的地址", // 分享鏈接，
                  imgUrl: '要分享圖標', // 分享圖標
                  success: function () {
                    // 用戶點擊了分享後執行的回調函數
                    // console.log("分享成功");
                  },
                  cancel: function () {
                    // 用戶取消分享後執行的回調函數
                    // console.log("分享取消");
                  }
                });
                // 朋友(舊)
                wx.onMenuShareAppMessage({
                  title: '要分享的標題', // 分享標題
                  desc: '要分享的簡介',
                  link: "要分享的地址", // 分享鏈接，
                  imgUrl: '要分享圖標', // 分享圖標
                  success: function () {
                    // 用戶點擊了分享後執行的回調函數
                    // console.log("分享成功2");
                  },
                  cancel: function () {
                    // 用戶取消分享後執行的回調函數
                    // console.log("分享取消2");
                  }
                });
              });
              //必須放wx.ready後面 否則無法執行
              wx.error(function(res){
                //config資訊驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤資訊可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。
              });
            } else {
              alert('請稍後後再試')
            }
          })
},

總結

到這一步分享的操作基本就完成了，建議在測試時將debug打開，看看分享提示，從而判定是否分享成功。如果不成功，可以參考一下在開發時候遇到的坑。

出現nvalid url domain提示
1）檢查當前頁面所在域名與使用的appid沒有綁定，請確認正確填寫綁定的域名，僅支援80（http）和443（https）兩個埠，因此不需要填寫埠號。
出現invalid signature簽名錯誤提示
1）檢查生成signature是否正確，可以通過簽名校驗工具來判定後端傳過來的nonceStr、timestamp與請求後端介面傳的地址，與最後簽名是否一致。
2) config時，nonceStr 記得駝峰寫法。
3) 簽名用的url必須是調用JS介面頁面的完整URL，即當前頁面的完整URL。
提示是成功的，但是分享出來圖標不見或者desc不顯示的情況
1) 分享的地址不要帶埠號。
2）分享desc 不要帶有敏感辭彙。

Tags: H5 Js/jQuery 程式碼專區微信/小程式微信授權自定義分享