上一篇内容 已经提起过,怎么唤醒微信支付已经实现支付功能,我这边的话就继续分享下怎么实现输入金额充值,你输入多少钱,就支付多少
前面的代码 都是在uni。login里面写的
它是先获取code ,然后在发送 得到自己 uni.requestPayment 所需要的参数,但是呢,有个问题,怎么把输入金额 input 的值 传递给 data里面?
所以代码要分开写,不要都写在 uni。login 里面
直接上代码
所有的代码都是写在methods 中的 ,之前我把获取code代码写到 mounted里,它微信支付唤起功能只执行了一次,
- getCode() {
- var that = this
- uni.login({
- provider: 'weixin',
- success(res) {
- that.code = res.code
- console.log(res.code, res, 'login');
- }
- })
- },
- getWeixin() {
- uni.request({
- url: uni.$http.baseUrl + '/uniapp/pay/getWeixinPayParameter',
- method: 'POST',
- data: {
- code: this.code,
- amount: +this.payDetail || +this.moneyValue
- },
- header: {
- // Authorization: uni.getStorageSync('token')
- Authorization: `Bearer ${uni.getStorageSync('token')}`
- },
- success: ({
- data: {
- obj: {
- weixinMap
- }
- }
- }) => {
- console.log(weixinMap);
- uni.requestPayment({
- provider: 'wxpay', // 服务提提供商
- timeStamp: weixinMap.timeStamp, // 时间戳
- nonceStr: weixinMap.nonceStr, // 随机字符串
- package: weixinMap.package,
- signType: weixinMap.signType, // 签名算法
- paySign: weixinMap.paySign, // 签名
- success: function(res) {
- console.log('支付成功', res);
- // 支付成功后重新渲染金额
- if (res.errMsg === "requestPayment:ok") {
- uni.request({
- url: uni.$http.baseUrl + '/uniapp/member/getMemberInfo',
- method: 'GET',
- header: {
- // Authorization: uni.getStorageSync('token')
- Authorization: `Bearer ${uni.getStorageSync('token')}`
- },
- success: (res) => {
- console.log(res);
- }
- })
- }
- },
- fail: function(err) {
- console.log('支付失败', err);
- }
- })
- }
- })
- },
amount 是 后端定义的 输入金额字段名,后面的值,自己写
之前我进入一个误区,那就是,一直把这两个方法放在同一个函数里面,让它们去执行,但是呢,不知为何,它总是先执行 发送微信请求的方法,后执行获取code的方法,我一直在想怎么让code方法先执行,试过各种的,最终想到了
点击充值按钮的时候执行 code方法,打开充值页面后,当用户点击 确定后执行 发送微信请求
这就完美解决了,