当前位置:   article > 正文

HarmonyOS自定义页面请求与前端页面调试_鸿蒙web组件浏览器调试的配置

鸿蒙web组件浏览器调试的配置

在这里插入图片描述

一、自定义页面请求响应

Web 组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义 Web 页面响应、自定义文件资源响应等场景。

Web 网页上发起资源加载请求,应用层收到资源请求消息。应用层构造本地资源响应消息发送给 Web 内核。Web 内核解析应用层响应信息,根据此响应信息进行页面资源加载。

在下面的示例中,Web 组件通过拦截页面请求“https://www.intercept.com/test.html”,在应用侧代码构建响应资源,实现自定义页面响应场景。

● 前端页面 example.html 代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
</head>
<body>
<!-- 页面资源请求 -->
<a href="https://www.intercept.com/test.html">intercept test!</a>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

● 应用侧代码。

// 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('example.html'), controller: this.controller })
        .onInterceptRequest((event) => {
          console.info('url:' + event.request.getRequestUrl());
          // 拦截页面请求
          if (event.request.getRequestUrl() !== 'https://www.intercept.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;
        })
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
二、 使用 Devtools 工具调试前端页面

Web 组件支持使用 DevTools 工具调试前端页面。DevTools 是一个 Web 前端开发调试工具,提供了调试移动设备前端页面的能力。开发者通过setWebDebuggingAccess()接口开启 Web 组件前端页面调试能力,利用 DevTools 工具可以在 PC 端调试移动设备上的前端网页。

使用 DevTools 工具,可以执行以下步骤:

  1. \1. 在应用代码中开启 Web 调试开关,具体如下:

    // xxx.ets
    import web_webview from '@ohos.web.webview';
    
    @Entry
    @Component
    struct WebComponent {
      controller: web_webview.WebviewController = new web_webview.WebviewController();
      aboutToAppear() {
     // 配置web开启调试模式
     web_webview.WebviewController.setWebDebuggingAccess(true);
      }
      build() {
     Column() {
       Web({ src: 'www.example.com', controller: this.controller })
     }
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

\2. 将设备连接上电脑,在电脑端配置端口映射,配置方法如下:

// 添加映射 
hdc fport tcp:9222 tcp:9222 
// 查看映射 
hdc fport ls
  • 1
  • 2
  • 3
  • 4

\3. 在 PC 端 chrome 浏览器地址栏中输入 chrome://inspect/#devices,页面识别到设备后,就可以开始页面调试。调试效果如下:图 1 页面调试效果图

  1. 图片

最后

这里整理了一份《鸿蒙零基础入门学习指南》,希望能对那些想要学习鸿蒙,但是有没有方向的人提供一点帮助。本文档适用于HarmonyOS应用开发的初学者(由于文档内容过多,因此为了避免影响到大家的阅读体验,在此只以截图展示部分内容,详细完整版的看文末有免费的获取方式!)

## 《鸿蒙零基础入门学习指南》

目录

在这里插入图片描述

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用,快速了解工程目录的主要文件,熟悉HarmonyOS应用开发流程。

  • 开发准备
    • 基本概念
    • 工具准备
  • 构建第一个ArkTS应用(Stage模型)
  • 构建第一个ArkTS应用(FA模型)
  • 构建第一个JS应用(FA模型)

在这里插入图片描述

二、开发基础知识

  • 应用程序包基础知识
    • 应用程序包概述
    • 应用程序包结构
    • 应用程序包多HAP机制
    • 应用程序包安装和卸载流程
    • 应用程序包更新流程
    • 共享包
    • 应用程序包快速修复
  • 应用配置文件(Stage模型)
    • 应用配置文件概述(Stage模型)
    • app.json5配置文件
    • module.json5配置文件
  • 应用配置文件概述(FA模型)
    • 应用配置文件概述(FA模型)
    • app对象内部结构
    • deviceConfig内部结构
    • module对象内部结构

在这里插入图片描述

三、资源分类与访问

应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。

  • 资源分类与访问
    • 资源分类
    • 资源目录
    • 资源组目录
  • 创建资源目录和资源文件
    • 创建资源目录和资源文件
    • 创建资源目录
    • 创建资源文件
  • 资源访问
    • 应用资源
    • 系统资源
    • 资源匹配
      在这里插入图片描述

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。

  • 初识ArkTS语言
  • 基本语法
    • 基本语法概述
    • 声明式UI描述
    • 自定义组件
  • 状态管理
  • 其他状态管理
    • 其他状态管理概述
    • @Watch装饰器:状态变量更改通知
    • $$语法:内置组件双向同步
  • 渲染控制
    • 渲染控制概述
    • if/else:条件渲染
    • ForEach:循环渲染
    • LazyForEach:数据懒加载

在这里插入图片描述

扫描下方二维码免费领取,《鸿蒙5.0零基础入门学习指南》

|

图片

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/296918
推荐阅读
相关标签
  

闽ICP备14008679号