HarmonyOS鸿蒙Next开发web组件中h5拉起微信支付有demo吗 还是没适配

【背景知识】

• 应用侧与前端交互开发文档：适用于ArkWeb应用侧与前端网页通信场景，应用可使用ArkTS、C++语言混合开发，实现JSBridge功能，达成应用侧与前端交互开发的功能实现。
• 通过微信SDK/支付宝SDK构建支付参数，拉起微信/支付宝支付界面，详情请查看对应SDK的开发文档。
• 通过后端调统一下单接口返回的支付URL地址，这种方式唤起支付界面。URL示例如下：weixin://wap/pay?prepayid%xxxxxxxxxx。

【解决方案】

• 在Web中使用微信支付URL地址，可以通过Web组件的onLoadIntercept回调拦截默认跳转逻辑，示例代码如下：

import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  controller: webview.WebviewController = new webview.WebviewController();
  url: string = 'weixin://wap/pay?prepayid%xxxxxxxxx'
  
  build() {
    Column() {
      Web({ src: this.url, controller: this.controller })
        .onLoadIntercept((event) => {
          console.log('url:' + event.data.getRequestUrl());
          console.log('isMainFrame:' + event.data.isMainFrame());
          console.log('isRedirect:' + event.data.isRedirect());
          console.log('isRequestGesture:' + event.data.isRequestGesture());
          (getContext() as common.UIAbilityContext).openLink(this.url)
            .then(() => {
              console.log('openLink success');
            }).catch((err: BusinessError) => {
              console.error('openLink failed, err:' + JSON.stringify(err));
            });
          return true;
        })
        .onErrorReceive((error) => {
          console.log("error:" + (error.error.getErrorInfo()))
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

【总结】

• Web场景下进行微信/支付宝支付时，都可以通过Deep Linking拉起支付页面，详情请参考DeepLink拉起支付页面。
• H5页面跳转APP是可以支持的，可以基于Web组件和JSBridge桥接实现H5与ArkTS侧的交互，详情请参考应用侧与前端交互开发文档。
• Web场景下进行微信/支付宝支付时也可以使用Deep Linking或App Linking的方式自定义跳转逻辑完成应用跳转。