专栏首页疯狂的小程序微信小程序充值操作流程
原创

微信小程序充值操作流程

微信小程序的充值流程与 H5 或 公众号大致差不多,这里简单说一下前端在充值时候的一些操作流程。

用户在小程序中发起充值请求时,一般会先请求自己的服务器,将充值的参数发送给后端,然后后端会去请求微信充值,得到微信返回的统一下单的参数再返回给前端。前端调用 wx.requestPayment API 即可唤起微信小程序的支付页面,此时用户输入正确的支付密码即可支付成功。具体流程如下:

1. 比如说页面上有一个充值按钮,点击充值按钮时可以获取到用户请求充值的参数。  

wx.request({

  url: "后端的充值接口",

method: "POST",

dataType: "json",

header: {

'content-type': 'application/x-www-form-urlencoded'

},

data: {

amount: amount, // 充值金额

token: token,

openId: openId

},

success: function (res) {

if (res.data.code == '1') {

that.setData({

payParams: res.data.data // 后端从微信得到的统一下单的参数

})

that.xcxPay(); // 拿到统一下单的参数后唤起微信支付页面

}

}

})

2. 调用 wx.requestPayment 唤起微信支付界面。

wx.requestPayment({

  'timeStamp': that.data.payParams.timestamp.toString(), // 时间戳必须是字符串,否则会报错

'nonceStr': that.data.payParams.str,

'package': 'prepay_id=' + that.data.payParams.prepay_id, // 这里的值必须是 prepay_id=XXXXXXXXX 的格式,否则也会报错

'signType': 'MD5',

'paySign': that.data.payParams.sign,

'success': function (res) {

    // 这里应该是 res.errMsg , 跟公众号的支付返回的参数不一样,公众号是 err_msg, 就因为没注意到这个,折腾了很长时间

  if(res.errMsg == "requestPayment:ok"){ // 调用支付成功

  wx.redirectTo({

url: '../chargelist/chargelist' // 充值成功后的处理,可以跳转,也可以根据自己的需要做其他处理

})

}else if(res.errMsg == 'requestPayment:cancel'){

      // 用户取消支付的操作

    }

},

'fail': function (res) {

  return false;

},

'complete': function (res) { }

})

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序火爆的因素

    几天前,我重新翻阅了2017年5月写的一篇关于小程序的文章,文章虽青涩但还算精确,文中阐述了三个观点:

    疯狂的小程序
  • 2017小程序发展大事件和未来3大趋势分析

    小程序风口的产生与移动互联网流量红利逐渐消逝关系密切。移动端用户的争夺,已从增量市场转向存量市场,从抢占用户转向抢占用户时间。然而,却有一块尚未完全开化的巨大流...

    疯狂的小程序
  • 初探小程序之运营及未来方向

    网络流传微信会做操作系统,但这里指的操作系统并不是传统意义上的操作系统,他不一定要承载办公等所有需求,但发力点一定在数据上。只有好的数据、大量的数据才能在下一代...

    疯狂的小程序
  • 小程序利用富文本编辑器editor编辑文章

    https://blog.csdn.net/qq_29789057/article/details/90108048

    hotqin888
  • VUX 单页微信开发的那些事

    VUX是微信推出的WeUI的非官方VUE的非官方实现,主要针对移动端微信前端开发,属于个人项目,目前在GitHub已有8k star,使用webpack 2以及...

    MasterVin
  • 面试被问http协议?这篇文章足够覆盖所有相关问题!

    ? HTTP超文本传输协议 http使用面向连接的TCP作为传输层协议。http本身无连接。 请求报文 CRLF是回车换行 ? 方法为GET的请求报...

    小小科
  • 面试被问http协议?这篇文章足够覆盖所有相关问题!

    以前使用的协议是HTTP/1.0 ,现在升级为HTTP/1.1。两个的区别是什么?

    小小科
  • 解决6.5.16及以上版本微信内部M页不能唤起APP

    最近微信唤起app的数据急速下降,产品同学告诉我们大事来了,微信不能唤起Android的App了!!

    静默加载
  • 微信小程序不行了?看小马哥带你忆童年

    在微信小程序刚刚推出时,所有人都感觉这是开发领域的一个新的巨浪,很多人都想可以在这个领域大有作为了。而一路走来,微信小程序的诸多问题又让满心欢喜的开发者恢复了平...

    企鹅号小编
  • 单例模式

    /*************************************************************************

    程序员小王

扫码关注云+社区

领取腾讯云代金券