鸿蒙开发在应用中加载Web网页&应用与Web之间通信

原创已于 2024-05-31 17:33:47 修改 · 794 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

于 2024-05-31 17:00:15 首次发布

鸿蒙开发专栏收录该内容

22 篇文章

订阅专栏

众所周知，我们在ArkTs开发移动端过程中，不可避免会用到网页，使用网页的时候或多或少需要用和web之间进行通信，那么鸿蒙开发中，如何加载网页，如何与Web网页进行通信

鸿蒙应用中如何加载Web网页

加载网络页面

import webview from '@ohos.web.webview'

@Entry
@Component
export struct WebViewComponent{
  //控制器对象
  controller:WebviewController = new webview.WebviewController()

  build(){
    Row(){
      //加载网络页面
      Web({src:'https://baidu.com',controller:this.controller})

    }.height('100%')
  }
}

加载本地页面

后续省略Page页面的模板代码，只展示核心代码

//加载本地网页
Web({src: $rawfile("debug.html"),controller:this.controller})

需要注意一点，本地网页的html文件需要放在rawfile文件夹下

Web跳转应用内页面

在遇到web触发跳转到应用内的时候，我们需要拦截跳转的URL，通过自定义协议头来分辨是跳转网页还是应用内的页面

Web端可以通过A标签添加：

<a href="native://pages/LoginPage">登录</a>

应用端需要使用拦截器 onUrlLoadIntercept 来拦截，例如：

 Web({src: $rawfile("debug.html"),controller:this.controller}).onUrlLoadIntercept(({data})=>{
        let url:string = data as string
        //验证是否要跳转到应用界面
        if(url.indexOf('native://')==0){
          console.log("跳转："+url.substring(9));
          //跳转其他native页面
          router.pushUrl({url:url.substring(9)});
          return true;
        }
        return false;
      });

onUrlLoadIntercept ：当URL加载被拦截时触发，如果返回true代表我们消费掉这个事件不进行后续操作，返回false代表不做处理继续往下执行，当然你还可以在这个方法里做一些其他的操作，比如拦截非法的超链。

应用与web之间通信

应用调用web函数

  Button('调用H5函数').onClick(()=>{
        //调用web
        this.controller.runJavaScript(`changeData('hello HarmonyOS')`)
      })

前提是web函数中提供了changeData函数，注意runJavaScript括号里的最外层的符号是``不是‘’

如果函数不需要携带参数直接调函数名即可

应用提供函数给web调用

相当于是把提供给web调用的函数提前准备好，在加载web页面的时候通过javaScriptProxy将方法名注入进去，这样web端就可以调用changeData给应用提供信息了

 ///注入，给web提供访问对象
      Web({src: $rawfile("test.html"),controller:this.controller})
        .javaScriptProxy({
          object:{///注入对象
            changeData:(val)=>{//注意this的指向
              this.text = val;
            }
          },
          methodList:['changeData'],//指定让web页面访问的方法
          name:'app',//web页面访问的变量名
          controller:this.controller
        })

有些web同学可能不知道如何使用，那么以下web端代码：

<button id="call">调用app的方法</button>

<script>
   
    let call =document.querySelector("#call");
     call.onclick=()=>{
     //调用应用的方法
        app.changeData("hello Harmony")
     }
</script>

后续会持续更新鸿蒙开发相关的知识，如果我的内容帮助到了你，麻烦你点个关注留个言，收藏一下。