前言
在介绍使用微信自定义分享前,我们来先了解一下什么是自定义分享?
访问自定义微信外链地址页面,点击红色框位置进行分享给朋友或者朋友圈,具体操作如下图所示:
我们要做的就是自定义下图所示中红框中的信息。
闲话少说,接下来就正式开始自定义分享实战环节!
自定义分享实战
第一步需要先申请接口测试号并进行JS接口安全域名设置
访问如下链接进行接口测试号申请。点击访问 选择接口测试号申请,如下图所示:
或者直接访问 :申请测试账号页面 如下图所示:
点击登录进行扫码登录,如下图所示:
登录后如下图所示:
windows系统在 hosts 文件中配置回环地址的域名
第二步是下载微信web开发者工具,可以在PC 进行测试。
点击访问下载页面 如下图所示:
傻瓜式一步一步安装即可。
第三步 看微信操作教程并完成代码实现
点击访问微信JS-SDK说明文档 如下图所示:
JSSDK使用步骤
步骤一:绑定域名(上面已经操作了)
步骤二:引入JS文件(下面实战代码中会介绍到如何使用)
步骤四:通过ready接口处理成功验证(这里就不详细介绍了具体内容请参看微信文档查看)
步骤五:通过error接口处理失败验证(这里就不详细介绍了具体内容请参看微信文档查看)
。
获取signature流程如下:
- 获取 access_token 然后根据 access_token 获取 jsapi_ticket 。
- 排序 noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳),url(当前网页的URL,不包含#及其后面部分)4个参数拼接例如:noncestr=XX&jsapi_ticket=XX&jtimestamp=XX&jurl=XX
- 然后通过sha1加密拼接的4个参数获取到signature
可能你对操作流程还是看不懂,没有关系可以直接参考代码实现,接下来就是代码实现:
初始化微信JSSDK配置信息 Controller 内容如下:
初始化JSSDK配置信息,配置信息有:noncestr(随机字符串)、有效的jsapi_ticket、timestamp(时间戳)、shareUrl(当前网页的URL,不包含#及其后面部分)appid(公众号 appid)。
获取 JSSDK access_token 方法。
获取 JSSDK jsapi_ticket 方法。
拼接 noncestr(随机字符串), 有效的jsapi_ticket、 timestamp(时间戳)、url(当前网页的URL,不包含#及其后面部分)并通过sha1进行加密。
基础工具方法如下:
wxShare.js 主要是获取JSSDK配置信息并定义分享功能处理。具体代码如下:
分享页面该页面需要引入wxShare.js和jweixin-1.2.0.js,并且通过在隐藏的span标签上定义自定义分享的内容,具体代码如下:
测试
访问:http://www.zhuoqianmingyue.com:8090/weixinshare.html 未引入 wxShare.js 的测试结果如下:
引入 wxShare.js 的测试结果如下:
一般情况下我们通过接口测试号配置成测试环境域名,上述测试通过后就可以在正式服务号上配置JS接口安全域名,顺便在把我们项目配置的 appid 换成服务号的 appid 即可。具体操作如下:
小结
微信自定义分享具体操作步骤如下:
- 定义获取JS-SDK配置信息接口
- 定义页面初始化调用JS-SDK配置信息接口 js 代码和定义分享接口js代码
- 分享页面引入 jweixin-1.2.0.js和 调用JS-SDK配置信息的js文件
三步中最为总要的就是第一步:定义获取JS-SDK配置信息接口,这个接口需要获取jsapi_ticket 并通过和配置信息参数一起生成签名 signature。
在这里再三强调一下,微信提供操作文档一定要多看几篇,因为很多细节都在文档中进行了说明。当你把微信提供操作文档看透,你就会觉得其实就是个API 调用而已。
代码示例
具体代码示例请查看我的GitHub 仓库 springbootexamples 中的 spring-boot-2.x-weixin 查看。
GitHub:https://github.com/zhuoqianmingyue/springbootexamples