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

兼容JS的类Web开发范式

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

1. 项目基本结构

1.1. 目录结构

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伪类是选择器中的关键字，用于指定要选择元素的特殊状态。

名称	支持组件	描述
:active	input[type="button"]	表示被用户激活的元素，如：被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。
:checked	input[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. 对象

• 页面对象

  属性	类型	描述
  data	Object/Function	页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
  $refs	Object	持有注册过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)