uniapp 实现支付功能

GQ888
668 阅读2分钟

无论是在手机端还是小程序端、或是 H5 端，支付功功能都是非常常见的功能了，实际上在 uniapp 框架下实现整个支付流程并不复杂。

微信开放平台中申请开通支付功能后，在项目中的 manifest.json 文件配置好支付的部分，按照不同的端进行实现，就可以使用支付功能了。

支付的过程可以拆分为三个步骤：

    1. 支付前：
    • 在 manifest.json 文件中的App模块配置设置支付权限
    • 获取用户的 openid（需要先授权登录，再进行获取，获取到的 openid 作为下一步中后端接口传入的参数）
    • 调用后端接口，获取支付所需的参数
    1. 支付：调用 uniapp 的支付 API ：uni.requestPayment
    1. 支付后，
    • 支付成功：更新用户信息、优惠券数据等等
    • 支付失败：进行用户提示，重新进行支付流程

一、配置 manifest.json

在 manifest.json 的 【App模块配置】 中勾选 payment(支付)，选择需要开通支付权限的平台

image.png

注：微信支付需要输入对应的 AppID（在微信开发者中心可以查询到）

image.png

二、获取用户 openid

uniapp 中的 uni.login API（授权登录）可以获取到 code 值（loginRes 中可以直接渠取到），再使用 code 请求接口获取 openid

实现代码如下：

uni.login({
    provider: 'weixin',
    success: function (loginRes) {
        // 获取 code、openid
    }
})

　-后台通过code、appid、AppSecret等获取openid和session_key

uni.requestPayment

uniapp 为我们提供了支付相关的 API ：uni.requestPayment，它统一了各平台的客户端支付 API，支持小程序和App。

参数：

  • provider：
    • wxpay：微信
    • alipay：支付宝
  • orderInfo：
    • 订单数据，需要先请求后端接口获取后传入
    • 一般会包含 appid、noncestr（随机字符串）、timestamp（时间戳）、sign（签名，比如MD5）等等

实现代码如下：

uni.requestPayment({
    provider: 'wxpay',
    orderInfo: orderData,
    success: function(res) {
      uni.showToast({title: '支付成功'})
    },
    fail: function(err) {
      uni.showToast({title: '支付失败'})
    },
})

进一步封装

在实际开发中，可能会有适配不同端的情况，这时候就需要进行进一步的封装：

  • 如果是 App 或者小程序端，按照上述步骤使用 uni.requestPayment 进行支付处理即可，
  • 如果是 H5 端，需要通过 引入 jweixin （或是使用对应的 SDK）进行操作：

const jweixin = require("jweixin-module");

jweixin.config( ... )

jweixin.ready( ... )

avatar
文章
阅读
粉丝