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

qylost 发布于2019-08-20 14:51 / 3352人阅读

摘要：本篇文章就记录我的做微信分享信息定制的过程和踩坑总结。但是，这就要求在每个组件中都加微信分享代码，会导致维护困难。

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

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

混合云服务器托管微信分享的jssdk 分享java视频的微信公众号微信jssdk jssdk微信图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81978.html

微信公众平台JSSDK分享接口开发（PHP实现）

摘要：最近做个移动端的应用，要实现自定义微信分享功能，实现过程中遇到一些小小的坑，这里分享一下。后来微信放出了，开始对端提供丰富强大的官方接口支持，也逐渐淡出了开发者的视野。最近做个移动端的H5应用，要实现自定义微信分享功能，实现过程中遇到一些小小的坑，这里分享一下。以前微信官方是没有正式支持微信分享的自定义接口（包括图片、标题、描述）的，然而有一些大神找到了WeixinJSBridge...

MonoLog 2019-08-21 10:47 评论0 收藏0
微信公众平台JSSDK分享接口开发（PHP实现）

摘要：最近做个移动端的应用，要实现自定义微信分享功能，实现过程中遇到一些小小的坑，这里分享一下。后来微信放出了，开始对端提供丰富强大的官方接口支持，也逐渐淡出了开发者的视野。最近做个移动端的H5应用，要实现自定义微信分享功能，实现过程中遇到一些小小的坑，这里分享一下。以前微信官方是没有正式支持微信分享的自定义接口（包括图片、标题、描述）的，然而有一些大神找到了WeixinJSBridge...

banana_pi 2019-06-27 11:43 评论0 收藏0
IOS微信上Vue单页面应用JSSDK签名失败解决方案

摘要：路由守卫内触发更新签名获取真实有效微信签名此处需要自行处理在路由守卫内更新签名，保证是使用当前页面，是使用目标路由完整地址再加上域名使用签名调用在使用的页面通过取出缓存的微信签名，然后进行签名。背景手机型号：型号：iphone 7 / iphone xs max版本：ios 10.3.1 / ios 12.1微信版本：WeChat 6.7.3 问题还原： Vue应用(vue-ro...

lixiang 2019-08-23 13:12 评论0 收藏0
定制微信分享的内容（备忘）

摘要：微信分享的内容，从视觉上看有三个部分标题描述图片。声明年月日，微信宣布未接入的网站将统一显示默认缩略图所以在某些时候，订制内容是极为必要的。微信分享的内容，从视觉上看有三个部分：标题、描述、图片。如果不使用微信的 jssdk 进行订制的话，微信会截取一张大概 300*300 并且距离标签最近的一张图片作为需要的图片；标题会选取中的内容；描述则会是该页面的 URL。声明：2017年...

Java_oldboy 2019-08-21 16:44 评论0 收藏0
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）

摘要：在系统的手机中，其实微信点击网页的图片会自动调用这个接口一次。然后在在下面进行微信的接口的调用判断是还是终端终端更新这个好像微信自己修复了，现在无论还是，如果不调用这个方法，微信自己不会去调用了。 1.微信网页开发调用jssdk时报permission denied 大致是两个原因（1）首先注册时未将你所调用的接口名字添加至jsApiList （2）第二个就是你的这个公众号没有权限使...

JowayYoung 2019-08-05 14:29 评论0 收藏0