angular2 + JSSDK的微信分享定制总结

在微信浏览器内打开任何网页，若不配置分享接口，微信会默认使用如下信息作为分享信息：

默认标题：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','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 一致