先后端分离的项目微信 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 上。

一、返回 40001 code

源头：accessToken 过时
 
 缘由：accessToken 是经过 appId 和 appSecret 运算获得的，用于生成jsapi_ticket -> 生成后面须要的 noncestr、timestamp 等
 
 内容。 accessToken 默认 2 小时后过时，即正常状况下，后台 2 小时请求一次便可。可是，若是在其余地方调用同一套 appId 和 
 
 appSecret 再次生成 accessToken，前一个就会在 5 分钟内过时，致使验证失败。
 
 解决方法： 后端必须在本身的服务全局缓存 access_token 和 jsapi_ticket。

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

源头：缩略图路径有问题

缘由：缩略图路径包含了中文。

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

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

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

三、不能自定义分享按钮

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

结论：作不到，微信不容许。

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

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