前端在H5页面唤起微信支付（H5支付）

最新推荐文章于 2025-04-06 10:11:44 发布

逩跑鍀小学生

最新推荐文章于 2025-04-06 10:11:44 发布

阅读量1.7w

点赞数 22

文章标签：微信 vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/codingLeader/article/details/123125827

版权

前言

公司产品之前是在公众号之内访问，使用微信JSDK调用微信支付。后需要在浏览器之中访问，调用H5支付。前端使用框架是VUE + VANT

提示：以下是本篇文章正文内容，下面案例可供参考

首先了解什么是H5支付，链接地址：微信H5支付说明文档

一、在支付页面通过后端接口获取H5支付链接

pay() {
    let This = this;
    this.$indicator.open(); //loading...
    let params = {
        proposalNo: this.$route.query.orderNo,
        orderType: '2', // 1投保单 2订单
        payType: this.isWeixin() ? '': '3'
    }
    initiatePayment(params).then(res => {
        if (res.code == 200) {
            This.$indicator.close();
            localStorage.setItem("payVisiable", true)
            location.href = res.data.mwebUrl // 获取支付链接直接跳转微信
        }
    }).catch(error => {
        This.$indicator.close();
        This.$toast(error)
    })
    
}

接下来说下，在过程中遇到的坑！！！

1、使用上边的代码跳转到微信之后，用户支付成功或失败都会跳转到发起支付的这个页面，发起支付的页面地址是https://xxx.xxxxx.cn/channel/a/#/studyH5?policyNo=1111&planCode=2222，支付完成或支付失败后，跳转的页面就变成了 https://xxx.xxxxx.cn/channel/a/#/，问题来了，页面加载不出来了。

解决方法：

//在跳转支付链接后，拼接微信回跳地址
location.href = res.data.mwebUrl + '&redirect_url=' + encodeURIComponent(window.location.href)

重点跳转地址需要encodeURIComponent

二、支付成功/失败后，在微信跳转会的页面增加弹层，让用户去触发查询保单是否生成的按钮，跳转相应支付成功/失败页面

// 查询支付结果
seachPayResult() {
    let This = this
    if(!localStorage.getItem("outOrderNo")) return
    var orderNo = JSON.parse(localStorage.getItem("outOrderNo"))
    getPayStatus(orderNo).then(res => {
        This.payVisiable = false //弹窗消失
        if(res.status != '1'){
            window.location.href = `${this.$_config.URL.unpaid}?orderNo=${orderNo}&code=Y38&channelCode=${this.$route.query.channelCode}`
        } else {
            localStorage.removeItem("outOrderNo")
            window.location.href = `${this.$_config.URL.success}?orderNo=${orderNo}&code=Y38&channelCode=${this.$route.query.channelCode}`
        }
    }).catch(error => {})
}