vue 单页使用微信自定义分享

扯个蛋压压惊

这几天公司搞一个推广活动，刚好要用到微信自定义分享功能，公司项目都是用vue写的（单页），所以在记录一下自己踩的坑，说不准哪一天又要来一遍。这个心得是不包含微信授权登录的逻辑的，因此会比较简单。对着微信官方文档怼就行了（附上文档链接：）微信JSDK文档

一、准备工作

准备工作其实也就是准备各种所需要的包，一路npm(你怕吗）：

1、axois

2、weixin-js-sdk（1.4 版本）

3、js-sha1（用于生成微信所需的签名(signature字符串）

二、开始搬砖

在搬砖之前先看看，微信的官方流程说明：

1、绑定域名：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。

2、引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

3、通过config接口注入权限验证配置

配置函数

4、通过ready接口处理成功验证

ready回调

wx.config 配置成功之后就执行这个wx.ready

5、通过error接口处理失败验证

错误回调

最主要的就是第三步 的wx.config 函数，说一下几个参数：appid(公众号的appid，在这里要注意千万不要搞成小程序appid，否则会导致签名失败)，timestamp（当前时间戳，这个时间戳只是精确到秒，所以 new Date().getTime()/1000 取整 ）；nonceStr 随机字符串 只要是随机字符串就行，当然随机中文字符串没试过，最后就是那个signature （这个就是签名）。签名算法：

哔哔了这么多，现在开始板砖了

官方签名算法说明

他这里说到什么字典排序了（这个地方我也很纳闷，为何还要做这个字典排序，他有没有对参数进行加密，这个问题等我进了微信团队再来哔哔），其实就是这样的

参数排序

简单地做一个函数封装

简单封装

就是 str 拼成图是样子，然后 js-sha1 这个报对str 做一个加密。ticket参数是后台调用微信的api接口获取的。因此后面的什么，wx.config 需要在获取ticket回调中调用。整个流程如图示

第一部分

第二部分

另外，jsApiList 可以根据官方文档上面自己往里面加。嗲用wxInitConfig 在回调函数中就可以调用微信分享api了，这里我没有单独写微信分享的封装，因为wxInitConfig 函数的readyCallback 回调回传了 wxsdk了，因此 单独的分享函数我也没怎么去深究。临时简单的写了一个

分享函数

另外有说分享链接参数问题，有时候有一些特殊字符会被转义或者被URIComponentencode 的问题，我的解决方案直接把参数加密，然后页面进来的时候解密。

6、总结

时间赶，代码洗的有点烂，请各位大牛读者多多包涵。