在public文件夹下的 Index.html 中引入 ,放在title标签下即可
其中 比较重要的是 signature
signature 需要通过 后端接口 访问微信的 api 获取 access_token 后获取 jsapiTicket
拼接结束后 使用 SHA1算法加密后传回 即是可用的 signature
后端获取 signature 接口
signature 拼接时候需严格按照 如下格式进行拼接
在IOS客户端 和 ANDROID中 url 参数略有不同
IOS客户端中 需要的是 页面的根路径
ANDROID客户单中需要的是当前页面的路径
注意: api 调用为单个应用每小时最多100次 实际测试可能小于100 接口就会无法相应 应当保存 jsapi_ticket避免频繁请求(本业务压力有限没有做处理)
java Spring-boot实现
使用函数式先注册config
调用地理位置信息
先引入config 注册函数 再使用window.wx.接口名称即可调用
现在 android 的微信(6.3.31)已经修好了,需要按照文档说的传入当前页面的url,也就是没吃豆重新 config 一次,但是苹果的微信只要在进入页面的时候 config 一次就可以了,微信管接口的估计是个锤子。
在做图片上传的时候,图片太大老是上传失败,在产品汪(☁️)的建议下用了微信的 JS-SDK,微信会处理压缩,而且还有顺带连预览也解决了,好开心。
后来一发布,整组人感觉不好了。主要问题出现在 url 的配置上。
微信的 官方文档 是这样说的:
实际测试中发现,配置的 url 并不是调用微信 js 的时候所在页面的地址(也就是通过 location.href 获得的地址),而是在进入到网站的第一个页面的地址,这是第一个问题
第二问题是在苹果手机的微信上面,只要调用 wx.config 一次就可以了,但是在 android 的手机,在页面跳转之后,要重新调用 wx.config (url 依然是进入网站的第一个页面的地址,要保存在一个变量里面),"X5 浏览器", 我他妈就呵呵了。如果用了 react-router 的话,直接在 Route 组件上绑定一个 onChange 方法就可以了
微信开发交流群:148540125
欢迎留言、转发、打赏
系列文章参考地址 极速开发微信公众号
项目源码参考地址 点我点我--欢迎Start
服务号、订阅号可以通过登录 微信公众平台 查看 开发>接口权限
使用JSSDK主要包括
1、判断当前客户端版本是否支持指定JS接口、
2、分享接口(微信认证)
3、图像接口
4、音频接口
5、智能接口(识别语音并返回结果)
6、设备信息(获取网络状态)
7、地理位置
8、界面操作
9、微信扫一扫
10、微信小店(服务号必须通过微信认证)
11、微信卡券 (微信认证)
12、微信支付(服务号必须通过微信认证)
官方参考文档
步骤一:绑定域名
先登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名 。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
签名算法生成规则
请 官方参考文档
下面具体来讲讲 开源项目 weixin_guide 中的封装。
使用的时候只要在Controller方法上添加一个拦截器 JSSDKInterceptor 来实现签名验证再将 wx.config 需要的参数设置对应的属性在页面上进行获取。
拦截器实现如下:
在Controller中使用
JSP页面上面使用
测试结果
在AppConfig 中添加路由 me.add("/jssdk", JSSDKController.class,"/view")手机中访问 http://域名[/项目名称]/jssdk ,如果设置了 debug= true 成功了就会弹出
如果出现 {"errorMsg":"config:invalid url domian"} 请检查 步骤一:绑定域名 与你访问的域名是否在安全域名列表当中
步骤四:通过ready接口处理成功验证
步骤五:通过error接口处理失败验证
步骤六:接口调用
拦截器具体实现 参考地址 点这里
js 接口调用参考地址 点这里
以上就是JSSDK使用的介绍。
欢迎留言、转发、打赏项目
源码参考地址 点我点我--欢迎Start