鸿蒙ArkTS页面如何与H5页面交互？

先看效果

功能介绍

• 点击Click Me按钮可以接收展示鸿蒙传递给html的内容
• 点击霓虹灯按钮可以同步更新底部鸿蒙页面的按钮内容“打开”或“关闭”
• 点击底部鸿蒙页面的按钮，可以同步修改html的霓虹灯按钮状态

前言

在开发App时，我们经常会遇到使用webView加载H5页面的场景，这样做的好处就不多加赘述了，那么鸿蒙App如何加载H5页面呢？又怎么与H5页面进行通信呢？，废话少说，直接上代码。

通信功能介绍

App可以通过runJavaScript()方法调用html页面的JavaScript相关函数。 在下面的示例中，点击App的“runJavaScript”按钮时，来触发html页面的change()方法更新霓虹灯按钮状态。

html通过鸿蒙的test方法，获取鸿蒙传递过来的数据。通过出发changeBtnText同步更新鸿蒙按钮的内容。

html文件目录：harmonyApp\entry\src\main\resources\rawfile
html代码如下：

    
    
    
    



    

        Click Me!
        

    
    
        
        
        
        
        
        
            
                
            
        
        
        Power
    

鸿蒙App代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';

class WebViewModel {
  btnText: string = '打开';

  constructor() {
  }

  test(): string {
    return 'ArkTS Hello World!';
  }

  // 修改按钮文本
  changeBtnText(value:string){
    this.btnText = value;
  }

}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State vm: WebViewModel = new WebViewModel();

  build() {
    Stack() {
      Column() {
        // 页面内容
        Scroll(){
          Column(){
            // web组件加载本地index.html页面
            Web({ src: $rawfile('index.html'), controller: this.webviewController})
              .domStorageAccess(true)
              .javaScriptAccess(true)
              .onProgressChange((event)=>{
                  // 自行编写加载状态
              })
              // 将对象注入到web端
              .javaScriptProxy({
                object: this.vm,
                name: "harmony",
                methodList: ["test",'changeBtnText'],
                controller: this.webviewController
              })
          }.padding(16)
        }
        .edgeEffect(EdgeEffect.Fade)
        .width('100%')
        .layoutWeight(1)
        .align(Alignment.TopStart)
        Button(this.vm.btnText)
          .width('80%')
          .borderRadius(10)
          .margin({bottom:px2vp(Number(AppStorage.get('safeAreaTopHeight'))) + ''})
          .onClick(() => {
            if(this.vm.btnText === '打开'){
              this.vm.btnText = '关闭';
            }else if(this.vm.btnText === '关闭'){
              this.vm.btnText = '打开';
            }
            this.webviewController.runJavaScript('change()');
          })
      }
      .height('100%')
      .backgroundColor('#F5F5F5')
    }
  }
}

Web组件使用问题

鸿蒙的Web组件加载H5页面会出现很多意外的问题，我这里建议把Web组件的以下两个选项开启，避免问题的产生。

1. domStorageAccess(true)开启文档对象模型存储接口（DOM Storage API）权限
2. javaScriptAccess(true)允许执行JavaScript脚本

具体代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';
​
class WebViewModel {
  constructor() {
  }
​
  test(): string {
    return 'ArkTS Hello World!';
  }
}
​
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State vm: WebViewModel = new WebViewModel();
​
  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
          .domStorageAccess(true)
          .javaScriptAccess(true)
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.vm,
          name: "harmony",
          methodList: ["test"],
          controller: this.webviewController
        })
    }
  }
}

其他选项可参考 鸿蒙Web官网

Harmony OS NEXT版本（接口及解决方案兼容API12版本或以上版本)