标签：code 封装 微信 chooseWXPay h5 msg nonceStr data wx

1、安装 weixin-js-sdk

npm install weixin-js-sdk

2、引用 weixin-js-sdk

const wx = require('weixin-js-sdk');

3、结合后台传过来的参数

wx.config({
				debug: false,
				appId: data.appId,
				timestamp: data.timeStamp,
				nonceStr: data.nonceStr,
				signature: data.paySign,
				jsApiList: ['chooseWXPay']
			});
			wx.ready(() => {
				wx.chooseWXPay({
					timestamp: data.timeStamp, //这个字段是为字符串后端返回时需检查
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success(res) {
						r({
							code: 0,
							msg: "成功"
						});
					},
					cancel() {
						r({
							code: 1,
							msg: "取消"
						});
					},
					fail(err) {
						r({
							code: 2,
							msg: err.errMsg.split(':')[1] || '支付失败!'
						});
					},
					// 无论失败成功都会执行
					complete(e) {
						// e.errMsg三种状态 1.chooseWXPay:ok 支付成功 2: chooseWXPay:cancel 支付取消 3:chooseWXPay:fail 支付失败
						if (e.errMsg === 'chooseWXPay:ok') {
							if (jumpUrl) {
								window.location.href = jumpUrl
							} else {
								window.location.reload()
							}
						}
					}
				});
			});
			wx.error(function(err) {
				r({
					code: 2,
					msg: '支付失败!'
				});
			});
		})

　完整代码(新建js文件放置)：

const wx = require('weixin-js-sdk');
export default {
	wexinPay(data, jumpUrl) {
		return new Promise(r => {
			wx.config({
				debug: false,
				appId: data.appId,
				timestamp: data.timeStamp,
				nonceStr: data.nonceStr,
				signature: data.paySign,
				jsApiList: ['chooseWXPay']
			});
			wx.ready(() => {
				wx.chooseWXPay({
					timestamp: data.timeStamp, //这个字段是为字符串后端返回时需检查
					nonceStr: data.nonceStr,
					package: data.packageValue,
					signType: data.signType,
					paySign: data.paySign,
					success(res) {
						r({
							code: 0,
							msg: "成功"
						});
					},
					cancel() {
						r({
							code: 1,
							msg: "取消"
						});
					},
					fail(err) {
						r({
							code: 2,
							msg: err.errMsg.split(':')[1] || '支付失败!'
						});
					},
					// 无论失败成功都会执行
					complete(e) {
						// e.errMsg三种状态 1.chooseWXPay:ok 支付成功 2: chooseWXPay:cancel 支付取消 3:chooseWXPay:fail 支付失败
						if (e.errMsg === 'chooseWXPay:ok') {
							if (jumpUrl) {
								window.location.href = jumpUrl
							} else {
								window.location.reload()
							}
						}
					}
				});
			});
			wx.error(function(err) {
				r({
					code: 2,
					msg: '支付失败!'
				});
			});
		})
	}
}

调用：

import $wxPay from '@/utils/wxPay.js'

this.$u.api.wechatPayApi({
					orderList: this.curOrderList,
					openid: this.vuex_wxinfo.openId
				}).then(res => {
					if (res.code === 200) {
						$wxPay.wexinPay(res.data.wx).then(res1 => {
							switch (Number(res1.code)) {
								case 0: // 成功
									//#ifdef H5
									window.location.reload();
									//#endif
									break;
								case 1: // 取消
									this.$refs.uToast.show({
										title: '已取消支付',
										type: 'info'
									});
									break;
								case 2: // 支付失败
									this.$refs.uToast.show({
										title: '支付失败，请检查!',
										type: 'error'
									});
									break;
							}
						})
					}
				})

自己根据后台接口适当调整！

标签：code,封装,微信,chooseWXPay,h5,msg,nonceStr,data,wx
来源： https://www.cnblogs.com/zaijin-yang/p/16540755.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。