鸿蒙开发-web-页面
时间：2024-04-25 10:25:46 来源：网络cs 作者：晨起 栏目：防关联工具 阅读：
鸿蒙开发-UI-图形-组件内转场动画
鸿蒙开发-UI-图形-弹簧曲线动画
鸿蒙开发-UI-交互事件-通用事件
鸿蒙开发-UI-交互事件-键鼠事件
鸿蒙开发-UI-交互事件-焦点事件
鸿蒙开发-UI-交互事件-手势事件
鸿蒙开发-UI-web
文章目录
前言
一、应用中使用前端页面JS
1.应用侧调用前端页面函数
2.前端页面调用应用侧函数
3.应用侧与前端页面数据通道
二、页面跳转以及浏览记录导航
1.历史记录导航
2.页面跳转
3.跨应用跳转
三、cookie以及数据存储
1.cookie管理
2.缓存与存储管理
2.1 Cache
2.2 Dom Storage
四、自定义页面请求响应
五、Devtools工具调试前端页面
总结
前言
上文学习了鸿蒙开发web相关的知识，了解web组件的基本概念，以及加载页面的三种方式，同时也学习了web组件的的基本属性和事件，本文将学习web的其他知识。
一、应用中使用前端页面JS
1.应用侧调用前端页面函数
应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。
前端页面代码
<!-- index.html --><!DOCTYPE html><html><body><script> function htmlTest() { console.info('JavaScript Hello World! '); }</script></body></html>应用侧代码
import web_webview from '@ohos.web.webview';@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController(); build() { Column() { Web({ src: $rawfile('index.html'), controller: this.webviewController}) Button('runJavaScript') .onClick(() => { this.webviewController.runJavaScript('htmlTest()'); }) } }}2.前端页面调用应用侧函数
通过Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就调用应用侧的函数，实现在前端页面中调用应用侧方法。
注册应用侧代码有两种方式：
方式一：在Web组件初始化使用调用，使用javaScriptProxy()接口
方式二：在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口
应用侧代码
import web_webview from '@ohos.web.webview';class testClass { constructor() { } test(): string { return 'ArkTS Hello World!'; }}@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController();//step1：声明需要注册的对象 @State testObj: testClass = new testClass(); build() { Column() {//step2：web组件加载本地index.html页面 Web({ src: $rawfile('index.html'), controller: this.webviewController})//step3：通过javaScriptProxy将对象注入到web端 .javaScriptProxy({ object: this.testObj, name: "testObjName", methodList: ["test"], controller: this.webviewController })//step4：通过registerJavaScriptProxy将对象注入到web端 Button('Register JavaScript To Window') .onClick(() => { try { this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]); } catch (error) { let e: business_error.BusinessError = error as business_error.BusinessError; console.error(`ErrorCode: ${e.code}, Message: ${e.message}`); } })//step5：使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效。 Button('refresh') .onClick(() => { try { this.webviewController.refresh(); } catch (error) { let e: business_error.BusinessError = error as business_error.BusinessError; console.error(`ErrorCode: ${e.code}, Message: ${e.message}`); } }) } }}前端页面代码
<!-- index.html --><!DOCTYPE html><html><body><button type="button" onclick="callArkTS()">Click Me!</button><p id="demo"></p><script> function callArkTS() {//step1: 使用注册的对象名称调用应用侧的函数 let str = testObjName.test(); document.getElementById("demo").innerHTML = str; console.info('ArkTS Hello World! :' + str); }</script></body></html>3.应用侧与前端页面数据通道
前端页面和应用侧之间可以用createWebMessagePorts()接口创建消息端口来实现两端的通信
二、页面跳转以及浏览记录导航
1.历史记录导航
在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录
import web_webview from '@ohos.web.webview';@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController(); build() { Column() {//step1：如果accessBackward()接口会返回true，表示存在历史记录。如果accessForward()返回true，表示存在前进的历史记录。如果您不执行检查，当浏览到历史记录的末尾时，调用forward()和backward()接口时将不执行任何操作。 Button('loadData') .onClick(() => { if (this.webviewController.accessBackward()) { this.webviewController.backward(); return true; } }) Web({ src: 'https://www.example.com/cn/', controller: this.webviewController}) } }}2.页面跳转
通过使用Web组件的onUrlLoadIntercept()接口实现点击网页中的链接跳转到应用内其他页面。
代码示例：应用首页Index.ets加载前端页面route.html，在前端route.html页面点击超链接，可跳转到应用的ProfilePage.ets页面
静态页面
<!-- route.html --><!DOCTYPE html><html><body> <div> <a href="native://pages/ProfilePage">个人中心</a> </div></body></html>Index.ets
import web_webview from '@ohos.web.webview';import router from '@ohos.router';@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController(); build() { Column() { Web({ src: $rawfile('route.html'), controller: this.webviewController }) .onUrlLoadIntercept((event) => { let url: string = event.data as string; if (url.indexOf('native://') === 0) {//step1: 跳转应用其他页面 router.pushUrl({ url:url.substring(9) }) return true; } return false; }) } }}ProfilePage.ets
@Entry@Componentstruct ProfilePage { @State message: string = 'Hello World'; build() { Column() { Text(this.message) .fontSize(20) } }}3.跨应用跳转
Web组件可以实现点击前端页面超链接跳转到其他应用
三、cookie以及数据存储
1.cookie管理
Cookie是网络访问过程中，由服务端发送给客户端的一小段数据。客户端可持有该数据，并在后续访问该服务端时，方便服务端快速对客户端身份、状态等进行识别。Web组件提供了WebCookieManager类，用于管理Web组件的Cookie信息。Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中
代码示例
import web_webview from '@ohos.web.webview';@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); build() { Column() { Button('setCookie') .onClick(() => { try {//step1：setCookie()为“www.example.com”设置单个Cookie的值“value=test” web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test'); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } }}2.缓存与存储管理
在访问网站时，网络资源请求是相对比较耗时的。开发者可以通过Cache、Dom Storage等手段将资源保持至本地，以提升访问同一网站的速度。
2.1 Cache
2.2 Dom Storage
四、自定义页面请求响应
Web组件支持在应用拦截到页面请求后自定义响应请求。通过onInterceptRequest()接口来实现自定义资源请求响应 。用于开发者自定义Web页面响应、自定义文件资源响应等场景。Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载
前端页面
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>example</title></head><body><!-- 页面资源请求 --><a href="https://www.example.com/test.html">intercept test!</a></body></html>应用侧代码
import web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() responseResource: WebResourceResponse = new WebResourceResponse()//step2：构造自定义响应数据 @State webdata: string = "<!DOCTYPE html>\n" + "<html>\n"+ "<head>\n"+ "<title>intercept test</title>\n"+ "</head>\n"+ "<body>\n"+ "<h1>intercept test</h1>\n"+ "</body>\n"+ "</html>" build() { Column() { Web({ src: $rawfile('index.html'), controller: this.controller }) .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => { if (!event) { return new WebResourceResponse(); } let mRequest: WebResourceRequest = event.request as WebResourceRequest; console.info('TAGLee: url:'+ mRequest.getRequestUrl());//step1：Web组件拦截页面请求“https://www.example.com/test.html”，如果加载的url判断与目标url一致则返回自定义加载结果webdata if(mRequest.getRequestUrl() === 'https://www.example.com/test.html'){ // 构造响应数据 this.responseResource.setResponseData(this.webdata); this.responseResource.setResponseEncoding('utf-8'); this.responseResource.setResponseMimeType('text/html'); this.responseResource.setResponseCode(200); this.responseResource.setReasonMessage('OK'); return this.responseResource; } return; }) } }}五、Devtools工具调试前端页面
Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在PC端调试移动设备上的前端网页
step1：在应用代码中开启Web调试开关
本地html文件
应用侧代码
step2：将设备连接上电脑，在电脑端配置端口映射
// 添加映射 hdc fport tcp:9222 tcp:9222 // 查看映射 hdc fport ls
step3：在电脑端chrome浏览器地址栏中输入chrome://inspect/#devices，页面识别到设备后，就可以开始页面调试
模拟器中页面显示
电脑端chrome浏览器地址栏中输入chrome://inspect/#devices
页面识别到设备，页面调试
总结
本文详细学习了鸿蒙开发web中应用侧与前端页面的JS交互方式，同时学习页面跳转以及浏览器记录导航、页面缓存以及自定义页面返回处理，最后学习了Devtools工具的调试方式，下文将学习ArkTs语言基础类库。
本文链接：https://www.kjpai.cn/news/2024-04-25/162050.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
上一篇：长时间预测模型DLinear、NLinear模型（论文解读）
下一篇：返回列表