前言

微信小程序是电子商务类别小程序，它提供了非常完整，出色且安全的付款功能。在小程序中，可以调用微信的API来完成支付功能，这既方便又快捷。 小程序开发人员开发小程序时，必然会触及付款过程。今天，胡歌将为大家详细介绍小程序付款的全过程，以便朋友们可以快速掌握小程序付款能力，避免踩坑！

了解自己和敌人，让您在所有战斗中都能生存-小程序付款流程图

小程序付款交互流程图

给我个栗子？：

一个用户，小明，在一家电子商务公司小程序上购买了一块肥皂。从浏览，下订单到付款的过程是什么？

打开电子商务小程序，搜索并浏览到特定的雕刻肥皂，单击以查看详细信息，发现大小和柔滑度均合适，直接单击订购wx.login以获取用户的临时登录凭证代码，并将其发送到后端服务器在下订单时交换openId，小程序需要将购买的用户Xiaoming的产品ID，产品数量和openId发送到服务器服务器。在收到产品ID，产品数量和openId之后，服务器将生成服务期订单数据。经过某种签名算法后，向微信发送付款请求以获得预付款订单信息（prepay_id），同时，使用相应的规则再次对获得的数据进行签名，并在必要时回复小程序信息（必填字段信息将在下面进行详细描述）小程序获得相应的参数后，调用wx.requestPayment（）发起微信付款，唤醒付款工作台并执行付款摘要

对于微信付款，我们主要在小程序方面做三件事：

注意：调用统一订单API和签名算法的服务器不再属于此共享讨论的范围，请期待Hu的另一次共享。

使用wx.login获取临时登录凭证代码，将其发送到后端以获取openIdwx.login（{成功（res）{if（res.code）{//发起请求以换取openIdwx.request （{url：''，数据：{code：res.code}}）}}}）将openId和相应的必需产品信息发送到后端，以交换服务器wx.request（{ url：''，data：{openId：''，num：1，id：'111'}}）接收返回的信息（必须包括用于启动微信付款wx.requestPayment的参数），并启动微信 Payment wx.requestPayment（{//时间戳timeStamp：''，//随机字符串nonceStr：''，//统一订单接口返回的prepay_id参数值包：''，//签名类型signType：''，//签名paySign：''，//调用成功的回调成功（）{}，//失败的回调fail（）{}，//接口调用完成的回调callback complete（）{}}）注意：在以上信息中，timeStamp的参数，nonceStr， prepay_id，signType和paySign都是所有建议必须由服务器返回（这将尽可能确保签名数据的一致性），并且小程序端将不会基于Taro的微信付款进行任何处理实例

import Taro, { Component } from '@tarojs/taro'import { View, Text, Button } from '@tarojs/components'import './index.scss'export default class Index extends Component { config = { navigationBarTitleText: '首页' } componentWillMount () { } async componentDidMount () { } componentWillUnmount () { } componentDidShow () { } componentDidHide () { } /** * sendOrderInfo() * @description 提交订单信息，获取支付凭证，唤起支付 */ async sendOrderInfo () { // 获取临时登录凭证code let codeData = await Taro.login() // 换取openId let openId = '' if (codeData.code) { let res = await Taro.request({ // 定义的后端换取openId的接口 url: 'https://www.justbecoder.com/getLogin', data: { code: codeData.code } }) if (res && res.code === 0) { openId = res.openId } } // 发送openId以及对应的商品信息 let data = await Taro.requrest({ url: 'https://www.justbecoder.com/createdOrder', data: { openId, // 实际情况的商品数量 num: 1, // 实际情况的商品Id id: 111, } }) // code === 0 表示提交订单成功，返回需要的签名信息等 if (data && data.code === 0) { let { timeStamp, nonceStr, prepay_id, signType, paySign } = data.payInfo // 唤起支付，按小程序要求格式发送参数 let payData = await Taro.requestPayment({ timeStamp, nonceStr, package: 'prepay_id=' + prepay_id, signType, paySign }) if (payData && payData.errMsg === 'requestPayment:ok') { Taro.showModal({ title: '操作提示', content: '支付成功', showCancel: false, confirmText: '确定' }) } else { Taro.showModal({ title: '操作提示', content: '支付失败，请重新尝试', showCancel: false, confirmText: '确定' }) } } } render () { return ( 立即下单 ) }}

效果图片

调用微信付款工作台

结论

在实际的项目操作中，您可以使用自己的可用接口替换该接口。

后记