在微信浏览器内翻开任何网页，若不设置分享接口，微信会默许运用以下信息作为分享信息：

• 默许题目：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加载每一个组件都被包在根组件里，因而能够只在根组件中设置大众的分享设置信息，即可给一切的页面增加优化的分享操纵。设置思绪以下：

1. 在根组件里设置大众的初始化分享接口信息；
2. 在每次加载页面时，为该页面增加初始化分享；
3. 有一套默许的分享设置，且在页面中运用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"}

形成这个状况的能够性比较多。不过主要有以下三个缘由：

1. 确认署名算法准确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面东西举行校验。
2. 肯定wx.config中nonceStr和timestamp的字母大小写是不是准确【罕见毛病】
3. 确认config 中的 appid 与用来猎取 jsapi_ticket 的 appid 一致