调用微信支付wx.chooseWXPay 详细流程

 第一步:配置微信基本配置

  /*
    * 获取微信配置
    以下的参数后台提供
    这里切记,经常会报错,
    因为页面的url的问题,
    我这里是后台写死的,根据不同的环境配置不同url
    * */
    initWxConfig () {
      this.$fetch(url).then(res => {
        console.log(res)
        wx.config({
          debug: false,
          appId: res.data.appId,
          timestamp: res.data.timestamp,
          nonceStr: res.data.noncestr,
          signature: res.data.signature,
          jsApiList: ['chooseWXPay']
        })
        wx.ready(res => {
          wx.checkJsApi({
            jsApiList: ['chooseWXPay'],
            success: res => {
              console.log('checked api:', res)
            },
            fail: err => {
              console.log('check api fail:', err)
            }
          })
        })
      })
    }

当你看到这样即获取微信基本配置成功

 

 第二步:调用微信支付

这里需要的参数都是后台自己调取微信之后提供给前端,

这里重点说一下基本错误,

我这边报错是因为后台没有提供paySign支付签名 所以报错

这里是需要在微信的商户后台配置支付页面的url,切记是支付页面的上一个页面的路径
    /*
      * 先是用户下单,下完单之后再调取微信支付
      * */
      this.$post(url).then(res => {
        let data = JSON.parse(res.data.paySign)
        wx.chooseWXPay({
          // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          timestamp: data.timeStamp,
          // 支付签名随机串,不长于 32 位
          nonceStr: data.nonceStr,
          // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
          package: data.package,
          // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
          signType: data.signType,
          // 支付签名
          paySign: data.paySign,
          // 支付成功后的回调函数
          success: function (res) {
            // res.errMsg === 'chooseWXPay:ok'方式判断前端返回,微信团队郑重提示:
            // res.errMsg将在用户支付成功后返回ok,但并不保证它绝对可靠, 切记。
            if (res.errMsg === 'chooseWXPay:ok') {
              that.$router.push({
                name: 'ReturnPage',
                query: {
                  orderNo: res.data.orderBaseinfo.orderNo
                }
              })
            }
          },
          // 支付取消回调函数
          cancel: function (res) {
            Toast('用户取消支付~')
          },
          // 支付失败回调函数
          fail: function (res) {
            Toast('支付失败~')
          }
        })
      })

第三步:到这里基本都可以调通了,至于怎么处理成功回调和错误回调需根据原型,哈哈
谢谢大家

  • 10
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
wx.chooseWXPay是微信JSSDK中的一个方法,用于调起微信支付界面。它需要传入一个包含支付参数的对象,并在支付成功或失败后执行相应的回调函数。 在使用wx.chooseWXPay之前,需要先引入微信JSSDK的脚本文件,可以通过在需要支付的页面中添加以下代码实现引入:http://res.wx.qq.com/open/js/jweixin-1.4.0.js 具体的调用示例可以参考以下代码: ```javascript import { wxPay } from './wxPay.js'; // 引入wxPay函数 // 调用wxPay函数 wxPay(wx, response, that); ``` 其中,wx是微信JSSDK的对象,response是后端返回的支付参数对象,that是当前wxPay函数所在域的this对象,用于回调函数的使用。 在wx.chooseWXPay的回调函数中,可以根据返回的err_msg属性判断支付的结果,如"get_brand_wcpay_request:ok"表示支付成功,"get_brand_wcpay_request:cancel"表示支付被取消,其他情况表示支付出现其他错误。根据不同的结果,可以执行相应的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [微信支付wx.chooseWXPay、WeixinJSBridge.invoke】](https://blog.csdn.net/SK_21/article/details/110160045)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [wx.chooseWXPay 微信支付(单页面)](https://blog.csdn.net/zhwangchao/article/details/100612795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值