产品要做一个分享传播的活动考虑微信公众或者小程序
| 功能/是否支持 | 微信公众号 | 小程序 |
|---|---|---|
| 一键分享好友 | ❎ | ✅ |
| 分享朋友圈 | ✅ | ❎ |
| 直接获取手机号 | ❎ | ✅ |
| 下载app | ✅ | ❎ |
权衡利弊以后决定使用微信公众号生态，获取手机号可以用户输入，分享好友可以引导用户进行操作。 要使用公众号分享后好友能看到标题的描述的内容需要使用JSSDK。
这里我走进了个误区，以为使用JSSDK需要用户授权，实际不需要也能使用。 接下来我们开搞。
JSSDK开发
- 第一步，绑定域名，主要是在公众平台填写js接口安全域名
- 第二步，在页面中引入http://res.wx.qq.com/open/js/jweixin-1.4.0.js或者http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
- 第三步，在填写wx.config
- 第四部，在wx.ready里使用微信分享，配置对应的标题描述图片和访问地址
- 第五步，大功告成
哇，好简单！当然不可能了，这么简单不就不好玩了。在第三步的填写wx.config时还需做比较多的工作
配置wx.config
主要是要生成signature
- 首先需要后端小伙伴配合获取jsapi_ticket
- 生成signature，虽说微信建议在后端生成，实际在前端也可以做。 (1). 用jsapi_ticket、noncestr（随机字符串）、timestamp（任意时间戳）、url（当前页面url，如果有#，#后不需要）。按照顺序，拼接成一个字符串 (2). 对字符串进行sha1加密 (3). 得到signature
const signArgs = { timestamp: parseInt(new Date().getTime() / 1000), // 时间戳 noncestr: Math.random().toString(36).substr(2), // 随机字符串 url: location.href.split('#')[0], jsApiTicket } const preSha = `jsapi_ticket=${signArgs.jsApiTicket}&noncestr=${signArgs.noncestr}×tamp=${signArgs.timestamp}&url=${signArgs.url}` const signResult = { noncestr: signArgs.noncestr, timestamp: signArgs.timestamp, signature: sha1(preSha) } wx.config({ debug: false, appId: weixinAppid, timestamp: signResult.timestamp, nonceStr: signResult.noncestr, signature: signResult.signature, jsApiList: self.jsApiList})复制代码 我在过程中遇到两个坑
- 第一个坑，通过微信官方给的signature生成验证工具,不管怎么样都不一样，最后发现官方的时间戳是10位，我这边生成的是13位，所以在代码里我做了除以1000parseInt操作
- 第二个坑，两边生成的signature一样了，但是在页面里还是报invalid signature，最后发现是我appid填写错误，填写正确以后就正常了。
我在做的时候还是做了用户授权（虽然做完发现不需要注释了） 这里还是记录一下。 主要是从微信获取code
用户授权，获取用户信息
- 跳转到中间页获取用户授权authorize为我这里的页面
const url = encodeURIComponent(window.location.href) window.location.replace( `${authorize}?appid=${weixinAppid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect` )复制代码 - 用户授权后会跳回，并在参数后拼上code
- 通过code换取网页授权access_token，必须从后端发起了
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }复制代码 - 通过access_token和openid就可以拿到用户信息了
{ "openid":" OPENID", " nickname": NICKNAME, "sex":"1", "province":"PROVINCE" "city":"CITY", "country":"COUNTRY", "headimgurl": "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46", "privilege":[ "PRIVILEGE1" "PRIVILEGE2" ], "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}复制代码