您的位置:首页 > 移动开发 > 微信开发

微信小程序Ⅰ [关于微信支付的一点思路]

2018-03-06 18:51 281 查看

背景

首先,小程序端的微信支付功能我还没有做,但是之前做过网页版已经微信端唤醒方式的微信支付

因为还需要申请新的域名,过几天才能正式测试,此处是在参考小程序官方文档后的思路

因此文可自成一体,所以被我摘出来了,全文可参考小白的 微信小程序实例——天气预报开发笔记

摸索思考

①. 参考demo获取思路

根据官方
Demo
中对此功能的一条重要注释如下:

// 此处需要先调用 wx.login 方法获取 code,然后在服务端调用微信接口使用 code 换取 下单用户的 openId
// 具体文档参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161230#wxloginobject[/code] 


②. 服务端要创建接口返回用户openId

服务端代码是 java 的建议参考文章:微信小程序调用微信登陆获取openid及用户信息 java做为服务端

根据网上多数编码同行的介绍可知,微信的域名是无法绑定到自己的小程序中的,但是根据前面的经验,可以在自己的服务端借用参数
code
获取
openId
,最后以
json
数据方式返回小程序即可

③. 请求微信支付Url

假设服务端已经能够正确返回我们所需要的
openId
,此时我们可以考虑唤醒微信支付了,然而根据接口要求需要以下的多个参数:

wx.requestPayment({
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){
},
'fail':function(res){
}
})


所以在唤醒微信支付之前,需要先获取上述的参数,而根据之前实现微信支付的经验正好是返回这些信息的



如此一来的思路就是,在服务端还需有一个支付接口,可返回我们需要的上述参数

想了解更多信息,可以查看 微信支付接口文档

或者参考我之前的一篇文章:微信公众平台开发[4] —— ThinkPHP 框架下微信支付

核心代码参考

此代码是参考官方demo和自己的思路后补充完善的小程序端代码

注意看注释,需要获取相应数据

requestPayment: function () {
var self = this
self.setData({
loading: true
})
// 此处需要先调用wx.login方法获取code,然后在服务端调用微信接口使用code换取 下单用户 的openId
// 具体文档参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161230#wxloginobject wx.login({
success: function (res) {
if (res.code) {
//发起网络请求
console.log('code:' + res.code)
wx.request({
url: 'https://api.youself.com/getOpenId', //此处应在服务端根据得到的 code 获取用户的 openid
data: {
code: res.code
},
success: function (res) {
console.log('拉取openid成功', res)
self.setData({
openid: 'o0rJUwexa08tg4pyFi1tkvJKhxHY' //此处假设已经获得了用户的openID
})
//访问服务端 微信支付接口paymentUrl,从而获取后面所需的重要参数
wx.request({
url: 'https://api.yourself.com/wxpayment', //此处为举例接口
data: {
openid
},
method: 'GET',
success: function (res) {
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
var payargs = res.data.payargs
//唤醒微信支付
wx.requestPayment({
timeStamp: timestamp+'',
nonceStr: 'payargs.nonceStr',
package: 'payargs.package',
signType: 'MD5',
paySign: 'payargs.paySign',
'success': function (res) {
console.log('支付-success')
},
'fail': function (res) {
wx.showToast({
title: '支付测试中...',
icon: 'fail',
image: '',
duration: 2000,
mask: true,
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
console.log('支付-fail')
}
})

self.setData({
loading: false
})
}
})
},
fail: function (res) {
console.log('拉取用户openid失败,将无法正常使用开放接口等服务', res)
self.setData({
loading: false
})
}
})
} else {
console.log('获取用户登录态失败!' + res.errMsg)
}
}
});
}


附录

①. 注意

我们所要访问的服务端接口,要保证其域名已经绑定,注意一点,要求协议为 https

②. 后期再做补充

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  小程序