乐趣区

使用微信SDK自定义分享

一、背景介绍

在微信中打开自己网站的链接,经常会变成下面这样


不太好看有木有,如果你想在分享出来的东西带上你的 logo,带上你想要的描述,怎么办,像下面这样


这就需要用到微信的分享 SDK,文档链接:https://developers.weixin.qq….

二、微信 SDK 使用说明

第一步

第一步先要在微信公众平台上注册一个微信公众号,还必须要是认证的企业或组织,流程走下来大概要个两三天的时间吧,只有认证了的公众号才有分享 SDK 的权限,个人的不行,这个比较麻烦。账号申请成功后会有 AppID 和 AppSecret,这个相当于你公众号的秘钥,第二步需要用到。然后在 JS 接口安全域名中加入你调微信 SDK 时的页面的地址,不支持 IP 地址、端口号及短链域名,只能写域名,不用加 http 啥的,在设置了安全域名的路径下才能够成功调 SDK。

第二步

需要一个获取签名的接口,这个可以找 RD 帮忙操作,请求接口的时候带上 URL(必须和你当前的 URL 一致),然后让 RD 好好研读下如何通过公众号的 AppID 和 AppSecret 获取到 token 及签名等信息,接下来就可以愉快的调用微信的分享 SDK 了。

第三步

获取到签名之后在 HTML 中引入

    <script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

引入后在代码中调用分享 SDK

   window.wx.config({
        appId: res.data.appId, //res.data 为请求签名接口返回数据
        timestamp: res.data.timestamp,
        nonceStr: res.data.nonceStr,
        signature: res.data.signature,
        jsApiList: [
            'checkJsApi',
            'updateAppMessageShareData',
            'updateTimelineShareData'
        ]
    });
    const shareConfig = {
        'imgUrl': '你想展现的图标',
        'desc': '你想展现的描述',
        'title': '你想展现的 title',
        'link': window.location.href,
        'success': function () {console.log('成功了!');
        },
        'cancel': function () {console.log('取消');
        }
    };
    window.wx.ready(function () {window.wx.updateAppMessageShareData(shareConfig);
        window.wx.updateTimelineShareData(shareConfig);
    });

OK!大功告成,现在就可以按你的想法分享内容了,但是如何在本地测试是否成功呢?我们刚才也说了只能在安全域名下才能调用成功,所以 Charles 就派上大用场了。。。把安全域名代理到本地,然后可以在微信开发者工具上面自测一下,没问题了上真机,iOS 和安装都要试一下,会有惊喜。

三、坑及总结

在自测了没问题之后上线了。。。结果发现 iOS 的手机获取签名失败,报 invalid signature, 后来排查发现在 iOS 的微信里面如果从其他页面跳转到你要分享的页面 window.location.href 是不会变的。。。也就是说你发请求去获取签名时候传给后端的 URL 和你当前的 URL 是不一致的,所以导致签名获取失败。这个解决办法很多,可以把前一个页面的 URL 拿去获取签名,只要保持一致就是 OK 的。
好了 先写这么多。。。

退出移动版