微信小程序webview(H5页面)调用微信小程序支付

小时_sqe

已于 2022-04-19 17:13:14 修改

阅读量1.3w

点赞数 1

分类专栏： vue js 文章标签： javascript 微信小程序

于 2022-04-12 15:36:42 首次发布

本文链接：https://blog.csdn.net/weixin_38355349/article/details/124123059

版权

本文介绍了微信小程序中通过webview加载H5页面实现微信支付的流程。从商城H5页面开始，经过商品详情、确认页到收银台，详细讲解了如何在收银台调起小程序支付，并在支付成功或失败后返回相应的H5页面。难点在于需求业务流程的梳理和支付状态的判断与处理。

摘要由CSDN通过智能技术生成

1.业务描述：微信小程序商城入口进入的页面是商城H5页面，在H5页面进行微信支付如何实现；

2.微信小程序(webview访问H5页面)必须使用微信小程序支付；

如何实现以及实现方式以及支付后页面返回功能：

商品详情（h5页面）-->商品确认页（h5页面）-->收银台（h5页面）（点击调用小程序支付页面并关闭收银台）-->进入小程序支付页面（小程序）（根据支付结果判断下一步跳转页面）

支付成功跳转落地页(h5页面)（点击返回-->商品详情）

支付失败跳转回收银台(h5页面)（点击返回-->商品详情）

1).收银台页面

//store - action
import wx from 'weixin-js-sdk'

 /**
         * 微信JSSDK调用小程序页面并传递支付信息 vuex--action
         * @param {*} param0
         * @param {*} payType
         */
        AWechatJsPay ({ state, commit, dispatch, rootState }) {
            const openId = rootState.wechat.openId
            const params = { openId, payMethod: 'JSAPI', payType: '1' }
            return dispatch('AGetPaymentSignInfo', params).then(res => {
                const

最低0.47元/天解锁文章