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",
            "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 一致