混合(hybrid)开发 支付宝三方支付

当前我们有现成的支付宝H5端支付能力，所以需要我们采用混合开发的模式进行操作，所谓混合开发就是鸿蒙原生内嵌一个支付宝的h5页面，经过互相通信实现整个支付流程

1. 使用Web组件通过src发起支付宝接口请求（携带订单id参数）
2. 监听Web组件的网络请求变化，如果发现/pay/redirect 关键标识，证明支付已经完成
3. 解析回调参数（如果payResult参数为true，即为成功）

后续所有的操作都是在 web 页面完成的，支付部分在【支付宝】，支付完毕之后会返回

支付完成最终返回的地址为：

https://xxx.xxxx.net/pay/redirect?payResult=true&orderId=订单 id

onPageBeginhttps://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onpagebegin

1. 监听当前的网页是否包含/pay/redirect
2. 解析参数做支付结果的展示和后续的逻辑处理:

•  payResult的值
• orderId的值

import { router } from '@kit.ArkUI'
import { baseURL, MkNavBar } from '@mk/basic'
import web_webview from '@ohos.web.webview'

@Component
export struct PayView {
  // 订单id
  orderId: string = ''
  webviewController: web_webview.WebviewController = new web_webview.WebviewController()

  aboutToAppear(): void {
    if (router.getParams()) {
      const data = router.getParams() as Record<string, string>
      this.orderId = data['orderId']
    }
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        // 如果有订单id
        if (this.orderId) {
          Web({
            src: `${baseURL}/pay/wap/aliPay?orderId=${this.orderId}`,
            controller: this.webviewController
          })

.onPageBegin((event) => {
  if (event) {
    const callBackUrl = baseURL + '/pay/redirect?'
    if (event.url.includes(callBackUrl)) {
      // 解析
      const str = event.url.replace(callBackUrl, '')
      const strArr = str.split('&')
      const payResult = strArr[0].split('=')[1]
      const orderId = strArr[1].split('=')[1]
      // Logger.info(payResult + '||' + orderId)
      this.pageStack.pushPathByName('PayResultView', {
        payResult,
        orderId
      })
    }
  }
})

        }
      }
      .height('100%')

      // title bar
      MkNavBar({
        title: '支付中',
      })
    }
    .height('100%')
  }
}