如何正确的在项目中接入微信JS-SDK

微信JS-SDK的功能

如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫等微信特有的能力,为微信用户提供更优质的网页体验。

通过使用微信的JS-SDK,你可以让你网页在微信内调用拍照、语音、支付、位置、扫一扫这些只能在微信内使用的功能。进过下面的步骤,一步一步的配置,就可以让你正确的在项目中引入微信的JS-SDK。

引入微信的JS文件

微信的javascript文件的链接是: http://res.wx.qq.com/open/js/...

但是只支持使用 AMD/CMD 标准模块加载方法加载。于是我就在npm的官网上找到了发布后的js-sdk,支持CommonJS的引入方式。可以在你的项目中使用如下命令安装。

npm install weixin-js-sdk

安装好后可以使用一下两种方式进行引入。

/* 使用CommonJs规范引入 */
const wx = require('weixin-js-sdk');/* 使用ES6模块引入 */
import wx from 'weixin-js-sdk';

为wx.config实现权限签名算法

如果你按照大部分的教程来,他们会让你使用wx.config注入,获取权限。但是使用wx.config的前提是你必须要先实现权限签名算法。而权限签名算法的关键就是jsapi_ticket。关于jsapi_ticketm,官方的描述如下。

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是企业号号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket。

大概什么意思呢,看官方文档可能有点懵。大概意思就是:你想用我的sdk?可以,我给你个2个小时有效期的调用凭证。这个凭证我每天发给你的次数有限,所以你要保存好,不然到时候再想要凭证,没门。

这是通(很)俗(皮)的解释。下面来点正常的解释。想要获取jsapi_ticket,你就需要向下面这个url:https://api.weixin.qq.com/cgi-bin/ticket/getticket GET请求,需要带上两个参数。access_token和type,如果你是获取jsapi_ticket,那么type就是固定的,值为jsapi。就可以在返回里面拿到ticket。并且你需要在服务器端缓存返回拿到的ticket。这个ticket就是上面通俗解释里的凭证,有效期两个小时,此后前端所有需要用到ticket的地方,后端需要去判断,如果ticket仍然没有过期,就从缓存中取出返回给前端,如果失效,就再发一个GET接口,获取后再存入缓存并且返回给前端。如果请求正常的话,会返回下列数据。

{'errcode': 0,'errmsg': 'ok','ticket': 'bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA','expires_in': 7200,
}

拿到了jsapi_ticket之后,我们就可以开始进行权限签名算法了。算法的流程如下。

image

这个逻辑需要在后端实现。为什么会在下文给出。将需要用到js-sdk页面的url、以及jsapi_ticket、noncestr(随机字符串)、timestamp(当前的时间戳)进行字典序排序,然后使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string。然后将这个string使用sha1加密,得到的结果就是signature了。然后将signature、timestamp、nonceStr返回给前端,wx.config需要用到这些数据。然后将它们用这里需要特别注意一下,官方的注意文档如下。

注意事项

  1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
  2. 签名用的url必须是调用JS接口页面的完整URL。
  3. 出于安全考虑,开发者必须在服务器端实现签名的逻辑。

这里的官方文档其实也没有那么官方,其实就是告诉我们,实现上述签名逻辑必须在服务器,以及noncestr和timestamp必须要和在服务器端签名所使用的一致,还有就是调用微信js-sdk的页面的url必须要跟服务端签名所使用的url一致。所有在服务端可以直接从请求的header里面的referer获取。

你把接口做好之后,只要能够正确的返回signature、nonceStr、timestamp(有后端的更好,直接找他们要接口就好了),就可以愉快的进行下一步了。

通过config接口注入权限验证配置

官方的描述如下。

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

在进行了正确的微信javascript文件引入后(看上面)在页面中调用如下代码就可以注入权限验证配置。下面是官方给的样例代码。

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,企业号的唯一标识,此处填写企业号corpidtimestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名,见附录1jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

下面我给一个样例数据。

// data就是上一步说的后端返回的那些数据,包含signature、nonceStr、timestamp
const data = await getJsSDK();wx.config({debug: true,appId: '你的appId',timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ['onMenuShareTimeline', // 分享到朋友圈'onMenuShareAppMessage', // 分享给朋友'onMenuShareQQ',// 分享到QQ'onMenuShareWeibo',// 分享到腾讯微博'onMenuShareQZone',// 分享到QQ空间]
});

注入后的生命周期函数

在调用config后会有两个结果,成(这)功(是)和(废)失(话)败。可以通过微信提供的两个接口来进行事件回调。

wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});wx.error(function(res){// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

调用分享接口

在ready()中调用具体的分享接口。如分享到朋友圈、好友、QQ空间。代码如下。我把接口的所有的钩子函数都给了出来。其实常用的就只有的success和cancel。根据你个人的需求而定。

wx.ready(function(){/* 分享到朋友圈 */wx.onMenuShareTimeline({title: '', // 分享标题link: '', // 分享链接,该链接域名必须与当前企业的可信域名一致imgUrl: '', // 分享图标success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数},trigger: function () {// 监听Menu中的按钮点击时触发的方法},complete: function () {// 接口调用完成时执行的回调函数,无论成功或失败都会执行},fail: function () {// 接口调用失败时执行的回调函数},});
});

微信官方文档在这给了一个特别的提醒。

注意:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。

大概意思就是,不要尝试在钩子函数中动态的修改title啊link啊的值,因为分享是同步的操作,ajax的值返回回来的时候分享的操作已经结束了。比起这个,要注意的是link字段,它的域名必须要跟微信后台配置的JS安全域域名一致,否则分享会失败。到这为止,微信js-sdk的接入就完成了。还有问题可以直接留言或者联系我。

写在后面

最后还需要注意一点的是,如果页面的url发生了变化,在新的url下调用js-sdk一定要再调用一次签名接口,用新的url再进行一次签名,否则会调用不成功。

微信官方文档地址在 这里

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/803559.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka的安装与配置

kafka的安装与配置 kafka的安装 在这我才用的是oracle云,系统是Ubuntu,在docker上按照的 安装docker 具体的安装方法请见docker-compose教程 查看docker版本 docker --versionDocker version 27.0.3, build 7d4bcd8创建 Docker Compose 文件 Kafka 依赖 Zookeeper 来管理集群…

面试官:项目中如何实现布隆过滤器?

谈起“布隆过滤器”相信大家都不陌生,它也算日常面试中的常见面试题了。例如,当面试官在问到 Redis 模块的相关问题时,可能会问到缓存穿透(Redis 四大经典问题之一),而缓存穿透的经典解决方案之一,则是“布隆过滤器”。 但是,对于布隆过滤器是什么?以及布隆过滤器的实…

LLM大模型: 生成式模型的数学原理和prompt融入image

1、(1)上文介绍了DDPM生成图片的原理和代码测试结果,训练时给样本图片加上gaussian noise,预测时也是预测gaussian noise;这里为啥要用gaussian distribution?为啥不用其他的分布?高斯分布相对比较简单,只有两个参数:均值和方差,容易控制;为啥一张随机生成的gaussio…

P3311 [SDOI2014] 数数

参考题解做法。 题目思路 数位 dp + AC 自动机好题。 直接往下递归,dfs(u, ver, limit, st) 表示目前在数字 \(n\) 的第 \(u\) 位进行讨论,\(ver\) 表示当前在 AC 自动机上的节点,\(limit\) 是是否步步紧逼 \(n\),只要位数不足 \(n\) 的位数或者有一位小于 \(n\) 的那一位就…

实验1

任务1 源代码1 #include <stdio.h> 2 int main() 3 { 4 printf("o \n"); 5 printf("<H>\n"); 6 printf("I I\n"); 7 8 return 0; 9 }

initrdinit进程

initrd的全名是 init ramdisk,是一个启动时存在于内存的文件系统。 kernal 到 initrd的流程在GRUB加载kernel时,kernel会先在内存中制造一个rootfs当做临时的空间供系统使用,接下来,kernel便会将initrd当做是一个系统,将其mount到rootfs上启动。 引入initrd的目的是为了把…

如何部署北斗定位应用,基于国产自主架构LS2K1000LA-i处理器平台

北斗卫星导航系统(以下简称北斗系统)是着眼于国内经济社会发展需要,自主建设、独立运行的卫星导航系统。经过多年发展,北斗系统已成为面向全球用户提供全天候、全天时、高精度定位、导航与授时服务的重要新型基础设施。图 1 北斗定位系统的应用优势 强可控:北斗系统是国内…

ChatGPT 向更多用户推出高级语音模式:支持 50 种语言;字节发布两款新视频生成大模型丨 RTE 开发者日报

开发者朋友们大家好:这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE(Real-Time Engagement) 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编辑的个人观点…

题解:CF573D Bear and Cavalry

CF因为这是远古题目,所以根据现在的评测机速度,用 \(O(nq)\) 的做法也是可以过的。 也就是说,我们可以每次操作直接修改对应位置上的数字,然后设计一种 \(O(n)\) 的算法求解答案。 这道题类似资源分配型动态规划,所以我们可以设 \(dp_i\) 表示分配前 \(i\) 个人的答案。 直…

题解:AT_abc204_e [ABC204E] Rush Hour 2

LG变形的 dijkstra。 先思考什么情况下需要等待以及等待多长时间最优。我们把题目上的计算方法按照当前的时间 \(t\) 和通过所需的时间 \(f(t)\) 列个函数关系: \[f(t)=t+c+\lfloor \frac{d}{t+1}\rfloor \]然后用 Desmos 画个图可以得到图像(其实就是对勾函数):因为 \(c,d…

Rust字符串类型全解析

字符串是每种编程语言都绕不开的类型, 不过,在Rust中,你会看到远比其他语言更加丰富多样的字符串类型。 如下图:为什么Rust中需要这么多种表示字符串的类型呢? 初学Rust时,可能无法理解为什么要这样设计?为什么要给使用字符串带来这么多不必要的复杂性? 其实,Rust中对…