angular2 + JSSDK的微信分享定製總結

時間 2019-12-06

標籤 angular2 angular jssdk 微信分享定製總結欄目 AngularJS 简体版

原文原文鏈接

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

默認標題：HTML的title
默認鏈接：當前頁面的地址，即location.href
默認圖片：會取當前頁面body內最前面的一張符合條件的圖片（尺寸必須大於300px × 300px）
默認摘要：當前頁面的地址，即location.href

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

在不少時候，默認的分享的圖片和摘要都是達不到預期的。本篇文章就記錄個人作微信分享信息定製的過程和踩坑總結。java

一.必要的準備

微信認證過的公共號
一個備案過的域名
必要的後臺服務（用於獲取微信jssdk的初始化signature信息）

說明：appId和signature都應後臺獲得，具體的寫法能夠參考官方文檔。算法

參考：https://mp.weixin.qq.com/wiki（微信網頁開發->微信JS-SDK說明文檔->附錄6-DEMO頁面和示例代碼）api

二.配置過程

步驟一：綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。瀏覽器

步驟二：引入JS文件

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

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

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

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用。angular2

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優化

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

因爲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
      }
    }
  }

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

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