前言

在介绍使用微信自定义分享前，我们来先了解一下什么是自定义分享？

访问自定义微信外链地址页面，点击红色框位置进行分享给朋友或者朋友圈，具体操作如下图所示：

我们要做的就是自定义下图所示中红框中的信息。

闲话少说，接下来就正式开始自定义分享实战环节！

自定义分享实战

第一步需要先申请接口测试号并进行JS接口安全域名设置

访问如下链接进行接口测试号申请。点击访问 选择接口测试号申请，如下图所示：

或者直接访问 ：申请测试账号页面 如下图所示：

点击登录进行扫码登录，如下图所示：

登录后如下图所示：

windows系统在 hosts 文件中配置回环地址的域名

第二步是下载微信web开发者工具，可以在PC 进行测试。

点击访问下载页面 如下图所示：

傻瓜式一步一步安装即可。

第三步 看微信操作教程并完成代码实现

点击访问微信JS-SDK说明文档 如下图所示：

JSSDK使用步骤

步骤一：绑定域名（上面已经操作了）

步骤二：引入JS文件（下面实战代码中会介绍到如何使用）

步骤四：通过ready接口处理成功验证（这里就不详细介绍了具体内容请参看微信文档查看）

步骤五：通过error接口处理失败验证（这里就不详细介绍了具体内容请参看微信文档查看）

。

获取signature流程如下：

1. 获取 access_token 然后根据 access_token 获取 jsapi_ticket 。
2. 排序 noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）,url（当前网页的URL，不包含#及其后面部分）4个参数拼接例如：noncestr=XX&jsapi_ticket=XX&jtimestamp=XX&jurl=XX
3. 然后通过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