HarmonyOS API 9 Release利用DevEco Studio实现简朴付出功能总结（回溯自用）

提示：文章写完后，目次可以自动天生，怎样天生可参考右边的资助文档
  

---

前言

在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接口，根据后端传过来的数据创建数据模子：

1. //订单数据配置,支付数据
2. export class OrderDataConfigModel {
3.   orderid?: string = ''
4.   code_url?: string = ''
5. }
6. //创建订单返回的数据模型
7. export class SaveOrderModel {
8.   orderId?: string = ''
9. }
10. //微信支付返回的数据模型
11. export class WeiPayModel {
12.   info?: WeiPayInfoModel
13. }
15. export class WeiPayInfoModel {
16.   mch_id?: string = ''
17.   appid?: string = ''
18.   nonce_str?: string = ''
19.   prepay_id?: string = ''
20.   trade_type?: string = ''
21.   code_url?: string = ''
22. }

复制代码

2.准备接口

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

1. /** 创建订单 */
2. export const apiSaveOrder = (data: object) => {
3.   return Request.post<SaveOrderModel>('user/saveOrder', data)
4. }
6. /** 获取微信支付数据 */
7. export const getWechatPayData = (data: object) => {
8.   return Request.post<WeiPayModel>('user/wechatPay', data)
9. }
11. /** 完成支付 */
12. export const apiTestPay = (data: object) => {
13.   return Request.post<null>('user/testPay', data)
14. }

复制代码

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

---

3.saveOrder方法

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

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

复制代码

·小Tips1：涉及调用API的方法最好举行异步利用，这种异步编程的头脑，可以提拔体系的相应性和性能，如许在等候网络相应时，CPU可以实行其他任务，而不是闲置等候
·小Tips2：这里的if (... && ...)是一种常见的误处置处罚方式，确保只有当订单乐成创建后才继续实行后续利用

---

4.requestGetWechatPayData方法

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

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

复制代码

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

---

5.payDialogController对象

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

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

复制代码

---

6.getPayStatus监听函数

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

1. @State @Watch('getPayStatus') payStatus: boolean = false   //默认是未支付状态
3. /** 监听改变支付状态 */
4.   async getPayStatus() {
5.     if (this.payStatus) {  //如果支付完成
6.       this.testPay(1)     //模拟完成了支付
7.       this.payStatus = false  //重新设置为false
8.     }
9.   }

复制代码

---

7.testPay函数

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

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

复制代码

至此，简朴的微信付出完成啦，结果如下：

---

三、总结

文章先容了一个简朴的付出功能的实现思绪，流程如下：

简朴来说就是通事后端天生的微信付出网址，然后分析成为二维码在手机页面上举行扫码付出

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金