主要逻辑层
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
30
| // app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
|
视图层
1
2
3
4
| <!-- pay.wxml -->
<view class="container">
<button bindtap="payoff">支付按钮</button>
</view>
|
逻辑层
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| // pay.js
// 获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
onLoad: function () {
console.log('onLoad')
},
// 点击按钮触发事件函数
payoff: function(e){
var that = this;
wx.login({
success: function(res) {
that.getOpenId(res.code);
}
});
},
// 获取openid
getOpenId: function(code){
var that = this;
wx.request({
url: '', // getopenid
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {'code':code},
success: function(res) {
var openId = res.data.openid;
that.xiadan(openId);
}
})
},
// 下单
xiadan: function(openId){
var that = this;
wx.request({
url: '', // xiadan
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {'openid':openId},
success: function(res) {
var prepay_id = res.data.prepay_id;
console.log("统一下单返回 prepay_id:"+prepay_id);
that.sign(prepay_id);
}
})
},
// 签名
sign: function(prepay_id){
var that = this;
wx.request({
url: '',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {'repay_id':prepay_id},
success: function(res) {
that.requestPayment(res.data);
}
})
},
// 申请支付
requestPayment: function(obj){
wx.requestPayment({
'timeStamp': obj.timeStamp,
'nonceStr': obj.nonceStr,
'package': obj.package,
'signType': obj.signType,
'paySign': obj.paySign,
'success':function(res){
},
'fail':function(res){
}
})
}
})
|
微信支付前端逻辑不复杂，主要和后端配合获取支付请求参数，里面也是有比较多的坑的~
