微信小程序Ⅰ [关于微信支付的一点思路]
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②. 后期再做补充
相关文章推荐
- 关于.net制作安装程序时在应用程序安装完成之后,又接着执行第三方应用程序的安装怎么做的一点思路
- 关于微信小程序的一点个人总结
- 微信小程序中的微信支付js代码和流程详解
- 关于微信小程序发起的请求不能使用session的解决办法
- [原]关于程序性能问题的一点想法
- 微信小程序-微信支付详解
- 微信小程序 - 实现微信支付
- PHP:微信小程序 微信支付服务端集成实例详解及源码下载
- 微信小程序关于wx.redirectTo、wx.navigateTo失效问题
- 关于微信小程序的基本知识
- 关于微信小程序的资料搜集
- 关于微信及微信小程序的理解
- 关于微信小程序1
- 关于mysql 3.0的注射的一点思路
- 关于textBox长度控制的一点小程序
- 转载:移动端+微信小程序实现,手机端滑动分页代码思路(ajax)
- 关于Spring JDBC RowMapper的一点改进思路
- 关于微信小程序循环以及嵌套循环的总结
- 关于微信的一些总结(一天进步一点,坚持不懈,成功会慢慢向你走进)