Web组件支持在应用拦截到页面哀求后自界说响应哀求能力。开辟者通过onInterceptRequest()接口来实现自界说资源哀求响应 。自界说哀求能力可以用于开辟者自界说Web页面响应、自界说文件资源响应等场景。
Web网页上发起资源加载哀求，应用层收到资源哀求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。
在下面的示例中，Web组件通过拦截页面哀求“https://www.example.com/test.html”， 在应用侧代码构建响应资源，实现自界说页面响应场景。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <!-- 页面资源请求 -->
- <a href="https://www.example.com/test.html">intercept test!</a>
- </body>
- </html>
- // xxx.ets
- import web_webview from '@ohos.web.webview';
- @Entry
- @Component
- struct WebComponent {
- controller: web_webview.WebviewController = new web_webview.WebviewController()
- responseResource: WebResourceResponse = new WebResourceResponse()
- // 开发者自定义响应数据
- @State webData: string = '<!DOCTYPE html>\n' +
- '<html>\n'+
- '<head>\n'+
- '<title>intercept test</title>\n'+
- '</head>\n'+
- '<body>\n'+
- '<h1>intercept ok</h1>\n'+
- '</body>\n'+
- '</html>'
- build() {
- Column() {
- Web({ src: $rawfile('index.html'), controller: this.controller })
- .onInterceptRequest((event) => {
- if (event) {
- console.info('url:' + event.request.getRequestUrl());
- // 拦截页面请求
- if (event.request.getRequestUrl() !== 'https://www.example.com/test.html') {
- return null;
- }
- }
- // 构造响应数据
- 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;
- })
- }
- }
- }
在下面的示例中，Web组件通过拦截页面哀求“https://www.example.com/test.js”， 应用侧代码构建响应资源，在响应头中添加“ResponseDataID”字段，开启天生CodeCache的功能。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <div id="div-1">this is a test div</div>
- <div id="div-2">this is a test div</div>
- <div id="div-3">this is a test div</div>
- <div id="div-4">this is a test div</div>
- <div id="div-5">this is a test div</div>
- <div id="div-6">this is a test div</div>
- <div id="div-7">this is a test div</div>
- <div id="div-8">this is a test div</div>
- <div id="div-9">this is a test div</div>
- <div id="div-10">this is a test div</div>
- <div id="div-11">this is a test div</div>
- <script src="https://www.example.com/test.js"></script>
- </body>
- </html>
- // xxx.ets
- import web_webview from '@ohos.web.webview';
- @Entry
- @Component
- struct WebComponent {
- controller: web_webview.WebviewController = new web_webview.WebviewController()
- responseResource: WebResourceResponse = new WebResourceResponse()
- // 开发者自定义响应数据（响应数据长度需大于等于1024才会生成codecache）
- @State jsData: string = 'let text_msg = "the modified content:version 0000000000001";\n' +
- 'let element1 = window.document.getElementById("div-1");\n' +
- 'let element2 = window.document.getElementById("div-2");\n' +
- 'let element3 = window.document.getElementById("div-3");\n' +
- 'let element4 = window.document.getElementById("div-4");\n' +
- 'let element5 = window.document.getElementById("div-5");\n' +
- 'let element6 = window.document.getElementById("div-6");\n' +
- 'let element7 = window.document.getElementById("div-7");\n' +
- 'let element8 = window.document.getElementById("div-8");\n' +
- 'let element9 = window.document.getElementById("div-9");\n' +
- 'let element10 = window.document.getElementById("div-10");\n' +
- 'let element11 = window.document.getElementById("div-11");\n' +
- 'element1.innerHTML = text_msg;\n' +
- 'element2.innerHTML = text_msg;\n' +
- 'element3.innerHTML = text_msg;\n' +
- 'element4.innerHTML = text_msg;\n' +
- 'element5.innerHTML = text_msg;\n' +
- 'element6.innerHTML = text_msg;\n' +
- 'element7.innerHTML = text_msg;\n' +
- 'element8.innerHTML = text_msg;\n' +
- 'element9.innerHTML = text_msg;\n' +
- 'element10.innerHTML = text_msg;\n' +
- 'element11.innerHTML = text_msg;\n'
- build() {
- Column() {
- Web({ src: $rawfile('index.html'), controller: this.controller })
- .onInterceptRequest((event) => {
- // 拦截页面请求
- if (event?.request.getRequestUrl() == 'https://www.example.com/test.js') {
- // 构造响应数据
- this.responseResource.setResponseHeader([
- {
- // 格式：不超过13位纯数字。js识别码，Js有更新时必须更新该字段
- headerKey: "ResponseDataID",
- headerValue: "0000000000001"
- }]);
- this.responseResource.setResponseData(this.jsData);
- this.responseResource.setResponseEncoding('utf-8');
- this.responseResource.setResponseMimeType('application/javascript');
- this.responseResource.setResponseCode(200);
- this.responseResource.setReasonMessage('OK');
- return this.responseResource;
- }
- return null;
- })
- }
- }
- }
鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
OpenHarmony APP应用开辟教程步调：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
《鸿蒙开辟学习手册》：
怎样快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.根本概念
2.构建第一个ArkTS应用
3.……
开辟基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.应用基础知识
2.设置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开辟：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability开辟
2.UI开辟
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开辟
15.折叠屏系列
16.……
鸿蒙生态应用开辟白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
