公众号分享到好友

背景

时间： 2018-9-30~2018-10-01；

前端： vue

JS-SDK： 1.4.0

分享目的： 刚接手一个公众号网站的项目，其中有个需求是分享某个页面（A页面）到好友。遇到了几个坑，趁着还记得解决过程写下这篇文章以记录一下爬坑过程

这里以updateAppMessageShareData为例子

0号坑--回调不及预期

这个好解决，看代码你应该就知道原因了

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    const self = this;
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
    }, (res) => { 
        // 这里面用this，拿不到vue实例
    }); 
});

微信支付回调也有类似的问题

不过，在我用这个接口的时候，回调依然没有产生，不过老的接口可以正常回调。但是文档说老接口要废弃了

1号坑--图标不显示

原因包括但不仅限于下面两种情况：

base64

确定图标是否被编码成base64，如果是小图片可能会被webpack处理了，imgUrl的变成一个带base64的字符串

缺少protocol

link的格式可以是//安全域名/A/B/C，但是图片的url需要http://安全域名。

3号坑--分享链接失效

在这两天的实践中，iOS的分享总是失效，不能正确的分享页面A，但是在安卓机器上不会出现这个问题。

如果你有使用wx.error函数，那么你可能已经知道进入这个页面的时候执行config的结果是invalid signature。

然后你开始百思不得其解，这玩意明明在安卓上成功了，为什么换到iOS就invalid signature。

接着你可能开始怼后端了，如果签名部分是你自己实现的，那你可以什么都不用动。

你可以试一下~~分享之前摇一摇~~分享之前刷新一下页面

如果你刷新后可以成功的分享页面的话，我想你已经知道接下来怎么做了。

赶紧往error回调函数里面写个location.reload方法，让页面刷新。

不过，你要是这么随意的让页面刷新，那可以这个页面就无限刷新了。记得在local storage里面存个变量防止无限刷新！

以上方法如果无效的话，你还可以试一下网上说的，iOS只要在首页执行config注入的神操作。当然我不知道效果如何

我觉得这是iOS上面的一个~~bug~~ feature

一些吐槽

以上三个破问题，花了我2天半的时间排查解决。特此记录下来，希望对你有帮助。

如果你也遇到类似的坑，不妨在下面回复

FakeFullStack / QA