1.前置条件
- 服务号/订阅号(企业) -- 通过微信认证
- 可以在微信公众平台-开发-接口权限查看
2.步骤
- 登陆微信公众平台-公众号设置-授权管理-JS接口安全域名
- 设置之后需要分享的域名
- 引入微信提供的js文件
- 通过config接口注入权限验证配置
- 由后台人员完成
(具体请参考文档) wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [] // 必填,需要使用的JS接口列表 });
- 前端代码可以塞进script标签访问后台接口,得到相应配置再调用
通过ready接口处理成功验证
wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 });
通过error接口处理失败验证
wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 });
3.方法
具体的方法请参照文档,分享链接的域名或路径必须与当前页面对应的公众号JS域名一致!
4.问题解决
- 给后台人员用来生成配置文件的路径
- 需要是当前路径,用来生成签名算法 (window.location.href)
- 需要去掉#后的值,不然会报签名错误 (url.split(‘#‘)[0])
- 需要进行编译(encodeURIComponent)
后台地址+(带上要签名的地址)encodeURIComponent(window.location.href.split('#')[0]);
- 后台人员权限需要配置
- jsApiList
以上内容,如有错误请指出,不甚感激。
如需转载,请注明出处