HarmonyOS API 9 Release使用DevEco Studio实现简单支付功能总结（回溯自用）

最新推荐文章于 2024-08-30 15:14:22 发布

greenfinger_007

最新推荐文章于 2024-08-30 15:14:22 发布

阅读量862

点赞数 29

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/greenfinger_007/article/details/139976834

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、微信支付的业务流程
二、实现思路
三、总结

前言

在HarmonyOS开发者3.1/4.0版本配套的开发者文档中，微信支付功能是通过DevEco Service低代码开发平台实现的，这里分享一个使用DevEco Studio实现微信扫码支付的思路

一、微信支付的业务流程

微信支付业务流程图
点击订单支付按钮后，APP会将用户token和订单的基本信息发送至后端，后端接受后会生成一个新的订单id（orderid）并返回值APP；APP接收到orderid后向后端发起获取微信支付信息的请求，后端此时会返回一组微信支付信息的数据，其中的code_url（微信支付网址）是我们需要的关键数据，拿到code_url后使用华为自带的QRCode()方法将code_url解析成二维码并通过弹窗显示在页面上；用户支付成功后，会更改支付状态码，并和订单ID一起发送至后端，后端接收后更新支付状态，至此完成微信支付功能

二、实现思路

1.数据模型

使用Postman测试后端提供的API接口，根据后端传过来的数据建立数据模型：

//订单数据配置,支付数据
export class OrderDataConfigModel {
  orderid?: string = ''
  code_url?: string = ''
}
//创建订单返回的数据模型
export class SaveOrderModel {
  orderId?: string = ''
}
//微信支付返回的数据模型
export class WeiPayModel {
  info?: WeiPayInfoModel
}

export class WeiPayInfoModel {
  mch_id?: string = ''
  appid?: string = ''
  nonce_str?: string = ''
  prepay_id?: string = ''
  trade_type?: string = ''
  code_url?: string = ''
}

2.准备接口

使用自己封装好的Request工具类，发送post请求：

/** 创建订单 */
export const apiSaveOrder = (data: object) => {
  return Request.post<SaveOrderModel>('user/saveOrder', data)
}

/** 获取微信支付数据 */
export const getWechatPayData = (data: object) => {
  return Request.post<WeiPayModel>('user/wechatPay', data)
}

/** 完成支付 */
export const apiTestPay = (data: object) => {
  return Request.post<null>('user/testPay', data)
}

提示：切记在module.json5中将网络权限开启！

3.saveOrder方法

在页面中声明saveOrder方法，其实就是调用了apiSaveOrder接口：

//创建订单方法
  async saveOrder(){
    const orderInfo: SaveOrderModel = await apiSaveOrder({
      number: this.actionConfig.quantity,
      productId: this.actionConfig.spec.id,
      price: this.actionConfig.totalPrice,   //商品总价
      content: this.actionConfig.messageBoard
    })
    if (orderInfo && orderInfo.orderId) {   //如果创建订单成功，并且返回了orderId
      await this.requestGetWechatPayData({ orderid: orderInfo.orderId })
    }
  }

·小Tips1：涉及调用API的方法最好进行异步操作，这种异步编程的思想，可以提升系统的响应性和性能，这样在等待网络响应时，CPU可以执行其他任务，而不是闲置等待
·小Tips2：这里的if (... && ...)是一种常见的误处理方式，确保只有当订单成功创建后才继续执行后续操作

4.requestGetWechatPayData方法

声明一个requestGetWechatPayData方法发起获取微信支付信息的请求（本质上就是调用了getWechatPayData接口）：

 /** 获取微信支付数据 */
  async requestGetWechatPayData(params) {
    //获取微信支付数据（发送请求）
    const res: WeiPayModel = await getWechatPayData(params)
    this.orderDataConfig.orderid = params.orderid   //订单id
    this.orderDataConfig.code_url = res.info.code_url   //微信支付的url
    this.payDialogController.open()   //获取到上面两个数据之后再打开弹窗
  }

请求成功之后触发payDialogController.open()函数，将弹窗打开

5.payDialogController对象

声明一个payDialogController对象（将华为官方的CustomDialogController类实例化），传入builder构造函数和alignment对齐方式：

payDialogController: CustomDialogController = new CustomDialogController({
    builder: PayDialog({   //这里的PayDialog是自己封装好的支付弹窗组件，可以自己写然后调用的时候传参即可
      title:'扫码支付',
      codeUrl: this.orderDataConfig.code_url,
      payStatus: $payStatus,
      action: () => {
        this.payStatus = true   //支付状态默认为false（未支付），现在修改为true（已支付）
      }
    }),
    alignment: DialogAlignment.Default  // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示
  })

6.getPayStatus监听函数

支付状态一改变，就会触发getPayStatus监听函数，然后模拟完成了支付，将status（支付状态码）赋值为1，并且触发testPay函数：

@State @Watch('getPayStatus') payStatus: boolean = false   //默认是未支付状态

/** 监听改变支付状态 */
  async getPayStatus() {
    if (this.payStatus) {  //如果支付完成
      this.testPay(1)     //模拟完成了支付
      this.payStatus = false  //重新设置为false
    }
  }

7.testPay函数

异步调用apiTestPay接口，将payid和status发送给后端，完成支付:

 /** 修改订单状态（完成支付） */
  async testPay(status: number) {
    await apiTestPay({
      "payid": this.orderDataConfig.orderid,
      "status": status
    })
    //支付成功之后，跳转到订单列表页面
    router.pushUrl({ url: 'pages/Order/OrderListPage' })
  }