vue

关于在h5页面调用微信支付

2022-03-20  本文已影响0人  Morbid_D

1.先装npm i weixin-jsapi -S

2.在对应的页面中 import wx from 'weixin-jsapi'

官方文档中使用的timeStamp 改为timestamp

代码如下:

pay(payData){    

      wx.config({

        debug: false, // 这里一般在测试阶段先用ture,等打包给后台的时候就改回false,

        appId: payData.appId, // 必填,公众号的唯一标识

        timestamp: payData.timeStamp, // 必填,生成签名的时间戳

        nonceStr: payData.nonceStr, // 必填,生成签名的随机串

        package:payData.package,

        signType:payData.signType,

        paySign: payData.paySign, // 必填,签名

        jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表

      })

      wx.ready(() => {

        wx.checkJsApi({

          jsApiList: ['chooseWXPay'],

          success:function(res){

            console.log("seccess")

            console.log('支付的调取', res)

          },

          fail:function(res){

            console.log("fail");

            console.log(res) }

          })

        wx.chooseWXPay({

            // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符

            appId: payData.appId,

            timestamp: payData.timeStamp, // 必填,生成签名的时间戳

            nonceStr: payData.nonceStr, // 必填,生成签名的随机串

            package:payData.package,

            signType:payData.signType,

            paySign: payData.paySign, // 必填,签名

            success: function (res) {  // 支付成功后的回调函数

              // alert('支付成功的信息'+JSON.stringify(res))

              console.log('支付成功' + res)

            },

            fail: function (reg) {

              console.log('支付失败' + res)

              // alert('支付失败的信息' +JSON.stringify(reg))

            }

          })

      })

      wx.error(err => {

        alert(err)

      })

    },

上一篇下一篇

猜你喜欢

热点阅读