微信小程序支付功能全流程实践

前言

微信小程序为电商类小程序，提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能，方便、快捷。小程序开发者在开发小程序时，支付流程是必然要接触到，今天胡哥就小程序支付的全流程为大家一一细说，让小伙伴能快速得掌握小程序支付能力，避免踩坑！

知己知彼，方能百战不殆 - 小程序支付流程图

举个栗子🌰：

某用户小明在某电商小程序上购买一块肥皂，从浏览、下单到支付经历了什么样的过程呢？

1. 打开电商小程序，搜索浏览到某雕肥皂，点击查看详情后，发现大小、丝滑程度都很合适，点击直接下单
2. wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
3. 在下单时，小程序需要将小明购买的商品Id，商品数量，以及小明这个用户的openId传送到服务器
4. 服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息(必须字段信息将在下文进行详细说明)
5. 小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付

小结

进行微信支付，在小程序端我们主要做三件事：

注：服务端调用统一下单API、签名算法不再本次分享讨论范围内，请期待胡哥的另外一次分享。

1. 使用**wx.login**获取临时登录凭证code,发送到后端获取openId

   1wx.login({
   2  success (res) {
   3    if (res.code) {
   4      // 发起请求，换取openId
   5      wx.request({
   6        url: '',
   7        data: {
   8          code: res.code
   9        }
   10      })
   11    }
   12  }
   13})
   

2. 将**openId**以及相应需要的商品信息发送到后端，换取服务端进行的签名等信息

   1wx.request({
   2  url: '',
   3  data: {
   4    openId: '',
   5    num: 1,
   6    id: '111'
   7  }
   8})
   

3. 接收返回的信息（必须要包含发起微信支付**wx.requestPayment的参数**），发起微信支付

   1wx.requestPayment({
   2  // 时间戳
   3  timeStamp: '',
   4  // 随机字符串
   5  nonceStr: '',
   6  // 统一下单接口返回的 prepay_id 参数值
   7  package: '',
   8  // 签名类型
   9  signType: '',
   10  // 签名
   11  paySign: '',
   12  // 调用成功回调
   13  success () {},
   14  // 失败回调
   15  fail () {},
   16  // 接口调用结束回调
   17  complete () {}
   18})
   

   注意：以上信息中timeStamp、nonceStr 、prepay_id、signType、paySign各参数均建议必须都由服务端返回（这样会尽最大可能性保证签名数据一致性），小程序端不做任何处理

基于Taro的微信支付实例

1import Taro, { Component } from '@tarojs/taro'
2import { View, Text, Button } from '@tarojs/components'
3import './index.scss'
4
5export default class Index extends Component {
6
7  config = {
8    navigationBarTitleText: '首页'
9  }
10
11  componentWillMount () { }
12
13  async componentDidMount () { 
14  }
15
16  componentWillUnmount () { }
17
18  componentDidShow () { }
19
20  componentDidHide () { }
21
22  /**
23   * sendOrderInfo()
24   * @description 提交订单信息，获取支付凭证，唤起支付
25   */
26  async sendOrderInfo () {
27    // 获取临时登录凭证code
28    let codeData = await Taro.login()
29    // 换取openId
30    let openId = ''
31    if (codeData.code) {
32      let res = await Taro.request({
33        // 定义的后端换取openId的接口
34        url: 'https://www.justbecoder.com/getLogin',
35        data: {
36          code: codeData.code
37        }
38      })
39      if (res && res.code === 0) {
40        openId = res.openId
41      }
42    }
43    // 发送openId以及对应的商品信息
44    let data = await Taro.request({
45      url: 'https://www.justbecoder.com/createdOrder',
46      data: {
47        openId,
48        // 实际情况的商品数量
49        num: 1,
50        // 实际情况的商品Id
51        id: 111,
52      }
53    })
54    // code === 0 表示提交订单成功，返回需要的签名信息等
55    if (data && data.code === 0) {
56      let {
57        timeStamp,
58        nonceStr,
59        prepay_id,
60        signType,
61        paySign
62      } = data.payInfo
63      // 唤起支付，按小程序要求格式发送参数
64      let payData = await Taro.requestPayment({
65        timeStamp,
66        nonceStr,
67        package: 'prepay_id=' + prepay_id,
68        signType,
69        paySign
70      })
71      if (payData && payData.errMsg === 'requestPayment:ok') {
72        Taro.showModal({
73          title: '操作提示',
74          content: '支付成功',
75          showCancel: false,
76          confirmText: '确定'
77        })
78      } else {
79        Taro.showModal({
80          title: '操作提示',
81          content: '支付失败，请重新尝试',
82          showCancel: false,
83          confirmText: '确定'
84        })
85      }
86    }
87  }
88
89  render () {
90    return (
91      <View className='index'>
92        <Button onClick={this.sendOrderInfo}>立即下单</Button>
93      </View>
94    )
95  }
96}

效果图

结语

在实际项目操作中，大家把接口换成自己的可用接口即可。

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得**收藏、转发、点击右下角按钮在看**，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！