HarmonyOS web交互示例

HarmonyOS

Heiang

2024-12-25 14:24:56

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

参考下面代码

import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      PageOne()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPathByName('pageOne', null)
          })
      }
    }.title('NavIndex').navDestination(this.PageMap)
  }
}

/**
 * web返回控制的核心就是监听web组件页面的返回事件，然后用webController控制
 * 对于NavPathStack的页面，就用NavDestination(){}.onBackPressed监听，对于router跳转的页面，就用onBackPress()监听
 */
@Component
export struct PageOne {
  controller: webview.WebviewController = new webview.WebviewController();
  @Consume('pageInfos') pageInfos: NavPathStack
  build() {
    NavDestination(){
      Column() {
        Web({ src: $rawfile('hello.html'), controller: this.controller })
          .width('100%')
          .height('100%')
      }
      .layoutWeight(1)
    }
    .onBackPressed(()=> {
      console.log('webBackup')
      // 当前页面是否可后退
      if (this.controller.accessBackward()) {
        this.controller.backward(); // 返回上一个web页
        // 执行用户自定义返回逻辑
        return true;
      } else {
        // 执行系统默认返回逻辑，返回上一个page页
        return false;
      }
    })
  }
}

/*hello.html*/
<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no" />
  <title>Document</title>
  </head>
  <body>
  <div id="bg">first html!<br>
  <a href="second.html">跳转至本应用第二个H5页面</a>
  </div>
  </body>
  </html>


  /*second.html*/
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no" />
  <title>Document</title>
  </head>
  <body>
  <div id="bg">second html<br>
  </div>
  </body>
  </html>

2024-12-25 17:47:17

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web交互示例

订阅鸿蒙技术特刊，精选内容抢先看