HarmonyOS鸿蒙Next应用拉起微信app进行支付

HarmonyOS鸿蒙Next应用拉起微信app进行支付一、申请参数

需要公司这边去申请开通鸿蒙版本的微信商户，申请需要用到两个参数：

Bundle ID：指的是鸿蒙应用的包名，详见官方文档：鸿蒙应用创建
Identifier：指的是鸿蒙应用的 appIdentifier，详见官方文档：鸿蒙应用参考资料

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

二、调试步骤

配置依赖

在你的鸿蒙项目 oh-package.json5 文件中添加微信opensdk依赖项：

{
  "modelVersion": "5.0.0",
  "name": "Demo",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "[@tencent](/user/tencent)/wechat_open_sdk": "1.0.0"
  }
}

右上角 Sync Now 或者重新构建一下项目，等待加载完成后，就成功引入鸿蒙版微信 SDK 了。

新建 .ets 文件命名为 WXApiWrap，复制粘贴以下代码

import * as wxopensdk from '[@tencent](/user/tencent)/wechat_open_sdk';

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) 
// 注意此处填入申请通过的APP_ID
export const WXEventHandler = new WXApiEventHandlerImpl

注意细节：相关文件的引入路径和填入申请通过的 app_id

最重要！！！在 EntryAbility 里初始化和注册回调微信 SDK

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)
}

使用相关代码

import { WXApi, WXEventHandler } from '../model/WXApiWrap';
import * as wxopensdk from '[@tencent](/user/tencent)/wechat_open_sdk';
import { common } from '[@kit](/user/kit).AbilityKit';

private wxApi = WXApi
private wxEventHandler = WXEventHandler
[@State](/user/State) payResultText: string = ''
// 支付结果回调处理  
private onWXResp: OnWXResp = (resp) => {
  this.payResultText = JSON.stringify(resp ?? {}, null, 2)
  if (resp.errCode === 0) {
    promptAction.showToast({
      message: '支付成功'
    })
  } else if (resp.errCode === -1) {
    promptAction.showToast({
      message: '支付失败'
    })
  } else if (resp.errCode === -2) {
    promptAction.showToast({
      message: '取消支付'
    })
  }
}

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

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

Button("跳转支付")
  .onClick(async () => {
    // 组装支付订单参数，发送包裹给微信api，唤起微信   ，参数具体信息参见自己的接口文档写入
    let req = new wxopensdk.PayReq
    req.partnerId = 'xxxxxxxx'
    req.appId = 'xxxxxxxxxxxx'
    req.packageValue = 'Sign=WXPay'
    req.prepayId = 'xxxxxxxxxxxxxxxxxxxxx'
    req.nonceStr = 'xxxxxxxxxxxxx'
    req.timeStamp = '1727338524'
    req.sign='xxxxxxxxxxxxxxxxxxx'
    req.extData = 'extData'  

    let finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
    console.log("微信支付", finished)
  })

注意：相关参数应替换后端返回参数，详情参考自己的接口文档

partnerId // 商户号
appId // 微信开放平台审核通过的移动应用 AppID
packageValue // 固定名称 Sign=WXPay
prepayId // 微信预支付交易会话 ID
nonceStr // 随机字符串
timeStamp // 时间戳
sign // 签名
extData // 可选如需写: extData

三、常见问题

如何判断「微信」是否已经安装

通过 WXApi.isWXAppInstalled() 实现判断微信是否已安装，但需在开发者的 module.json5 里加入下方声明

"module": {
  "name": "entry",
  "type": "entry",
  "description": "$string:module_desc",
  "mainElement": "EntryAbility",
  "deviceTypes": [
    "phone",
    "tablet"
  ],
  "querySchemes": [
    "weixin",
    "wxopensdk"
  ]
}

微信登录失败：由于应用 Bundle ID 信息校验不通过，无法使用微信登录

① 出现该报错提示原因是你的移动应用配置了鸿蒙的开发信息后，提交审核，尚未审核通过（即审核中或者审核驳回）了，重新提交待审核通过即可

② 如果状态已经是审核通过，但是还是出现该报错，请检查 appid + identifier + bundleId 是否匹配（可在「微信开放平台 - 管理中心 - 移动应用 - 详情 - 开发配置」查看）