300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > h5微信本地调试 vue_Vue 移动端微信内H5调起支付(利用js sdk)

h5微信本地调试 vue_Vue 移动端微信内H5调起支付(利用js sdk)

时间:2022-06-03 20:31:44

相关推荐

h5微信本地调试 vue_Vue 移动端微信内H5调起支付(利用js sdk)

前端的写法

1.封装wxPay.js

import wx from 'weixin-js-sdk' //先下载后引入

export function wexinPay(data) {

return new Promise((resolve, reject) => {

// 后台传入数据

const {

appId,

timeStamp,

nonceStr,

signature,

package,

paySign,

signType

} = data

// 验证微信环境

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

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

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

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

signature: signature, // 必填,签名,见附录1

jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

})

wx.ready(function() {

wx.chooseWXPay({

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

nonceStr: nonceStr, // 支付签名随机串,不长于 32 位

package: packages, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)

signType: signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'

paySign: paySign, // 支付签名

success: function(res) {

// 支付成功后的回调函数

resolve(res)

},

fail: function(res) {

// 失败回调函数

reject({

payFail: res

})

}

})

})

wx.error(function(res) {

reject({

configFail: res

})

// config信息验证失败会执行error函数

})

})

}

2.使用方法

import wxPay from '文件路径'

wexinPay(res.data).then(res=>{

console.log("支付成功")

// do something

}).catch(err=>{

console.log('支付失败')

// do something

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。