- NPM安装方式(不会用NPM就不要用这种方式)
npm install jweixin-module --save
或者下载使用方式
下载地址:https://unpkg.com/jweixin-module@1.6.0/lib/index.js
**
准备工作做完了吧,
第一步,引入刚才我们要使用的文件
const wx = require(‘jweixin-module’);
**
第二步,然后你就需要对接一个接口,这个接口请求回来你要掉的微信支付所需要的一些签名什么的(跟后端要下)
差不多是这样的返回结果
记得parse就行啦!!数据拿回来了吧!然后的告诉微信你要干啥 ,所以要config
jweixin.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: w_pay.appId, // 必填,公众号的唯一标识
timestamp: w_pay.timestamp, // 必填,生成签名的时间戳
nonceStr: w_pay.nonceStr, // 必填,生成签名的随机串
signature: w_pay.signature, // 必填,签名
jsApiList: w_pay.jsApiList // 必填,需要使用的JS接口列表
});
第三步, 开始吊起支付
跟后端要签名等信息
wx.$api.index.wpayH5Info(location.href.split('#')[0], 'chooseWXPay').then(res1 => {
let w_pay = JSON.parse(res1.data)
console.log(w_pay, 'w_pay')
// jweixin.config({
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
// appId: w_pay.appId, // 必填,公众号的唯一标识
// timestamp: w_pay.timestamp, // 必填,生成签名的时间戳
// nonceStr: w_pay.nonceStr, // 必填,生成签名的随机串
// signature: w_pay.signature, // 必填,签名
// jsApiList: w_pay.jsApiList // 必填,需要使用的JS接口列表q
// });
jweixin.config(w_pay);
jweixin.ready(() => {
wx.$api.index.wechatH5(res.data.trade_no).then(res2 => {
let payInfo = JSON.parse(res2.data);
console.log(payInfo, 'payInfo')
jweixin.chooseWXPay({
timestamp: payInfo
.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: payInfo.nonceStr, // 支付签名随机串,不长于 32 位
package: payInfo.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: payInfo.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
paySign: payInfo.paySign, // 支付签名
success: function(res) {
console.log(res, '支付返回结果')
// 支付成功后的回调函数
if (res.errMsg == "requestPayment:ok") {
wx.showToast({
title: '支付成功',
icon: 'success'
});
setTimeout(() => {
if (this.isdeliver == 1) {
wx.reLaunch({
url: '/pages/order/order?orderType=rightsCoupons'
});
} else {
wx.reLaunch({
url: '/pages/order/order?orderType=rights'
});
}
}, 3000)
}
},
fail: res => {
if (this.isdeliver == 1) {
wx.reLaunch({
url: '/pages/order/order?orderType=rightsCoupons&stateType=unpay'
});
} else {
wx.reLaunch({
url: '/pages/order/order?orderType=rights&stateType=unpay'
})
}
}
})
})
})
}).catch(err => {
wx.showToast({
title: err.message,
icon: 'none'
})
})
**
总结:Uni-app - H5-调用微信支付步骤
1.引入jssdk
2.跟服务端要config数据
3.config成功后直接在跟服务端要签名数据!
4.根据签名吊起支付
对应相应代码,自己敲
**