微信支付前端

编程小姐姐

于 2021-02-02 22:58:24 发布

阅读量1.7k

点赞数

分类专栏：前端编程 WEB前端文章标签： css javascript html vue.js html5

本文链接：https://blog.youkuaiyun.com/weixin_53777231/article/details/113576104

版权

本文介绍了微信支付的三种方式：扫码支付、JSAPI支付和H5支付。扫码支付适用于PC端，前端需利用qrcodejs2生成二维码，并处理页面更新与定时器清除。JSAPI支付需要微信授权获取code，要注意在正确环境中调用。H5支付则适用于触屏手机浏览器，直接跳转支付链接。调试中，JSAPI支付因回调地址限制，本地调试需特定域名配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：关于扫码支付，h5支付，和jsapi支付的区别？

1：扫码支付，适合用PC端。拿到后台接口返回的链接，前端利用qrcodejs2插件生成二维码扫码即可代码如下

<div class="pay_wrap">
    <div ref="qrCodeUrl" class="qrcode"></div>
</div>
复制代码

1：(1): 生成二维码遇到的坑？因为我遇到的是切换条件会生成不同的二维码，所有每次切换页面要展示最新的二维码，解决方法就是每次切换的时候利用原生js把全部的隐藏，然后再显示最后一个代码如下

this.$refs.qrCodeUrl.childNodes.forEach(item => { item.style.display='none' }); this.$refs.qrCodeUrl.lastChild.style.display='block'

1:(2): 前端如何拿到微信支付的接口然后跳转对应的页面，需要后台写个查询微信支付结果的接口，但是现在有个问题？前端用过什么时候调用呢？查看微信支付的官网文档，只有利用定时器轮循去调用接口代码如下:根据后台接口返回的数据写自己的业务逻辑

  getCheckResult(orderNo) {
        this.num  = setInterval(async()=>{
            let data =  await this.checkResult({
                orderNo

最低0.47元/天解锁文章