react hooks接入微信native支付

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小时 

根据业务需求,要增加一个二维码失效,这里就需要前端自己写逻辑了, 服务端返回一个失效时间,前端根据失效时间-当前时间 展示一个倒计时,如图展示

等倒计时结束之后,前端给二维码上方添加一个遮罩,就可以防止微信扫码可以识别二维码了