鸿蒙Next如何接入微信支付

大家好，这是我工作中接触到的鸿蒙Next接入微信支付，有使用到，分享给大家，轻松便捷

前提:你已有鸿蒙版本的微信，并且微信余额或绑定银行卡有钱，因为内测的微信暂不支持收红包和转账，2.你的应用已有安卓或IOS端的微信支付，否则的话，工作量将不止如此

正文：首先需要你公司这边去申请开通鸿蒙版本的微信商户

注意细节请看链接：接入指南 / 鸿蒙接入指南，申请需要用到两个参数：Bundle ID，Bundle ID 指的是鸿蒙应用的包名，详细请看：https://developer.huawei.com/consumer/cn/doc/app/agc-help-createharmonyapp-0000001945392297

 Identifier 指的是鸿蒙应用的 appIdentifier，详情请看：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-bundlemanager-bundleinfo-V5

申请通过后，即可进入微信支付调试步骤

1.在你的鸿蒙项目中，修改项目中的oh-package.json5文件，在dependencies中加入微信 opensdk 的依赖项：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
   "dependencies": {
    "@tencent/wechat_open_sdk": "1.0.0"
  }
}

然后右上角重新Sync Now一下，等下加载完成，你就成功引入了鸿蒙版本的微信SDK

2.新建.ets文件，文件名为：Constants，然后复制以下代码：APP_ID是你公司申请过后的鸿蒙微信支付商户Id

export const APP_ID = "wxd5a474c635b8fd17"
export const APP_SECRET = ""

3. 新建.ets文件 文件名为:WXApiWrap,然后复制以下代码:

import * as wxopensdk from '@tencent/wechat_open_sdk';
import { APP_ID } from '../Constants';

export type OnWXReq = (req: wxopensdk.BaseReq) => void
export type OnWXResp = (resp: wxopensdk.BaseResp) => void

const kTag = "WXApiEventHandlerImpl"

class WXApiEventHandlerImpl implements wxopensdk.WXApiEventHandler {
  private onReqCallbacks: Map<OnWXReq, OnWXReq> = new Map
  private onRespCallbacks: Map<OnWXResp, OnWXResp> = new Map

  registerOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.set(on, on)
  }
  unregisterOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.delete(on)
  }

  registerOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.set(on, on)
  }
  unregisterOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.delete(on)
  }

  onReq(req: wxopensdk.BaseReq): void {
    wxopensdk.Log.i(kTag, "onReq:%s", JSON.stringify(req))
    this.onReqCallbacks.forEach((on) => {
      on(req)
    })
  }

  onResp(resp: wxopensdk.BaseResp): void {
    wxopensdk.Log.i(kTag, "onResp:%s", JSON.stringify(resp))
    this.onRespCallbacks.forEach((on) => {
      on(resp)
    })
  }
}

export const WXApi = wxopensdk.WXAPIFactory.createWXAPI(APP_ID)
export const WXEventHandler = new WXApiEventHandlerImpl

注意事项：请注意相关文件引入的路径

3.重点！！一定要在EntryAbility里初始化和注册回调微信SDK，具体代码如下：

import { WXApi, WXEventHandler } from '../model/WXApiWrap';

  onCreate(want: Want, _launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    this.handleWeChatCallIfNeed(want)
  }
  onNewWant(want: Want, _launchParam: AbilityConstant.LaunchParam): void {
    this.handleWeChatCallIfNeed(want)
  }

  private handleWeChatCallIfNeed(want: Want) {
    WXApi.handleWant(want, WXEventHandler)
  }

注意事项：注意相应文件的引入路径

4.使用 也是重点 

1.在你需要调用微信支付的文件 引入如下代码：

import { WXApi, WXEventHandler } from '../model/WXApiWrap';
import * as wxopensdk from '@tencent/wechat_open_sdk';
import { common } from '@kit.AbilityKit';
      Button("跳转支付")
        .onClick(async () => {
        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("微信支付", finished)
      }).width('80%')

注意事项：请注意相关文件的引入路径，相关参数请替换后端返回的参数

相关参数备注：注释不一定准确，详细字段和内容请参考后端返回的数据，每个人的书写习惯不一样

partnerId // 商户号
appId // 应用ID
packageValue //固定名称 Sign=WXPay 
prepayId// 微信预支付交易会话ID
nonceStr// 随机字符串
timeStamp// 时间戳
sign// 签名
extData//可选 如需写: extData

支付结果会在这个函数里回调：

  onResp(resp: wxopensdk.BaseResp): void {
    console.log('微信支付',JSON.stringify(resp))
    wxopensdk.Log.i(kTag, "onResp:%s", JSON.stringify(resp))
    this.onRespCallbacks.forEach((on) => {
      console.log('微信支付1',JSON.stringify(resp))
      on(resp)
    })
  }

相关回调码：

大家可在支付回调里处理相关操作

相关文档链接：

微信sdk库：OpenHarmony三方库中心仓

微信demo下载：包含微信支付，微信登录，微信分享：https://dldir1.qq.com/WechatWebDev/opensdk/ohos/OpenSDK-1.0.0.zip

以上就是微信支付的流程了。对大家有帮助的话，可以点赞收藏哦