通过rawfile加载本地html文件

Web({
  src: $rawfile('index.html'),
  controller: this.controller
})

通过http网络资源加载文件

Web({
 src:"http://www.xxx.com/index.html",
  controller: this.controller
})

实现代码高亮

@ohos.web.webview提供web控制能力，Web组件提供网页显示的能力。

使用html文件设置显示的内容，将html文件放入rawfile文件中
- 导入三方库
  highlight.min.js 是一个用于在网页上高亮显示代码的 JavaScript 库
  github.min.css（primer/github-syntax-light） 用于 GitHub 的 CSS 语法主题

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Word</title>
    <link rel="stylesheet" href="./github.min.css">
    <script src="./highlight.min.js"></script>
    <style>
        code {
            font-size: 16px;
            line-height: 1.6
        }
    </style>
</head>
<body>
    <pre><code></code></pre>  // code标签中识别高亮代码
    <script>
        // 调用高亮方法
        function writeCode(str) {
            const el = document.querySelector('code');
            el.innerHTML = hljs.highlightAuto(str).value;
        }
    </script>
</body>
</html>

通过Web组件调用html文件中的writeCode方法

Web事件 onPageEnd

网页加载完成时触发该回调

onPageEnd(callback: (event?: { url: string }) => void)

webView控制器 runJavaScript

异步执行JavaScript脚本，并通过Promise方式返回脚本执行的结果

import web_webview from '@ohos.web.webview'
webScroller = new web_webview.WebviewController()

Web({
  src: $rawfile('word.html'),
  controller: this.webScroller
})
  .width('100%')
  .height(400)
  .onPageEnd(() => {
    this.webScroller.runJavaScript(`writeCode(`${this.writeCode}`)`)
  })

支付宝支付

在鸿蒙中，目前只有支付宝支付，通过调取h5形式进行订单支付

onPageBegin

网页开始加载时触发该回调

onPageBegin(callback: (event?: { url: string }) => void)

if (this.orderId) {
  Web({
      // 调用后端接口获取支付宝h5支付页面
    src: `${baseURL}/pay/wap/aliPay?orderId=${this.orderId}`,  
    controller: this.webviewController
  })
    .onPageBegin((event) => {
   // 支付返回路径：https:// .... /pay/redirect?payResult=true&orderId=订单id
      if (event?.url.includes('/pay/redirect')) {
        const urlParams = url.URL.parseURL(event.url)
        const payResult = urlParams.params.get('payResult')
        const orderId = urlParams.params.get('orderId')
        // 通过返回的路径查询参数orderId和payResult，判断支付是否成功，跳转到结果页进行相应的展示
        router.replaceUrl({
          url: 'pages/PayResultPage',
          params: {
            payResult: payResult,
            orderId: orderId
          }
        })
      }
    })
}

鸿蒙-Web组件的使用

通过rawfile加载本地html文件

通过http网络资源加载文件

实现代码高亮

支付宝支付