摘要：本篇文章就記錄我的做微信分享信息定制的過程和踩坑總結。但是，這就要求在每個組件中都加微信分享代碼，會導致維護困難。

在微信瀏覽器內打開任何網頁，若不配置分享接口，微信會默認使用如下信息作為分享信息：

默認標題：HTML的title

默認連接：當前頁面的地址，即location.href

默認圖片：會取當前頁面body內最前面的一張符合條件的圖片（尺寸必須大于300px × 300px）

默認摘要：當前頁面的地址，即location.href

即在微信里打開一個不對微信瀏覽器做特殊處理的網站，點擊右上角分享，分享出去的消息就是下面這樣的：

在很多時候，默認的分享的圖片和摘要都是達不到預期的。本篇文章就記錄我的做微信分享信息定制的過程和踩坑總結。

微信認證過的公共號

一個備案過的域名

必要的后臺服務（用于獲取微信jssdk的初始化signature信息）

說明：appId和signature都應后臺得到，具體的寫法可以參考官方文檔。
參考：https://mp.weixin.qq.com/wiki（微信網頁開發->微信JS-SDK說明文檔->附錄6-DEMO頁面和示例代碼）

步驟一：綁定域名

? 先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

步驟二：引入JS文件

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

說明：在angular2中，可直接在index.html頁面中引入，這樣每個頁面都會引入。

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

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用。

wx.config({
? ? debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數
? ? appId: "", // 必填，公眾號的唯一標識
? ? timestamp: , // 必填，生成簽名的時間戳
? ? nonceStr: "", // 必填，生成簽名的隨機串
? ? signature: "",// 必填。注意，signature應由后臺返回
? ? jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ"] // 必填
});

步驟四：在ready接口中配置微信分享接口

 wx.ready(function () {
    wx.onMenuShareAppMessage({              //配置分享給朋友接口
        title: "分享的標題", // 分享標題
        desc: "這是一個測試分享", // 分享描述
        link: location.href, // 分享鏈接
        imgUrl: "", // 分享圖標
        type: "", // 分享類型,music、video或link，不填默認為link
        dataUrl: "", // 如果type是music或video，則要提供數據鏈接，默認為空
        success: function () { 
            // 用戶確認分享后執行的回調函數
        },
        cancel: function () { 
            // 用戶取消分享后執行的回調函數
        }
    })
 });

步驟五：使用angular2優化

至此，分享功能大功告成。但是，這就要求在每個組件中都加微信分享代碼，會導致維護困難。

由于Angular2加載每個組件都被包在根組件里，因此可以只在根組件中配置公共的分享配置信息，即可給所有的頁面添加優化的分享操作。配置思路如下：

在根組件里配置公共的初始化分享接口信息；

在每次加載頁面時，為該頁面添加初始化分享；

有一套默認的分享配置，且在頁面中使用id配置分享的信息，如頁面未配置分享信息，則使用默認配置；

基于以上思路，最終的實現代碼如下：

//*說明：AppComponent必須為根組件
export class AppComponent implements OnInit,AfterViewInit {

  ...
  
  ngAfterViewInit() {
    this.configWXShare();   //在根組件中配置分享
  }
  
  //配置分享
  private configWX() {
    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {       //綁定路由變化事件，每次新轉到一個頁面即
        let page = this;
        page.commonService.getWXJsInitConfig().then(obj => {
          page.commonService.configWXJs(obj, [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ"]);
        });

        setTimeout(function () {
          //默認的分享信息
          let shareData = {title: "分享的標題"
            , link: location.href
            , desc: "分享的描述"
            , imgUrl: page.getShareImgUrl()
          };

          //獲取頁面中配置的分享信息，如未配置則使用默認信息
          shareData["title"] = document.getElementById("shareTitle") ?document.getElementById("shareTitle").innerText : shareData.title;
          shareData["imgUrl"] = document.getElementById("shareImg") ? document.getElementById("shareImg").getAttribute("src") : shareData.imgUrl;
          shareData["desc"] = document.getElementById("shareDesc") ? document.getElementById("shareDesc").innerText : shareData.desc;

          wx.ready(function () {
            wx.onMenuShareAppMessage(shareData);  // 分享微信
            wx.onMenuShareTimeline(shareData);    // 分享到朋友圈
            wx.onMenuShareQQ(shareData);          // 分享到QQ
          });
        }, 2000);    //說明：根組件初始化完成，子組件的異步請求數據可能還未返回，因此在2秒后注冊分享。
      }
    });
  }
  
  //自動獲取分享的縮略圖
  private getDefaultShareImgUrl() {
    let shareImg = document.getElementById("shareImg");
    if (shareImg) {
      return shareImg.getAttribute("src");
    }

    let imgList = document.querySelectorAll("img");
    for (let i = 0; imgList[i]; i++) {
      var imgSrc = imgList[i].getAttribute("src");
      if (imgSrc.startsWith("http://") || imgSrc.startsWith("https://")) {
        return imgSrc
      }
    }
  }

至此，只在一處配置，可以靈活配置的分享完成了。

完成：最終的分享是這樣：

提示{"errMsg"："config:invalid signature"}

造成這個情況的可能性比較多。不過主要有以下三個原因：

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

確定wx.config中nonceStr和timestamp的字母大小寫是否正確【常見錯誤】

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