【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(一)

目录

1 -> 概述

1.1 -> 整体架构

2 -> 文件组织

2.1 -> 目录结构

2.2 -> 文件访问规则

2.3 -> 媒体文件格式

3 -> js标签配置

3.1 -> pages

3.2 -> window

3.3 -> 示例

4 -> app.js

4.1 -> 应用生命周期

4.2 -> 应用对象6+

1 -> 概述

兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。

1.1 -> 整体架构

使用兼容JS的类Web开发范式的方舟开发框架，包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。

  • Application

    应用层表示开发者开发的FA应用，这里的FA应用特指JS FA应用。

  • Framework

    前端框架层主要完成前端页面解析，以及提供MVVM(Model-View-ViewModel)开发模式、页面路由机制和自定义组件等能力。

  • Engine

    引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。

  • Porting Layer

    适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。

2 -> 文件组织

2.1 -> 目录结构

JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下：

目录结构： 

多实例资源共享目录结构： 

目录结构中文件分类如下：

  • .hml结尾的HML模板文件，描述当前页面的文件布局结构。

  • .css结尾的CSS样式文件，描述页面样式。

  • .js结尾的JS文件，处理页面间的交互。

各个文件夹的作用：

  • app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见app.js。

  • pages目录用于存放所有组件页面。

  • common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。

  • resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见资源限定与访问章节。

  • share目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。

说明

  • i18n和resources是开发保留文件夹，不可重命名。

  • 如果share目录中的资源和实例(default)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。

  • share目录当前不支持i18n。

  • 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。

2.2 -> 文件访问规则

应用资源可通过绝对路径或相对路径的方式进行访问，绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下：

  • 引用代码文件，推荐使用相对路径，比如：../common/utils.js。

  • 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。

  • 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。

  • CSS样式文件中通过url()函数创建<url>数据类型，如：url(/common/xxx.png)。

说明

当代码文件A需要引用代码文件B时：

  • 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。

  • 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

  • 在js文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。

2.3 -> 媒体文件格式

表1 支持的图片格式
格式支持的文件类型
BMP.bmp
GIF.gif
JPEG.jpg
PNG.png
WebP.webp
表2 支持的视频格式
格式支持的文件类型

H.264 AVC

Baseline Profile(BP)

.3gp

.mp4

3 -> js标签配置

js标签中包含了实例名称、页面路由和窗口样式信息。

标签类型默认值必填描述
namestringdefault是标识JS实例的名字。
pagesArray-是路由信息。
windowObject-否窗口信息。

说明

name、pages和window等标签配置需在配置文件(config.json)中的“js”标签中完成设置。

3.1 -> pages

定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：

{
    ...
    "pages": [
        "pages/index/index",
        "pages/detail/detail"
    ]
    ...
}

说明

  • pages列表中第一个页面是应用的首页，即entry入口。

  • 页面文件名不能使用组件名称，比如：text.hml、button.hml等。

3.2 -> window

window用于定义与显示窗口相关的配置。对于屏幕适配问题，有2种配置方法：

  • 指定designWidth(屏幕逻辑宽度)，所有与大小相关的样式(例如width、font-size)均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。

  • 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466*466分辨率，320dpi的设备上，屏幕密度为2(以160dpi为基准)，1px等于渲染出的2物理像素。

说明

  1. 组件样式中<length>类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2(以160dpi为基准)的设备上，默认<length>为1px时，设备上实际渲染出2物理像素。

  2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。

属性类型必填缺省值描述
designWidthnumber否720页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。
autoDesignWidthboolean否false页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。

    示例如下：

    {
    ...
    "window": {
        "designWidth": 720,
        "autoDesignWidth": false
    }
    ...
}

    3.3 -> 示例

    {
  "app": {
    "bundleName": "com.example.player",
    "version": {
        "code": 1,
        "name": "1.0"
    },
    "vendor": "example"
  }
  "module": {
      ...
      "js": [
      {
          "name": "default",
          "pages": [
              "pages/index/index",
              "pages/detail/detail"
          ],
          "window": {
              "designWidth": 720,
              "autoDesignWidth": false
          }
      }
      ],
      "abilities": [
      {
          ...
      }
    ]
  }
}

    4 -> app.js

    4.1 -> 应用生命周期

    每个应用可以在app.js自定义应用级生命周期的实现逻辑，以下示例仅在生命周期函数中打印对应日志：

    // app.js
export default {
    onCreate() {
        console.info('Application onCreate');
    },

    onDestroy() {
        console.info('Application onDestroy');
    },
}

    4.2 -> 应用对象6+

    属性类型描述
    getAppFunction提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。

    示例如下：

    // app.js
export default {
    data: {
        test: "by getAPP"
    },
    onCreate() {
        console.info('AceApplication onCreate');
    },
    onDestroy() {
        console.info('AceApplication onDestroy');
    },
};
    // test.js 自定义逻辑代码
export var appData = getApp().data;

    感谢各位大佬支持！！！

    互三啦！！！

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/960261.html

    如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

    相关文章

    计算机的错误计算（二百二十二）

    计算机的错误计算（二百二十二）

    摘要 利用大模型化简计算 实验表明&#xff0c;虽然结果正确&#xff0c;但是&#xff0c;大模型既绕了弯路&#xff0c;又有数值计算错误。 与前面相同&#xff0c;再利用同一个算式看看另外一个大模型的化简与计算能力。 例1. 化简计算摘要中算式。 下面是与一个大模型的…
    阅读更多...
    Ubuntu介绍、与centos的区别、基于VMware安装Ubuntu Server 22.04、配置远程连接、安装jdk+Tomcat

    Ubuntu介绍、与centos的区别、基于VMware安装Ubuntu Server 22.04、配置远程连接、安装jdk+Tomcat

    目录 ?编辑 一、Ubuntu22.04介绍 二、Ubuntu与Centos的区别 三、基于VMware安装Ubuntu Server 22.04 下载 VMware安装 1.创建新的虚拟机 2.选择类型配置 3.虚拟机硬件兼容性 4.安装客户机操作系统 5.选择客户机操作系统 6.命名虚拟机 7.处理器配置 8.虚拟机内存…
    阅读更多...
    基于单片机的智能小区门禁系统设计（论文+源码）

    基于单片机的智能小区门禁系统设计（论文+源码）

    1总体架构 智能小区门禁系统以STM32单片机和WiFi技术为核心&#xff0c;STM32单片机作为主控单元&#xff0c;通过WiFi模块实现与手机APP的连接&#xff0c;构建整个门禁系统。系统硬件包括RFID模块、指纹识别模块、显示屏、按键以及继电器。通过RFID绑定IC卡、APP面部识别、指…
    阅读更多...
    03_使用同一个函数创建不同的任务

    03_使用同一个函数创建不同的任务

    一、声明 这个程序执行的任务就是在一个函数里面可以执行几个不同的任务&#xff08;好吧&#xff0c;我到现在也没学会怎么添加自己的视频&#xff09; 我们这个程序使用到的外设只有OLED屏幕 二、CubeMx的配置 注意要选一下TIM4 挂一个I2C&#xff0c;用来放OLED的屏幕 再开…
    阅读更多...
    高频 SQL 50 题（基础版）_620. 有趣的电影

    高频 SQL 50 题（基础版）_620. 有趣的电影

    高频 SQL 50 题&#xff08;基础版&#xff09;_620. 有趣的电影 一级目录 表&#xff1a;cinema id 是该表的主键(具有唯一值的列)。 每行包含有关电影名称、类型和评级的信息。 评级为 [0,10] 范围内的小数点后 2 位浮点数。 编写解决方案&#xff0c;找出所有影片描述为 …
    阅读更多...
    iOS开发设计模式篇第二篇MVVM设计模式

    iOS开发设计模式篇第二篇MVVM设计模式

    目录 一、什么是MVVM 二、MVVM 的主要特点 三、MVVM 的架构图 四、MVVM 与其他模式的对比 五、如何在iOS中实现MVVM 1.Model 2.ViewModel 3.View (ViewController) 4.双向绑定 5.文中完整的代码地址 六、MVVM 的优缺点 1.优点 2.缺点 七、MVVM 的应用场景 八、结…
    阅读更多...
    PyCharm接入DeepSeek实现AI编程

    PyCharm接入DeepSeek实现AI编程

    目录 效果演示 创建API key 在PyCharm中下载CodeGPT插件 配置Continue DeepSeek 是一家专注于人工智能技术研发的公司&#xff0c;致力于开发高性能、低成本的 AI 模型。DeepSeek-V3 是 DeepSeek 公司推出的最新一代 AI 模型。其前身是 DeepSeek-V2.5&#xff0c;经过持续的…
    阅读更多...
    基于自然语言处理的垃圾短信识别系统

    基于自然语言处理的垃圾短信识别系统

    基于自然语言处理的垃圾短信识别系统 &#x1f31f; 嗨&#xff0c;我是LucianaiB&#xff01; &#x1f30d; 总有人间一两风&#xff0c;填我十万八千梦。 &#x1f680; 路漫漫其修远兮&#xff0c;吾将上下而求索。 目录 设计题目设计目的设计任务描述设计要求输入和输出…
    阅读更多...
    类和对象(4)——多态：方法重写与动态绑定、向上转型和向下转型、多态的实现条件

    类和对象(4)——多态：方法重写与动态绑定、向上转型和向下转型、多态的实现条件

    目录 1. 向上转型和向下转型 1.1 向上转型 1.2 向下转型 1.3 instanceof关键字 2. 重写&#xff08;overidde&#xff09; 2.1 方法重写的规则 2.1.1 基础规则 2.1.2 深层规则 2.2 三种不能重写的方法 final修饰 private修饰 static修饰 3. 动态绑定 3.1 动态绑…
    阅读更多...
    JavaScript使用toFixed保留一位小数的踩坑记录：TypeError: xxx.toFixed is not a function

    JavaScript使用toFixed保留一位小数的踩坑记录：TypeError: xxx.toFixed is not a function

    JavaScript的toFixed函数是用于将一个数字格式化为指定的小数位数的字符串。其语法如下： numObj.toFixed([digits]) 其中，numObj是需要格式化的数字，digits是保留的小数位数。digits参数是一个可选参数，默认值为0，表示不保留小数位。 计算后需要保留一位小数，于是使用…
    阅读更多...
    网络仿真工具Core环境搭建

    网络仿真工具Core环境搭建

    目录 安装依赖包 源码下载 Core安装 FAQ 下载源码TLS出错误 问题 解决方案 找不到dbus-launch 问题 解决方案 安装依赖包 调用以下命令安装依赖包 apt-get install -y ca-certificates git sudo wget tzdata libpcap-dev libpcre3-dev \ libprotobuf-dev libxml2-de…
    阅读更多...
    深入 Rollup：从入门到精通（三）Rollup CLI命令行实战

    深入 Rollup：从入门到精通（三）Rollup CLI命令行实战

    准备阶段&#xff1a;初始化项目 初始化项目&#xff0c;这里使用的是pnpm&#xff0c;也可以使用yarn或者npm # npm npm init -y # yarn yarn init -y # pnpm pnpm init安装rollup # npm npm install rollup -D # yarn yarn add rollup -D # pnpm pnpm install rollup -D在…
    阅读更多...
    volatile之四类内存屏障指令 内存屏障 面试重点 底层源码

    volatile之四类内存屏障指令 内存屏障 面试重点 底层源码

    目录 volatile 两大特性 可见性 有序性 总结 什么是内存屏障 四个 CPU 指令 四大屏障 重排 重排的类型 为什么会有重排&#xff1f; 线程中的重排和可见性问题 如何防止重排引发的问题&#xff1f; 总结 happens-before 和 volatile 变量规则 内存屏障指令 写操作…
    阅读更多...
    力扣算法题——11.盛最多水的容器

    力扣算法题——11.盛最多水的容器

    目录 &#x1f495;1.题目 &#x1f495;2.解析思路 本题思路总览 借助双指针探索规律 从规律到代码实现的转化 双指针的具体实现 代码整体流程 &#x1f495;3.代码实现 &#x1f495;4.完结 二十七步也能走完逆流河吗 &#x1f495;1.题目 &#x1f495;2.解析思路…
    阅读更多...
    RK3568 adb使用

    RK3568 adb使用

    文章目录 一、adb介绍**ADB 主要功能****常用 ADB 命令****如何使用 ADB****总结** 二、Linux下载adb**方法 1&#xff1a;使用包管理器&#xff08;适用于 Ubuntu/Debian 系统&#xff09;****方法 2&#xff1a;通过 Snap 安装&#xff08;适用于支持 Snap 的系统&#xff09…
    阅读更多...
    【ES实战】治理项之索引模板相关治理

    【ES实战】治理项之索引模板相关治理

    索引模板治理 文章目录 索引模板治理问题现象分析思路操作步骤问题程序化方案索引与索引模板增加分片数校验管理 彩蛋如何查询Flink on Yarn 模式下的Task Manager日志相关配置查询已停止的Flink任务查询未停止的Flink任务 问题现象 在集群索引新建时&#xff0c;索引的分片比…
    阅读更多...
    网络工程师 （2）计算机体系结构

    网络工程师 （2）计算机体系结构

    一、冯诺依曼体系结构 &#xff08;一&#xff09;简介 冯诺依曼结构也称普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置&#xff0c;因此程序指令和数据的宽度相同。数学…
    阅读更多...
    Android Studio:视图绑定的岁月变迁(2/100)

    Android Studio:视图绑定的岁月变迁(2/100)

    一、博文导读 本文是基于Android Studio真实项目&#xff0c;通过解析源码了解真实应用场景&#xff0c;写文的视角和读者是同步的&#xff0c;想到看到写到&#xff0c;没有上帝视角。 前期回顾&#xff0c;本文是第二期。 private Unbinder mUnbinder; 只是声明了一个 接口…
    阅读更多...
    LeetCode | 不同路径

    LeetCode | 不同路径

    一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 示例 1…
    阅读更多...
    低代码系统-产品架构案例介绍、得帆云（八）

    低代码系统-产品架构案例介绍、得帆云（八）

    产品名称 得帆云DeCode低代码平台-私有化 得帆云DeMDM主数据管理平台 得帆云DeCode低代码平台-公有云 得帆云DePortal企业门户 得帆云DeFusion融合集成平台 得帆云DeHoop数据中台 名词 概念 云原生 指自己搭建的运维平台&#xff0c;区别于阿里云、腾讯云 Dehoop 指…
    阅读更多...
    最新文章

    Copyright @ 2022~2023