摘要：本篇文章就記錄我的做微信分享信息定制的過(guò)程和踩坑總結(jié)。但是，這就要求在每個(gè)組件中都加微信分享代碼，會(huì)導(dǎo)致維護(hù)困難。

在微信瀏覽器內(nèi)打開(kāi)任何網(wǎng)頁(yè)，若不配置分享接口，微信會(huì)默認(rèn)使用如下信息作為分享信息：

默認(rèn)標(biāo)題：HTML的title

默認(rèn)連接：當(dāng)前頁(yè)面的地址，即location.href

默認(rèn)圖片：會(huì)取當(dāng)前頁(yè)面body內(nèi)最前面的一張符合條件的圖片（尺寸必須大于300px × 300px）

默認(rèn)摘要：當(dāng)前頁(yè)面的地址，即location.href

即在微信里打開(kāi)一個(gè)不對(duì)微信瀏覽器做特殊處理的網(wǎng)站，點(diǎn)擊右上角分享，分享出去的消息就是下面這樣的：

在很多時(shí)候，默認(rèn)的分享的圖片和摘要都是達(dá)不到預(yù)期的。本篇文章就記錄我的做微信分享信息定制的過(guò)程和踩坑總結(jié)。

微信認(rèn)證過(guò)的公共號(hào)

一個(gè)備案過(guò)的域名

必要的后臺(tái)服務(wù)（用于獲取微信jssdk的初始化signature信息）

說(shuō)明：appId和signature都應(yīng)后臺(tái)得到，具體的寫(xiě)法可以參考官方文檔。
參考：https://mp.weixin.qq.com/wiki（微信網(wǎng)頁(yè)開(kāi)發(fā)->微信JS-SDK說(shuō)明文檔->附錄6-DEMO頁(yè)面和示例代碼）

步驟一：綁定域名

? 先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。

步驟二：引入JS文件

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

說(shuō)明：在angular2中，可直接在index.html頁(yè)面中引入，這樣每個(gè)頁(yè)面都會(huì)引入。

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

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用。

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

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

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

步驟五：使用angular2優(yōu)化

至此，分享功能大功告成。但是，這就要求在每個(gè)組件中都加微信分享代碼，會(huì)導(dǎo)致維護(hù)困難。

由于A(yíng)ngular2加載每個(gè)組件都被包在根組件里，因此可以只在根組件中配置公共的分享配置信息，即可給所有的頁(yè)面添加優(yōu)化的分享操作。配置思路如下：

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

在每次加載頁(yè)面時(shí)，為該頁(yè)面添加初始化分享；

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

基于以上思路，最終的實(shí)現(xiàn)代碼如下：

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

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

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

          //獲取頁(yè)面中配置的分享信息，如未配置則使用默認(rèn)信息
          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);    //說(shuō)明：根組件初始化完成，子組件的異步請(qǐng)求數(shù)據(jù)可能還未返回，因此在2秒后注冊(cè)分享。
      }
    });
  }
  
  //自動(dòng)獲取分享的縮略圖
  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"}

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

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

確定wx.config中nonceStr和timestamp的字母大小寫(xiě)是否正確【常見(jiàn)錯(cuò)誤】

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