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

<!-- test.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>

1.2 -> 数据绑定

<!-- test.hml -->
  <div onclick="changeText">
  <text> {
  
  {content[1]}} </text>
  </div>

/*test.css*/
.container{
  margin: 200px;
}

// test.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语法。

1.3 -> 普通事件绑定

事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。

事件支持的写法有：

"funcName"：funcName为事件回调函数名(在JS文件中定义相应的函数实现)。
"funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量(前面不用写this.)。
示例

<!-- test.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>

/* test.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;
}

// test.js
export default {
  data: {
    count: 0
  },
  increase() {
    this.count++;
  },
  decrease() {
    this.count--;
  },
  multiply(multiplier) {
    this.count = multiplier * this.count;
  }
};

1.4 -> 冒泡事件绑定5+

冒泡事件绑定包括：

绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{event}.bubble。
绑定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。
示例

<!-- test.hml -->
  <div>
  <!-- 使用事件冒泡模式绑定事件回调函数。5+ -->;
<div on:touchstart.bubble="touchstartfunc"></div>
  <div on:touchstart="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向上传递。5+ -->
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <div grab:touchstart="touchstartfunc"></div>
  <!-- 使用事件冒泡模式绑定事件回调函数。6+ -->
  <div on:click.bubble="clickfunc"></div>
  <div on:click="clickfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向上传递。6+ -->
  <div grab:click.bubble="clickfunc"></div>
  <div grab:click="clickfunc"></div>
  </div>

// test.js
export default {
  clickfunc: function(e) {
    console.log(e);
  },
  touchstartfuc: function(e) {
    console.log(e);
  },
}

说明

采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。

1.5 -> 捕获事件绑定5+

Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。

捕获事件绑定包括：

绑定捕获事件：on:{event}.capture。
绑定并阻止事件向下传递：grab:{event}.capture。
示例

<!-- test.hml -->
  <div>
  <!-- 使用事件捕获模式绑定事件回调函数。5+ -->
  <div on:touchstart.capture="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
  <div grab:touchstart.capture="touchstartfunc"></div>
  </div>

// xxx.js
export default {
  touchstartfuc: function(e) {
    console.log(e);
  },
}

1.6 -> 列表渲染

<!-- test.hml -->
  <div class="array-container" style="flex-direction: column;margin: 200px;">
  <!-- div列表渲染 -->
  <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
  <div for="{
  
  {array}}" tid="id" onclick="changeText">
  <text>{
  
  {$idx}}.{
  
  {$item.name}}</text>
  </div>
  <!-- 自定义元素变量名称 -->
  <div for="{
  
  {value in array}}" tid="id" onclick="changeText">
  <text>{
  
  {$idx}}.{
  
  {value.name}}</text>
  </div>
  <!-- 自定义元素变量、索引名称 -->
  <div for="{
  
  {(index, value) in array}}" tid="id" onclick="changeText">
  <text>{
  
  {index}}.{
  
  {value.name}}</text>
  </div>
  </div>

// test.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});
    }
  },
}

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不支持表达式。

1.7 -> 条件渲染

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

<!-- test.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="{
  
  {visible}}"> Hello-world1 </text>
  <text elif="{
  
  {display}}"> Hello-world2 </text>
  <text else> Hello-World </text>
  </div>

/* test.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}

// test.js
export default {
  data: {
    visible: false,
    display: true,
  },
  toggleShow: function() {
    this.visible = !this.visible;
  },
  toggleDisplay: function() {
    this.display = !this.display;
  }
}

优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。

<!-- test.hml -->
  <div class="container">
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text show="{
  
  {visible}}" > Hello World </text>
  </div>

/* test.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}

// test.js
export default {
  data: {
    visible: false,
  },
  toggle: function() {
    this.visible = !this.visible;
  },
}

说明

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

1.8 -> 逻辑控制块

<block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。

<!-- test.hml -->
  <list>
  <block for="glasses">
  <list-item type="glasses">
  <text>{
  
  {$item.name}}</text>
  </list-item>
  <block for="$item.kinds">
  <list-item type="kind">
  <text>{
  
  {$item.color}}</text>
  </list-item>
  </block>
  </block>
  </list>

// test.js
export default {
  data: {
    glasses: [
      {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]},
      {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]},
    ],
  },
}

1.9 -> 模板引用

<!-- template.hml -->
<div class="item"> 
  <text>Name: {
  
  {name}}</text>
  <text>Age: {
  
  {age}}</text>
</div>

<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
  <comp name="Tony" age="18"></comp>
</div>

2 -> CSS语法

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

2.1 -> 尺寸单位

逻辑像素px(文档中以<length>表示)：
- 默认屏幕具有的逻辑宽度为720px，实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素(从720px向1440物理像素，所有尺寸放大2倍)。
- 额外配置autoDesignWidth为true时，逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。
百分比(文档中以<percentage>表示)：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。

2.2 -> 样式导入

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

2.3 -> 声明样式

每个页面目录下存在一个与布局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.4 -> 选择器

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

选择器	样例	样例描述
.class	.container	用于选择class="container"的组件。
#id	#titleld	用于选择id="titleId"的组件。
tag	text	用于选择text组件。
,	.title, .content	用于选择class="title"和class="content"的组件。
#id .class tag	#containerld .content text	非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：#containerId>.content。

示例：

<!-- 页面布局test.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">标题</text>
  <div class="content">
    <text id="contentId">内容</text>
  </div>
</div>

/* 页面样式test.css */
/\* 对所有div组件设置样式 \*/
div {
  flex-direction: column;
}
/* 对class="title"的组件设置样式 */
.title {
  font-size: 30px;
}
/* 对id="contentId"的组件设置样式 */
#contentId {
  font-size: 20px;
}
/* 对所有class="title"以及class="content"的组件都设置padding为5px */
.title, .content {
  padding: 5px;
}
/\* 对class="container"的组件下的所有text设置样式 \*/
.container text {
  color: \#007dff;
}
/\* 对class="container"的组件下的直接后代text设置样式 \*/
.container &gt; text {
  color: \#fa2a2d;
}

以上样式运行效果如下：

其中“.container text”将“标题”和“内容”设置为蓝色，而“.container > text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖。

2.5 -> 选择器优先级

选择器的优先级计算规则与w3c规则保持一致(只支持：内联样式，id，class，tag，后代和直接后代)，其中内联样式为在元素style属性中声明的样式。

当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 > id > class > tag。

2.6 -> 伪类

css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为true时的样式。

除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列：

名称	支持组件	描述
:diaabled	支持disabled属性的组件	表示disabled属性变为true时的元素(不支持动画样式的设置)。
:active	支持click事件的组件	表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。
:waiting	button	表示waiting属性为true的元素(不支持动画样式的设置)。
:checked	input[type="checkbox"、type=“radio”]、switch	表示checked属性为true的元素(不支持动画样式的设置)。

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

<!-- index.hml -->
<div class="container">
  <input type="button" class="button" value="Button"></input>
</div>

/* index.css */
.button:active {
  background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
}

说明

针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker。

2.7 -> 样式预编译

预编译提供了利用特有语法生成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.8 -> CSS样式继承6+

css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承：

font-family
font-weight
font-size
font-style
text-align
line-height
letter-spacing
color
visibility

3 -> JS语法

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

3.1 -> 语法

支持ES6语法。

模块声明

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

import router from '@system.router';

代码引用

使用import方法导入js代码：

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

3.2 -> 对象

应用对象

属性

类型

描述

$def

Object

使用this.$app.$def获取在app.js中暴露的对象。

说明：

> 应用对象不支持数据绑定，需主动触发UI更新。

示例代码

// app.js
export default {
  onCreate() {
    console.info('Application onCreate');
  },
  onDestroy() {
    console.info('Application onDestroy');
  },
  globalData: {
    appData: 'appData',
    appVersion: '2.0',
  },
  globalMethod() {
    console.info('This is a global method!');
    this.globalData.appVersion = '3.0';
  }
};

// index.js页面逻辑代码
export default {
  data: {
    appData: 'localData',
    appVersion:'1.0',
  },
  onInit() {
    this.appData = this.$app.$def.globalData.appData;
    this.appVersion = this.$app.$def.globalData.appVersion;
  },
  invokeGlobalMethod() {
    this.$app.$def.globalMethod();
  },
  getAppVersion() {
    this.appVersion = this.$app.$def.globalData.appVersion;
  }
}

页面对象

属性	类型	描述
data	Object/Function	页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。 data与private和public不能重合使用。
$refs	Object	持有注册过ref 属性的DOM元素或子组件实例的对象。
private	Object	页面的数据模型，private下的数据属性只能由当前页面修改。
public	Object	页面的数据模型，public下的数据属性的行为与data保持一致。
props	Array/Object	props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。
computed	Object	用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

3.3 -> 方法

数据方法

方法

参数

描述

$set

key: string, value:any

添加新的数据属性或者修改已有数据属性。

用法：

this.$set('key',value)：添加数据属性。

$delete

key: string

删除数据属性。

用法：

this.$delete('key')：删除数据属性。

示例代码

// index.js
export default {
  data: {
    keyMap: {
      OS: 'HarmonyOS',
      Version: '2.0',
    },
  },
  getAppVersion() {
    this.$set('keyMap.Version', '3.0');
    console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0

    this.$delete('keyMap');
    console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
  }
}

公共方法

方法	参数	描述
$element	id: string	获得指定id的组件对象，如果无指定id，则返回根组件对象。用法： <div id='xxx'></div> - this.$element('xxx')：获得id为xxx的组件对象。 - this.$element()：获得根组件对象。
$rootElement	无	获取根组件对象。用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。
$root	无	获得顶级ViewModel实例。
$parent	无	获得父级ViewModel实例。
$child	id: string	获得指定id的子级自定义组件的ViewModel实例。用法： this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

事件方法

方法

参数

描述

$watch

data: string, callback: string | Function

观察data中的属性变化，如果属性值改变，触发绑定的事件。

用法：

this.$watch('key', callback)

页面方法

方法	参数	描述
scrollTo6+	scrollPageParam: ScrollPageParam	将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。

**表1 ScrollPageParam6+**
名称	类型	默认值	描述
position	number	-	指定滚动位置。
id	string	-	指定需要滚动到的元素id。
duration	number	300	指定滚动时长，单位为毫秒。
timingFunction	string	ease	指定滚动动画曲线，可选值。
complete	() => void	-	指定滚动完成后需要执行的回调函数。

示例：

this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})

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();
    }
  },
};

2. 通过$element获取DOM元素

<!-- index.hml -->
<div class="container">
  <image-animator class="image-player" id="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.$element('animator'); // 获取id属性为animator的DOM元素
    const state = animator.getState();
    if (state === 'paused') {
      animator.resume();
    } else if (state === 'stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

3.5 -> 获取ViewModel

根节点所在页面：

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
  <div class="container">
    <text>{
  
  {text}}</text>
    <parentComp></parentComp>
  </div>
</div>

// root.js
export default {
  data: {
    text: 'I am root!',
  },
}

自定义parent组件：

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="parentClicked">parent component click</text>
  <text class="text-style" if="{
  
  {showValue}}">hello parent component!</text>
  <childComp id = "selfDefineChild"></childComp>
</div>

// parent.js
export default {
  data: {
    showValue: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.showValue = !this.showValue;
    console.info('parent component get parent text');
    console.info(`${this.$parent().text}`);
    console.info("parent component get child function");
    console.info(`${this.$child('selfDefineChild').childClicked()}`);
  },
}

自定义child组件：

<!-- child.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{
  
  {show}}">hello child component</text>
</div>

// child.js
export default {
  data: {
    show: false,
    text: 'I am child component!',
  },
  childClicked () {
    this.show = !this.show;
    console.info('child component get parent text');
    console.info('${this.$parent().text}');
    console.info('child component get root text');
    console.info('${this.$root().text}');
  },
}

感谢各位大佬支持！！！

互三啦！！！