h5微信自定義分享

爲了h5頁面在微信分享效果更好，咱們接入了 h5 微信sdk，下面對接入流程總結。

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

js-sdk地址（支持https）：http://res.wx.qq.com/open/js/... 或者 http://res2.wx.qq.com/open/js...

二、在微信公衆平臺綁定安全域名

三、配置config

在1,2步操做成功後，進入咱們寫代碼正題，咱們須要在入口js中配置config

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', 
    timestamp: , 
    nonceStr: '', 
    signature: '',
    jsApiList: [] 
});

參數說明:

• appId：公衆號的惟一標識，在公衆號中能夠取到；
• timestamp：生成簽名的時間戳
• nonceStr: 生成簽名的隨機串
• signature: 最後生成的簽名
• jsApiList: 須要使用的JS接口列表，咱們這裏是用分享接口，將分享幾個api接口填進去，例如：['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareQQ']

(備註：出於安全考慮，微信要求開發者必須在服務器端實現簽名的邏輯，故timestamp, nonceStr，signature 能夠經過請求本身服務器返回。若是有興趣瞭解是如何生成的，以下圖1所示。)

圖1

四、wx.ready中配置自定義分享信息

config 配置玩成功後，能夠在wx.ready回調填寫自定義的信息，以下：

wx.ready(function () {
      wx.onMenuShareQQ({ //分享QQ
        title: data.wxTitle, // 分享標題
        link: data.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致且分享的地址不要帶端口
        desc: data.wxDesc,
        imgUrl: data.wxImg || defaultIcon, // 分享圖標
        success: function () {
          // 用戶確認分享後執行的回調函數
          // alert(e);
        },
        cancel: function () {
          // 用戶取消分享後執行的回調函數
        }
      });

      wx.updateAppMessageShareData({ // 分享好友
        title: data.wxTitle, // 分享標題
        link: data.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致且分享的地址不要帶端口
        desc: data.wxDesc,
        imgUrl: data.wxImg || defaultIcon, // 分享圖標
        type: "", // 分享類型,music、video或link，不填默認爲link
        dataUrl: "", // 若是type是music或video，則要提供數據連接，默認爲空
        success: function (e) {
          // 用戶點擊了分享後執行的回調函數
          // alert(e);
        }
      });

      wx.onMenuShareTimeline({ // 分享朋友圈
        title: data.wxTitle, // 分享標題
        link: data.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致且分享的地址不要帶端口
        desc: data.wxDesc,
        imgUrl: data.wxImg || defaultIcon, // 分享圖標
        success: function (e) {
          // 用戶點擊了分享後執行的回調函數
          // alert(e)
        }
      });
    });

總結

到這一步分享的操做基本就完成了，建議在測試時將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) 分享的地址不要帶端口號哦，咱們以前帶了3000端口，形成出現了這種狀況。
  2）分享desc 不要帶有敏感詞彙，咱們帶禮包之類的詞彙，居然被也出現這種狀況...

以上是對本次微信分享的總結，若是須要更詳細的瞭解內容，能夠從微信官網文檔更深刻的瞭解。

參考資料：微信官網文檔點擊查看