1、支付js引用添加
<script src="http://res2./open/js/jweixin-1.4.0.js"></script>
2、具体的实现流程:
1.首先获取到支付订单号
2.根据支付订单号获取支付参数
3.通过JavaScript调用getBrandWCPayRequest接口,发起微信支付请求,用户进入支付流程
4.用户成功支付点击完成按钮后,商户的前端会收到JavaScript的返回值。商户可直接跳转到支付成功的静态页面进行展示。
5.商户后台收到来自微信开放平台的支付成功回调通知,标志该笔订单支付成功。
3、支付实例
//假设用户进行充值
async chargeClick() {if (!this.validaPhone()) return;if (!this.userName) {this.$toast('请输入会员姓名');return;}if (!this.cashMoney || isNaN(this.cashMoney) || this.cashMoney <= 0) {this.$toast('请输入正确金额');return;}if ((this.cashMoney + '').split('.')[1] && (this.cashMoney + '').split('.')[1].length > 2) {this.$toast('金额最多输入两位小数');return;}let data = {ShopNo: this.shopId, // 门店编号,Name: this.userName, //会员姓名,Phone: this.userPhone, //手机号,RechargeMoney: +this.cashMoney //充值金额};let res = await customerRecharge(data);if (res.IsSuccess) {this.getPayParams(res.Result.OuterMiJiRechargeOrderNo);}},//通过支付订单号获取支付参数async getPayParams(orderNo) {const params = {M: false,OrderNo: orderNo};let res = await getwxjsapiparam(params);if (res.IsSuccess) {this.appParams = res.Result;this.initPay();}},//获取到支付参数后调用微信支付api 进行支付initPay() {if (typeof WeixinJSBridge == 'undefined') {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);}} else {this.onBridgeReady();}},onBridgeReady() {const that = this;WeixinJSBridge.invoke('getBrandWCPayRequest', this.appParams, function(res) {var msg = res.err_msg.split(':')[1];if (msg === 'ok') {// that.$toast('支付成功');that.$router.replace('/recharge/rechargeSuccess');} else if (msg === 'cancel') {that.$toast('用户取消支付');} else {that.$toast(msg);}});},