uniapp微信小程序微信支付封装使用_uniapp 微信支付封装一个公用方法

uniapp微信小程序微信支付封装使用

1.创建一个js文件

下面展示一些 内联代码片。

const wxpay = function(obj, that){
	let timeStamp = obj.timeStamp ? obj.timeStamp : '';
	let nonceStr = obj.nonceStr ? obj.nonceStr : '';
	let _package = obj.package ? obj.package : '';
	let signType = obj.signType ? obj.signType : '';
	let paySign = obj.paySign ? obj.paySign : '';
	
	return new Promise(function(resolve, reject){
		wx.requestPayment({
		  timeStamp: timeStamp,
		  nonceStr: nonceStr,
		  package: _package,
		  signType: signType,
		  paySign: paySign,
		  success (res) { 
			  console.log(res);
			  resolve(res);
		  },
		  fail (res) { 
			  reject(res);
		  }
		})
	})
}

export default {
	wxpay:wxpay
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.在App.vue中如下引入

下面展示一些 内联代码片。

<script>
	import pay from "路径";
	export default {
		globalData:{
			pay(obj){
				let payType = obj.payType ? obj.payType : "wxPay";
				if (payType == "wxPay") {
				 // 微信支付
				 return pay.wxpay(obj,this)
				}
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.在页面中调用支付

下面展示一些 内联代码片。

let app = getApp()
//使用封装的请求方法 详情看我另一篇文章
app.globalData.request({
	url : "支付接口",
	data: {
		传递参数: 传递参数
	}
}).then(function(res){
	res.data.data.payType = "wxPay";
	//输出res.data.data查看属性名是否跟封装的相同 不同的话自己按需更改
	app.globalData.pay(res.data.data).then(function(res){
		// 跳转到
		uni.showToast({
			title:"付款成功"
		})
		setTimeout(function(){
			uni.reLaunch({
				url:"跳转相应页面"
			})
		})
	})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这样使用是不是很方便呢 欢迎大家交流。