目录
众所周知,我们在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>
后续会持续更新鸿蒙开发相关的知识,如果我的内容帮助到了你,麻烦你点个关注留个言,收藏一下。