【最新鸿蒙应用开发】——类Web开发范式2——前端语法

兼容JS的类Web开发范式

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

1. 项目基本结构

1.1. 目录结构

img

1.2. 项目文件分类如下:

  • .hml结尾的HML模板文件,这个文件用来描述当前页面的文件布局结构。

  • .css结尾的CSS样式文件,这个文件用于描述页面样式。

  • .js结尾的JS文件,这个文件用于处理页面和用户的交互。

1.3. 目录模块划分:

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

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

  • common目录用于存放公共资源文件,比如:媒体资源和JS文件。

  • i18n目录用于配置不同语言场景资源内容,比如应用文本词条,图片路径等资源。

说明

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

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

1.4. 文件访问规则

应用资源可通过绝对路径或相对路径的方式进行访问,本开发框架中绝对路径以"/"开头,相对路径以"./"或"../"。具体访问规则如下:

  • 引用代码文件,需使用相对路径,比如:../common/utils.js。

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

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

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

说明

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

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

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

2. 语法

2.1. HML语法

HML是一套类HTML的标记语言,通过组件事件构建出页面的内容。页面具备数据绑定事件绑定列表渲染条件渲染等高级能力。

2.1.1. 页面结构
<!-- xxx.hml -->
<div class="item-container"><text class="item-title">Image Show</text><div class="item-content"><image src="/common/xxx.png" class="image"></image></div>
</div>
2.1.2. 数据绑定
<!-- xxx.hml -->
<div onclick="changeText"><text> {{content[1]}} </text>
</div>
// xxx.js
export default {data: {content: ['Hello World!', 'Welcome to my world!']},changeText: function() {this.content.splice(1, 1, this.content[0]);}
}

说明

  • 针对数组内的数据修改,请使用splice方法生效数据绑定变更。

  • hml中的js表达式不支持ES6语法。

2.1.3. 事件绑定

事件绑定的回调函数接收一个事件对象参数,可以通过访问该事件对象获取事件信息。

<!-- xxx.hml -->
<div><!-- 通过'@'绑定事件 --><div @click="clickfunc"></div><!-- 通过'on'绑定事件  --><div onclick="clickfunc"></div><!-- 通过'on'绑定事件,不推荐使用5+ --><div onclick="clickfunc"></div><!-- 使用事件冒泡模式绑定事件回调函数。5+ --><div on:click.bubble="clickfunc"></div><!-- on:{event}等价于on:{event}.bubble。5+ --><div on:click="clickfunc"></div><!-- 绑定事件回调函数,但阻止事件向上传递。5+ --><div grab:click.bubble="clickfunc"></div><!-- grab:{event}等价于grab:{event}.bubble。5+ --><div grab:click="clickfunc"></div>
</div>
// xxx.js
export default {data: {obj: '',},clickfunc: function(e) {this.obj = 'Hello World';console.log(e);},
}

说明

事件冒泡机制从API Version 5开始支持。升级SDK后,运行存量JS应用,采用旧写法(onclick)的事件绑定还是按事件不冒泡进行处理。但如果使用新版本SDK重新打包JS应用,将旧写法按事件冒泡进行处理。为了避免业务逻辑错误,建议将旧写法(如onclick)改成新写法(grab:click)。

示例:

<!-- xxx.hml -->
<div class="container"><text class="title">{{count}}</text><div class="box"><input type="button" class="btn" value="increase" onclick="increase" /><input type="button" class="btn" value="decrease" @click="decrease" /><!-- 传递额外参数 --><input type="button" class="btn" value="double" @click="multiply(2)" /><input type="button" class="btn" value="decuple" @click="multiply(10)" /><input type="button" class="btn" value="square" @click="multiply(count)" /></div>
</div>
// xxx.js 
export default {data: {count: 0},increase() {this.count++;},decrease() {this.count--;},multiply(multiplier) {this.count = multiplier * this.count;}
};
/* xxx.css */
.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px;
}
.title {font-size: 30px;text-align: center;width: 200px;height: 100px;
}
.box {width: 454px;height: 200px;justify-content: center;align-items: center;flex-wrap: wrap;
}
.btn {width: 200px;border-radius: 0;margin-top: 10px;margin-left: 10px;
}
2.1.4. 列表渲染
<!-- xxx.hml -->
<div class="array-container"><!-- div列表渲染 --><!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 --><div class="item-container" for="{{array}}" tid="id" onclick="changeText"><text>{{$idx}}.{{$item.name}}</text></div><!-- 自定义元素变量名称 --><div class="item-container" for="{{value in array}}" tid="id" onclick="changeText"><text>{{$idx}}.{{value.name}}</text></div><!-- 自定义元素变量、索引名称 --><div class="item-container" for="{{(index, value) in array}}" tid="id" onclick="changeText"><text>{{index}}.{{value.name}}</text></div>
</div>
// xxx.js
export default {data: {array: [{id: 1, name: 'jack', age: 18}, {id: 2, name: 'tony', age: 18},],},changeText: function() {if (this.array[1].name === "tony"){this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});} else {this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});}},
}
.array-container {width: 100%;height: 100%;justify-content: center;align-items: center;flex-direction: column;
}
​
.item-container {margin-top: 10px;width: 200px;height: 50px;flex-direction: column;
}

tid属性主要用来加速for循环的重渲染,旨在列表中的数据有变更时,提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识,如果未指定,数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下:

  • for="array":其中array为数组对象,array的元素变量默认为$item。

  • for="v in array":其中v为自定义的元素变量,元素索引默认为$idx。

  • for="(i, v) in array":其中元素索引为i,元素变量为v,遍历数组对象array。

说明

  • 数组中的每个元素必须存在tid指定的数据属性,否则运行时可能会导致异常。

  • 数组中被tid指定的属性要保证唯一性,如果不是则会造成性能损耗。比如,示例中只有id和name可以作为tid字段,因为它们属于唯一字段。

  • tid不支持表达式。

2.1.5. 条件渲染

条件渲染分为2种:if/elif/else和show。两种写法的区别在于:第一种写法里if为false时,组件不会在vdom中构建,也不会渲染,而第二种写法里show为false时虽然也不渲染,但会在vdom中构建;另外,当使用if/elif/else写法时,节点必须是兄弟节点,否则编译无法通过。实例如下:

<!-- xxx.hml -->
<div class="container"><button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button><button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button><text if="{{show}}"> Hello-One </text><text elif="{{display}}"> Hello-Two </text><text else> Hello-World </text>
</div>
// xxx.js
export default {data: {show: false,display: true,},toggleShow: function() {this.show = !this.show;},toggleDisplay: function() {this.display = !this.display;}
}

优化渲染优化:show方法。当show为真时,节点正常渲染;当为假时,仅仅设置display样式为none。

<!-- xxx.hml -->
<div class="container"><button class="btn" type="capsule" value="toggle" onclick="toggle"></button><text show="{{visible}}" > Hello World </text>
</div>
// xxx.js
export default {data: {visible: false,},toggle: function() {this.visible = !this.visible;},
}

说明

  • 禁止在同一个元素上同时设置for和if属性。

2.2. CSS语法

CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。

2.2.1. 样式导入

为了模块化管理和代码复用,CSS样式文件支持 @import 语句,导入 CSS 文件。

2.2.2. 声明样式

每个页面目录下存在一个与布局hml文件同名的css文件,用来描述该hml页面中组件的样式,决定组件应该如何显示。

  1. 内部样式,支持使用style、class属性来控制组件的样式。例如:

    <!-- index.hml --><div class="container">  <text style="color: red">Hello World</text></div>
    /* index.css */.container {  justify-content: center;}

  2. 文件导入,合并外部样式文件。例如,在common目录中定义样式文件style.css,并在index.css文件首行中进行导入:

    /* style.css */.title {  font-size: 50px;}
    /* index.css */@import '../../common/style.css';.container {  justify-content: center;}

2.2.3. 选择器

css选择器用于选择需要添加样式的元素,支持的选择器如下表所示:

选择器样例样例描述
.class.container用于选择class="container"的组件。
#id#titleId用于选择id="titleId"的组件。
,.title, .content用于选择class="title"和class="content"的组件。

示例:

<!-- 页面布局xxx.hml --><div id="containerId" class="container">  <text id="titleId" class="title">标题</text>  <div class="content">    <text id="contentId">内容</text>  </div></div>
/* 页面样式xxx.css *//* 对class="title"的组件设置样式 */.title {  font-size: 30px;}/* 对id="contentId"的组件设置样式 */#contentId {  font-size: 20px;}/* 对所有class="title"以及class="content"的组件都设置padding为5px */.title, .content {  padding: 5px;}
2.2.4. 伪类

css伪类是选择器中的关键字,用于指定要选择元素的特殊状态。

名称支持组件描述
:activeinput[type="button"]表示被用户激活的元素,如:被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。
:checkedinput[type="checkbox"、type="radio"]表示checked属性为true的元素。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。

伪类示例如下,设置按钮的:active伪类可以控制被用户按下时的样式:

<!-- index.hml --><div class="container">  <input type="button" class="button" value="Button"></input></div>
/* index.css */.button:active {  background-color: #888888;/*按钮被激活时,背景颜色变为#888888 */}
2.2.5. 样式预编译

预编译提供了利用特有语法生成css的程序,可以提供变量、运算等功能,令开发者更便捷地定义组件样式,目前支持less、sass和scss的预编译。使用样式预编译时,需要将原css文件后缀改为less、sass或scss,如index.css改为index.less、index.sass或index.scss。

  • 当前文件使用样式预编译,例如将原index.css改为index.less:

    /* index.less *//* 定义变量 */@colorBackground: #000000;.container {  background-color: @colorBackground; /* 使用当前less文件中定义的变量 */}

  • 引用预编译文件,例如common中存在style.scss文件,将原index.css改为index.scss,并引入style.scss:

    /* style.scss *//* 定义变量 */$colorBackground: #000000;

    在index.scss中引用:

    /* index.scss *//* 引入外部scss文件 */@import '../../common/style.scss';.container {  background-color: $colorBackground; /* 使用style.scss中定义的变量 */}

说明

引用的预编译文件建议放在common目录进行管理。

2.3. JS语法参考

JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力,可以使应用更加富有表现力,具备更加灵活的设计。下面讲述JS文件的编译和运行的支持情况。

2.3.1. 语法

支持ES6语法。轻量级智能穿戴支持的ES6语法有限,仅支持以下ES6 语法:

  1. let/const

  2. arrow functions

  3. class

  4. default value

  5. destructuring assignment

  6. destructuring binding pattern

  7. enhanced object initializer

  8. for-of

  9. rest parameter

  10. template strings

  • 模块声明

    使用import方法引入功能模块:

    import router from '@ohos.router';

  • 代码引用

    使用import方法导入js代码:

    import utils from '../../common/utils.js';

2.3.2. 对象
  • 页面对象

    属性类型描述
    dataObject/Function页面的数据模型,类型是对象或者函数,如果类型是函数,返回值必须是对象。属性名不能以$或_开头,不要使用保留字for, if, show, tid。
    $refsObject持有注册过ref 属性的DOM元素或子组件实例的对象。
2.3.4. 获取DOM元素
  1. 通过$refs获取DOM元素

    <!-- index.hml -->
    <div class="container"><image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    // index.js
    export default {data: {images: [{ src: '/common/frame1.png' },{ src: '/common/frame2.png' },{ src: '/common/frame3.png' },],},handleClick() {const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素const state = animator.getState();if (state === 'paused') {animator.resume();} else if (state === 'stopped') {animator.start();} else {animator.pause();}},
    };

以上就是关于js在ArkUI方舟UI框架中的语法使用规则。

参考文档:

语法-框架说明-兼容JS的类Web开发范式 (ArkUI.Lite)-ArkTS组件-ArkUI API参考-开发 | 华为开发者联盟 (huawei.com)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MIPI A-PHY协议学习

一、说明 A-PHY是一种高带宽串行传输技术,主要为了减少传输线并实现长距离传输的目的,比较适用于汽车。同时,A-PHY兼容摄像头的CSI协议和显示的DSI协议。其主要特征: 长距离传输,高达15m和4个线内连接器; 高速率,支持2Gbps~16Gbps; 支持多种车载线缆(同轴线、屏蔽差分…

Spark RDD算子

Spark RDD算子 转换算子&#xff08;Transformation Operators&#xff09; 类别算子名称简要介绍映射类算子map对RDD中的每个元素进行操作&#xff0c;返回一个新的RDDflatMap类似于map&#xff0c;但每个输入元素可映射到0或多个输出元素mapPartitions对RDD的每个分区中的元…

在VMware虚拟机上安装win10 跳过 通过microsoft登录

在VMware虚拟机上安装win10 跳过 “通过microsoft登录” 配置虚拟机&#xff0c;将网卡断开&#xff0c; 具体操作&#xff1a; 虚拟机/设置/硬件/网络适配器/设备状态&#xff0c;取消已连接和启动时连接的两个对号&#xff0c; 再把虚拟机重启&#xff0c;然后就可以跳过这个…

通过技术优化财务规划报告,重塑企业体验

财务报告使企业的管理层能够及时、准确、清晰且一致地了解整个企业的财务业绩和风险机遇。它促进了企业内部利益相关者之间的沟通&#xff0c;从而支持基于数据驱动的洞察力提升和战略决策。但财务报告往往需要占用大量的时间来运行和准备&#xff0c;且可能使最终结论偏离核心…

什么是PV操作

PV操作是一种在操作系统中用于同步和互斥的机制,它基于信号量(Semaphore)的概念。在并发编程中,多个进程或线程可能会同时访问共享资源,PV操作可以用来确保这些访问是同步的,以防止竞态条件和数据不一致的问题。 PV操作包括两个原子操作: P操作(Proberen,测试):这…

使用 C# 学习面向对象编程:第 4 部分

C# 构造函数 第 1 部分仅介绍了类构造函数的基础知识。 在本课中&#xff0c;我们将详细讨论各种类型的构造函数。 属性类型 默认构造函数构造函数重载私有构造函数构造函数链静态构造函数析构函数 请注意构造函数的一些基本概念&#xff0c;并确保你的理解非常清楚&#x…

从入门到精通:进程间通信

引言 在现代操作系统中&#xff0c;进程是程序运行的基本单位。为了实现复杂的功能&#xff0c;多个进程常常需要进行通信。进程间通信&#xff08;Inter-Process Communication, IPC&#xff09;是指多个进程之间进行数据交换的一种机制。IPC的主要目的包括数据传输、资源共享…

WDF驱动开发-电源策略(三)

多组件设备的 KMDF 驱动程序只能将请求发送到处于活动状态的组件。 通常&#xff0c;驱动程序将 I/O 队列分配给组件或组件集。 首先考虑分配给单个组件的队列。 驱动程序在组件变为活动状态时启动队列&#xff0c;并在组件空闲时停止队列。 因此&#xff0c;当 KMDF 调用队列…

生成式人工智能重置:从初期热潮到战略扩展

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

PyTorch学习8:多分类问题

文章目录 前言一、说明二、示例1.步骤2.示例代码 总结 前言 介绍如何利用PyTorch中Softmax 分类器实现多分类问题。 一、说明 1.多分类问题的输出是一个分布&#xff0c;满足和为1. 2.Softmax 分类器 3.损失函数&#xff1a;交叉熵损失 torch.nn.CrossEntropyLoss() 二、…

运维开发详解:DevOps 理念下的高效运维实践

目录 前言 1、 运维开发的核心概念 2、 运维开发的技术栈 3、运维开发的实践案例 4、 运维开发的挑战与机遇 5、 运维开发的未来发展趋势 6、运维开发概念 7、运维开发的角色 8、成为一名优秀的运维开发工程师 9、总结 前言 随着互联网业务的快速发展&#xff0c;传…

虚拟化 之一 详解 jailhouse 架构及原理、软硬件要求、源码文件、基本组件

Jailhouse 是一个基于 Linux 实现的针对创建工业级应用程序的小型 Hypervisor&#xff0c;是由西门子公司的 Jan Kiszka 于 2013 年开发的&#xff0c;并得到了官方 Linux 内核的支持&#xff0c;在开源社区中获得了知名度和吸引力。 Jailhouse Jailhouse 是一种轻量级的虚拟化…

微软如何打造数字零售力航母系列科普13 - Prime Focus Technologies在NAB 2024上推出CLEAR®对话人工智能联合试点

Prime Focus Technologies在NAB 2024上推出CLEAR对话人工智能联合试点 彻底改变您与内容的互动方式&#xff0c;从内容的创建到分发 洛杉矶&#xff0c;2024年4月9日/PRNewswire/-媒体和娱乐&#xff08;M&E&#xff09;行业人工智能技术解决方案的先驱Prime Focus Techn…

架构师如何评估团队成员的成熟度

评估团队成员的成熟度是一个涉及观察、沟通和反馈的过程。以下是一些方法和步骤&#xff0c;可以帮助你评估团队成员的成熟度&#xff0c;无论是在技术能力、还是职业发展方面&#xff1a; 设定评估标准&#xff1a;首先&#xff0c;明确你希望评估的成熟度方面&#xff0c;比…

人工智能在医学领域的应用及技术实现

欢迎来到 Papicatch的博客 目录 &#x1f349;引言 &#x1f349; 医学影像分析 &#x1f348;技术实现 &#x1f34d;数据准备 &#x1f34d;模型构建 &#x1f34d;模型训练 &#x1f34d;模型评估 &#x1f34d;应用部署 &#x1f348;示例代码 &#x1f349; 基因…

操作系统真象还原:内存管理系统

第8章-内存管理系统 这是一个网站有所有小节的代码实现&#xff0c;同时也包含了Bochs等文件 8.1 Makefile简介 8.1.1 Makefile是什么 8.1.2 makefile基本语法 make 给咱们提供了方法&#xff0c;可以在命令之前加个字符’&#xff20;’&#xff0c;这样就不会输出命令本身…

微信小程序使用 “云函数“ 获取 “openid“

文章目录 1.前期准备2.具体操作步骤 1.前期准备 必须使用云开发已经配置好云开发 2.具体操作步骤 1.进入小程序开发工具→在云函数目录上右键→选中新建云函数 创建结束&#xff0c;自动上传&#xff08;必须确认已经上传才生效&#xff09; 2.进入对应页面的js文件&#…

QT 信号和槽 信号关联到信号示例 信号除了可以绑定槽以外,信号还可以绑定信号

信号除了可以关联到槽函数&#xff0c;还可以关联到类型匹配的信号&#xff0c;实现信号的接力触发。上个示例中因为 clicked 信号没有参数&#xff0c;而 SendMsg 信号有参数&#xff0c;所以不方便直接关联。本小节示范一个信号到信号的关联&#xff0c;将按钮的 clicked 信号…

【优化过往代码】关于vue自定义事件的运用

【优化过往代码】关于vue自定义事件的运用 需求说明过往代码优化思路优化后代码&#xff08;Vue2&#xff09;遇到问题记录 Vue2官方自定义指令说明文档 Vue3官方自定义指令说明文档 需求说明 进入某些页面需要加载一些外部资源&#xff0c;并在资源加载完后进行一些处理&…

51单片机数码管显示的计数器,按键按下暂定,再次按下继续。(按键功能使用中断实现)

1、功能描述 数码管显示的计数器&#xff0c;按键按下暂定&#xff0c;再次按下继续。&#xff08;按键功能使用中断实现&#xff09; 2、实验原理 按键与中断&#xff1a;使用单片机的外部中断功能来检测按键动作&#xff0c;实现非阻塞的按键检测。 中断服务程序&…