前后端分离的项目微信 js-sdk 自定义分享链接

最近有点记不清微信 sdk 操作步骤了，借着项目做到自定义分享链接的模块，重温记录下过程心得。

前后端分离的项目，绑定域名、获取 appId 等操作就由后端同事完成，这里只记录前端所需的工作。

自定义分享链接过程

开发工具

只需微信 web 开发者工具，通过它可以非常容易地定位问题：它会打印所引用的 appId、接口是否可用等；也能点击模拟分享。无需一次次拿起手机测试。

js-sdk 引入方式

有两种引入方式：

• script 标签引用
• 模块化引用

由于做的是 vue 项目，通过模块化引用比较符合规范。

// 安装库
npm install --save-dev weixin-js-sdk

// 项目引用
import wx from 'weixin-js-sdk'

与后端的交互

这时候，后端同事需要给你微信要求验证的东西，分别是 appId、timestamp、nonceStr、signature 以及 分享出去的链接路径。

需要注意链接路径，要使用后端返回的带身份信息的链接（需要分享信息的话）。

操作： 前端传过去当前域名给后端签名，基于当前域名加上指定路径生成上述信息，后端返回信息。

代码：

methods: {
  getWeixinConfig() {
    getWxConfig({  // api.js 里定义的获取数据接口
        url: location.href.split('#')[0]  // 传递当前域名
    }, (data) = > {
        this.config = data;
        this.setWxConfig(data);  // 传递返回的数据
    }, (failed) = > {
        // do something
    })
},
setWxConfig(val) {
    let that = this;
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。使用微信开发者工具可以不打开。
        appId: val.appId, // 必填，公众号的唯一标识
        timestamp: val.timestamp, // 必填，生成签名的时间戳，注意是以秒为单位
        nonceStr: val.nonceStr, // 必填，生成签名的随机串
        signature: val.signature, // 必填，签名
        jsApiList: [ // 必填，需要使用的JS接口列表
          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo'
        ] 
    });
    let share_config = {  // 抽取共同的设置
        imgUrl: location.origin + '/buyer_static/img/share.png', //分享卡片的图标，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
        desc: "越来越多的人，xxxxxx~", //摘要,如果分享到朋友圈的话，不显示摘要。
        title: '我刚刚xxxxx', // 分享卡片标题
        link: val.inviteLink, // 分享出去后的链接，这里是返回的链接。注意：不能包含 '#' 以及后面的内容！！
        success: function () { 
            // 分享成功后的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
        // 还有其他几种回调函数，详见官网文档
    };
    wx.ready(function () {  // 设置好后，在 ready 函数里调用分享方法，传入设置
        wx.onMenuShareAppMessage(share_config); //分享给好友
        wx.onMenuShareTimeline(share_config); //分享到朋友圈
        wx.onMenuShareQQ(share_config); //分享给手机QQ
        wx.onMenuShareWeibo(share_config);  // 分享到微博
    });
    wx.error(function (res) { 
        // 通过error接口统一处理失败验证
        // config信息验证失败会执行error函数
    });
    wx.checkJsApi({  // 检测所使用的 api 是否可用
        jsApiList: [ // 需要检测的JS接口列表，所有JS接口列表见附录2
         'onMenuShareTimeline',
         'onMenuShareAppMessage',
         'onMenuShareQQ',
         'onMenuShareWeibo'
        ],
        success: function (res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
}
},
created() {
    // 本地开发不需要验证
    if (process.env.NODE_ENV === 'production') {
        // 进入页面时获取、设置配置
        this.getWeixinConfig()
    }
}

常见问题

注意：以下内容都基于微信管理后台已经绑定前端传过去的域名 到 appId 上。

1、返回 40001 code

 源头：accessToken 过期
 
 原因：accessToken 是通过 appId 和 appSecret 运算得到的，用于生成jsapi_ticket -> 生成后面需要的 noncestr、timestamp 等
 
 内容。 accessToken 默认 2 小时后过期，即正常情况下，后台 2 小时请求一次即可。但是，如果在其他地方调用同一套 appId 和 
 
 appSecret 再次生成 accessToken，前一个就会在 5 分钟内过期，导致验证失败。
 
 解决方法： 后端必须在自己的服务全局缓存 access_token 和 jsapi_ticket。
 

2、ios 下分享卡片不显示缩略图，而分享到朋友圈或者使用安卓分享都没有问题。

源头：缩略图路径有问题

原因：缩略图路径包含了中文。

解决方法：将中文重命名为英文； 或使用 encodeURI(imgUrl) 处理图片路径。

另有一个说法是分享的内容包含敏感词，但我测试了一下没发现问题，也提一下给后来人做个参考。可能的敏感词有： 元、现金、红包 等。

测试方法： 将标题和内容都换成数字，测试是否显示缩略图。

3、不能自定义分享按钮

愿景：页面自定义分享按钮，点击调用分享功能。

结论：做不到，微信不允许。

4、其他常见问题，见 js-sdk 文档底部附录5的说明。

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115