【HarmonyOS】鸿蒙应用接入微信支付

前言

1.接入微信支付，除了鸿蒙应用接入的工作量，还有服务器开发工作量。这里需要注意，如果你的应用，android ios版本没有接入过微信支付，那鸿蒙微信支付的工作量就不只是鸿蒙应用接入了。

2.微信支付接入，最麻烦的是需要在微信开放平台注册应用审核。如果你的应用在Android和 IOS都没有审核过，这里时间会比较长。微信开放平台地址

一、下载鸿蒙版微信开放SDK和示例DEMO

1.WeChat_Open_SDK:

【HarmonyOS】鸿蒙应用接入微信支付_微信支付

点击跳转@tencent/wechat_open_sdk(V1.0.3)2.官方示例DEMO下载

【HarmonyOS】鸿蒙应用接入微信支付_微信_02

点击下载OpenSDK-1.0.0.zip

二、运行示例项目

微信的示例项目进行配置同步后，设置自动签名就可以直接运行成功，效果如下：

【HarmonyOS】鸿蒙应用接入微信支付_微信_03

可以看到微信支付相关在，支付按钮，跳转到的页面中 Pay.ets

【HarmonyOS】鸿蒙应用接入微信支付_微信开放平台_04

点击跳转支付，就会拉起微信，进入支付页。

【HarmonyOS】鸿蒙应用接入微信支付_微信支付_05

但是支付参数如果不对，就会提示：

【HarmonyOS】鸿蒙应用接入微信支付_微信支付_06

!检查pay.ets类，配置的支付参数。并且需要在Constants.ets中进行配置：

【HarmonyOS】鸿蒙应用接入微信支付_微信支付_07

微信开放平台需要注册你的鸿蒙应用，配置包名等信息。微信最麻烦的就是这个，没有提供一个测试id进行效果查看，只能先去注册你的应用。点击鸿蒙应用手册

三、copy支付相关代码进行接入

1.安装SDK依赖：sdk版本以三方库的最新版本为准：

【HarmonyOS】鸿蒙应用接入微信支付_微信开放平台_08

"dependencies": {
    "@tencent/wechat_open_sdk": "1.0.3"
  }

【HarmonyOS】鸿蒙应用接入微信支付_微信_09

2.参考Pay.ets中的代码，copy【支付】相关代码：

import { OnWXResp, WXApi, WXEventHandler } from '../model/WXApiWrap';
import * as wxopensdk from '@tencent/wechat_open_sdk';
import { common } from '@kit.AbilityKit';

export const kRoute = "Pay"

@Entry({ routeName: kRoute })
@Component
struct Pay {
  private wxApi = WXApi
  private wxEventHandler = WXEventHandler

  @State payResultText: string = ''
  // 回调处理
  private onWXResp: OnWXResp = (resp) => {
    this.payResultText = JSON.stringify(resp ?? {}, null, 2)
  }

  aboutToAppear(): void {
  	// 注册的支付回调
    this.wxEventHandler.registerOnWXRespCallback(this.onWXResp)
  }

  aboutToDisappear(): void {
    this.wxEventHandler.unregisterOnWXRespCallback(this.onWXResp)
  }

  build() {
    Column({ space: 20 }) {
      Text("跳转支付").fontSize(20).fontWeight("bold").width('100%').padding(16)
      Button("跳转支付").onClick(async () => {

		// 组装支付订单参数，发送包裹给微信api，唤起微信。
        let req = new wxopensdk.PayReq
        req.partnerId = '2480306091'
        req.appId = 'wx05b3e2e9fc730840'
        req.packageValue = 'Sign=WXPay'
        req.prepayId = 'wx26161523845794ecced251acf2b6860000'
        req.nonceStr = 'vmall_240926161523_993_2774'
        req.timeStamp = '1727338524'
        req.sign = 'rAqsrx5yLfRNBGvlHYuLhUsNK0OPeOLQ5xlvhxFo9guPU4HeNtzRdPaGAXAzXvn7V5chVe8sj3BfvDgwXlCKctCcFIllOgheyZbZ7btFC++9bW0QTijhWo1hZ6LhvjcKQ1zf53RGX7zf7GBu9sheqWPKlWqJJzynBZo8UH5Wow9t/WK5fanNj6ST2U2zPQGxuCH+DBMOKJAhhaalrOXlqj+feEiz1bLAzEmhLzIREgcWJQyZmdI5VO0B8r11ND+o1iBYgoohDUuJc+bd9r6RvmZBSE+HqggWE4p3D0/NzY7mQH+51u0osfOfaTHVLqlUM3IMoXi1vH4a0Qrg1P6c0g=='
        req.extData = 'extData'

		// 发送操作是否成功
        let finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
        console.log("send request finished: ", finished)
      }).width('80%')

      Text(this.payResultText)
        .width('80%')
        .fontSize(17)
        .lineHeight(20)
    }
  }
}

微信支付业务流程图

【HarmonyOS】鸿蒙应用接入微信支付_微信支付_10

支付回调信息code：

【HarmonyOS】鸿蒙应用接入微信支付_微信开放平台_11