native支付,适用于PC,就看服务端懒不懒,懒得话,需要前端自己转换时间格式,以及生成二维码
首先判断是pc的情况下,调用服务端接口,拿到时间(微信返回的是带有时区的 时间),借助moment第三方库就可以实现,获取到自己想要的时间格式
moment(new Date('服务端拿到的微信返回的带有时区的时间')).format('YYYY-MM-DD HH:mm:ss')
第二步就是生成二维码,这里借助的是qrcode.react 库
npm install qrcode.react
在页面中
import QRCode from 'qrcode.react';
<QRCode value={'根据服务端返回的url'} />
这个url是服务端拿到微信返回的url,并且有效期 2小时
根据业务需求,要增加一个二维码失效,这里就需要前端自己写逻辑了, 服务端返回一个失效时间,前端根据失效时间-当前时间 展示一个倒计时,如图展示
等倒计时结束之后,前端给二维码上方添加一个遮罩,就可以防止微信扫码可以识别二维码了