微信小程序支付流程（前端）_前端微信小程序支付流程，前端开发课程培训

用户57923016702
326 阅读3分钟

微信小程序的支付只要用到官方的支付API ： wx.requestPayment(Object object)
官方文档地址：developers.weixin.qq.com/miniprogram…

1、总体流程

一般情况下，前端接触到的支付流程是这样的：商品页选择商品 ——> 提交商品订单（跳转到确认订单页） ——> 确认/选择收货地址 ——> 确认提交订单 ——> 支付 ——> 支付成功/失败

在这里插入图片描述

2、wx.requestPayment(Object object)

调用 wx.requestPayment(Object object) 需要携带的参数如下，支付成功后在success成功的回调内做对应操作

 wx.requestPayment({
            timeStamp: 1414561699,   // 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
            nonceStr: 'xxxxxx',   // 随机字符串，长度为32个字符以下
            package: 'xxxxxxxxxxxx',  // 统一下单接口返回的 prepay\_id 参数值，提交格式如：prepay\_id=\*\*\*
            signType: 'MD5',  // 签名算法，应与后台下单时的值一致
            paySign: 'xxxxxxxxxx', // 签名，具体见微信支付文档
            success (res) { // 成功的回调
                wx.showToast({title: '付款成功'})
            }, 
            fail (res) { // 失败的回调
                wx.showToast({title: '支付失败',icon: 'none'})
            }
          })
})

3、支付

支付成功后在success的回调内做对应操作，可以跳转到支付成功页面，让用户在此页面点击查看订单或者在此页面点击浏览更多商品。
如果支付失败，就跳转到待付款页面，用户可以在15分钟内继续完成支付

注意：
1、在操作商品数量计算价格这里，请求计算价格的接口，此处可如果有接口，一定要请求接口计算，因为前端计算价格不安全。
2、在计算价格这块，优惠券选择了也要重新计算价格。通常在点击购买的这一步就直接请求优惠券接口，返回当前最优的优惠券搭配以及计算价格并渲染到页面，用户自主更改优惠券搭配后需要重新计算价格。

4、完整的微信支付流程（前端、后端、微信后台）

ES6

  • 列举常用的ES6特性：

  • 箭头函数需要注意哪些地方？

  • let、const、var

  • 拓展：var方式定义的变量有什么样的bug？

  • Set数据结构

  • 拓展：数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求？

  • 有哪些参数传值的方法？

  • 你使用过哪些方法，来提高微信小程序的应用速度？

  • 小程序和原生App哪个好？

  • 简述微信小程序原理？

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题？

其他知识点面试

  • webpack的原理

  • webpack的loader和plugin的区别？

  • 怎么使用webpack对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

  • 描述一下二叉树, 并说明二叉树的几种遍历方式?

  • 项目类问题

  • 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。 开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝