SpringBoot JS-SDK自定义微信分享的实现

   日期:2024-12-27     作者:z766g       评论:0    移动:http://mip.riyuangf.com/mobile/news/7902.html
核心提示:前言在介绍使用微信自定义分享前,我们来先了解一下什么是自定义分享?访问自定义微信外链地址页面,点击红色框位置进行分享给朋

前言

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

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

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

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

自定义分享实战

第一步需要先申请接口测试号并进行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

 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类最新资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
最新资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号