微信小程序的充值流程与 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) { }
})

微信小程序充值及充值回调后的处理的更多相关文章

  1. SpringBoot2.0微信小程序支付多次回调问题

    SpringBoot2.0微信小程序支付多次回调问题 WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等微信功能的后端开发. ...

  2. 直击根源:微信小程序中web-view再次刷新后页面需要退两次

    背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B ...

  3. 解决微信小程序使用switchTab跳转后页面不刷新的问题

    wx.switchTab({ url: '../index/index', success: function(e) { var page = getCurrentPages().pop(); if ...

  4. 微信小程序调用地图选取位置后返回信息

    先看一下wxml的代码,绑定个事件! <view class='carpool_data_all'> <view class='aa'> <text>*出发地< ...

  5. promise解决微信小程序中的request回调地狱

    //使用 request(url,methods ,data).then(res => { //服务器返回数据 console.log(res ); return request(url,met ...

  6. 微信小程序 和 laravel8 实现搜索后分页 加载

    Page({ /** * 页面的初始数据 */ data: { activity:{}, page:1, last_page : 0, keyword:'' }, //加载 scroll(e){ le ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序实现多选分享

    微信小程序拉取好友列表后,默认只能选一个分享,现在在分享回调onShareAppMessage里加上这段代码,拉取好友列表时,右上角会出现多选按钮,这样就解决了微信小程序安卓下只能单选分享的问题. / ...

  9. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  10. WordPress版微信小程序安装使用说明

    昨天在群里,有刚刚使用WordPress版微信小程序朋友,在问安装过程中的问题,这些问题是经常被问到,这至少说明两个问题: 1.我开发的程序安装和使用不够简易,无法通过简单的配置就可以使用,特别是如果 ...

随机推荐

  1. 初识HTML和WEB标准

    初识HTML和WEB标准 什么是 HTML? HTML 超文本标记语言的缩写(Hyper Text Markup Language) HTML 并不是编程语言,而是一种标记语言(markup lang ...

  2. Hadoop HBase概念学习系列之行、行键(十一)

    行是由列簇中的列组成.行根据行键依照字典顺序排序. HBase的行使用行键标识,可以使用行键查询整行的数据. 对同一个行键的访问都会落在同样的物理节点上.如果表包含2个列簇,属于两个列簇的文件还是保存 ...

  3. VS2015 无法启动IIS Express Web服务器(已解决)

    VS2015 无法启动IIS Express Web服务器 首先说一下我遇到问题的情况.这个项目是在公司电脑创建的,运行一直是正常的.今天把项目拷贝回来做. 可是到自己的电脑上,运行就提示 无法启动I ...

  4. Echarts使用小结

    还是先来简单的了解一下Echart是什么吧? ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前 ...

  5. debian安装及使用mysql

    在Debian中安装MySQL服务器是很方便的,使用apt-get命令即可完成. debian:~# apt-get install mysql-server mysql-client mysql-s ...

  6. JDBC规范(转)

    公司开发一直用的是ibatis,进来心血来潮想研究一下源码,可是发现自己的JDBC似乎已经忘得差不多了,为了自己能顺利的研读ibatis的源码,于是乎找到了 XIAO_DF的JDBC规范的博客,转到自 ...

  7. 基于easyui开发Web版Activiti流程定制器详解(六)——Draw2d的扩展(三)

    题外话: 最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇! 回顾: 前几篇介绍了一下设计器的界面和Draw2d基础知识,这篇讲解一下本设计器如何扩展Draw2d. 进入主题: 先 ...

  8. JNI学习笔记

    JNI是什么->一套c和java的互掉规则   为什么使用JNI 1.非常多敏感效率的代码已经用C实现了 2. JNI双向.java调用c,c调用java   Java集成本地代码问题 1.代码 ...

  9. 有料面试题之--Object里面的方法

    阿里的面试题里面有个题很奇妙:你知道Object类里面有哪些方法吗? 绝大部分猿类都知道 有hashcode .equals .clone.toString 只有部分人会回答有 wait和notify ...

  10. 【洛谷】【扩欧】P1516 青蛙的约会

    [题目描述] 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有 ...