文章目录
- 前言
- 目标
- 1.HML语法
- 页面结构
- 数据绑定
- 事件绑定
- 列表渲染
- 条件渲染
- 2.CSS语法
- 尺寸单位
- 样式选择器
- 伪类
- 3.JS语法
- 语法
- 对象
- 方法
前言
HarmonyOS的轻量级UI框架,使用JS作为其应用开发的一种语言,并提供主流的类Web开发范式和数据模型(MVVM即Model-View-ViewModel),即用户通过编写JS、CSS、HTML标签和数据绑定
的方式开发UI代码和业务逻辑。
目标
掌握JS UI的语法基础,为后续学习基于JS UI的HarmonyOS应用开发创造条件。
1.HML语法
页面结构
HML文件中采用类似html
定义页面元素的方法定义APP页面组成,JS UI框架处理该代码时会生成页面的文档对象模型
(Document Object Model,DOM)。通过DOM,JS能够动态处理HML文件中包含的内容,结构和样式。
数据绑定
可以在HML文件中需要进行数据后续设置
和变更的地方进行数据绑定
操作。
<div>
<text> {icontent[1]}}</text>
</div>
这里text文本框的内容在HML文件中是没有设置的。其数据来自于JS文件。
export default {
data: {
content: ['Hello World!", 'Welcome to my world!']
}
}
事件绑定
在移动应用中,页面元素经常要与用户交互,交互的主要方式是手指的触摸事件,对触摸事件的响应
。事件通过'on'
或者'@'
绑定在组件上,当组件触发事件时会执行JS文件中对应的事件回调函数。
<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="square"@click="multiply(count)"/>
</div>
</div>
列表渲染
移动应用页面中经常需要对一类相同的元素进行显示,如联系人,图片库等,可以使用列表渲染方法。
<div class="array-container">
<div for="{{array}" tid="id" onclick="changeText">
<text>{{$idx]}}.{{$item.name}}</text>
</div>
<div for="ffvalue 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>
条件渲染
条件渲染分为2种: if/elif/else和show。这两种方式都可以控制组件的显示
。两种写法的区别在于:
- 第一种写法里if为false时,组件不会在vdom中构建,也不会渲染,
- 而第二种写法里show为false时虽然也不渲染,但会在vdom中构建;
- 另外,当使用if/elif/else写法,节点必须是兄弟节点,否则编译无法通过。
<text if="{{showit}}"> Hello-TV </text>
<text elif="{{display}}"> Hello-Wearable </text>
<text else> Hello-World </text>
2.CSS语法
尺寸单位
- 在页面元素的样式描述中,第一个需要定义的是
组件的大小
。因为JS UI支持一次开发,多端部署,其实就需要页面元素在不同的分辨率下都能够显示在恰当的位置。实现该过程只需要修改样式文件
就可以了,对页面结构文件.hml和页面逻辑文件.js是不需要变更的。 - 要实现该目标,必须了解样式文件中用到的
组件尺寸单位
与实际物理像素点大小
之间的映射关系。在样式文件中用到的尺寸单位为逻辑像素px和百分比,其与物理像素和屏幕大小之间的关系为:逻辑像素px
︰默认屏幕具有的逻辑宽度为720px(手机屏幕),如100px在实际宽度为1440物理像素的屏幕上,实际渲染为200物理像素百分比
: .css文件中通常以%表示,表示该组件占父组件尺寸的百分比。
样式选择器
CSS选择器用于选择需要添加样式的元素,常见的五种选择器如下表
<div id="containerld" class="container">
<text id="titleld" class="title">标题</text>
<div class="content">
<text id="contentld">内容</text>
</div>
</div>
div {
flex-direction: column;
}
.title {
font-size: 30px;
}
#contentld {font-size: 20px;}
.title,.content {
margin: 20px;
}
.container text {
color: #007dff;
}
- 当多条选择器声明匹配到同一元素时,各类
选择器优先级
由高到低顺序为:内联样式>id > class > tag
。优先级高的选择器样式设置会覆盖优先级低的选择器样式,同级的选择器后面的样式会覆盖前面的样式。 - 组件样式的生命除了用单独的.css文件外,也可以直接定义在.hml文件中
<div class="container">
<text style="color: red">Hello World</text>
</div>
伪类
CSS伪类是选择器中的关键字
,用于指定要选择元素的特殊状态。
当按钮被点击时,背景颜色变为蓝色。
<div class="container">
<input type="button" class="button" value="Button"></input>
</div>
.button:active {
background-color: blue;
}
3.JS语法
语法
-
this关键字
-
模块声明
import router from '@system.router';
-
代码引用
import utils from '../../common/utils.js';js
对象
- JS文件中除了自定义对象外,常用的系统对象包括应用对象,页面对象等。
- 应用对象
- 页面对象
- 应用对象为
$app
,其属性包括$def
,该属性为Object类型,可以使用this.$app.$def
获取在app.js中暴露的对象。
//app.js
export default {
globalData: {
appData: 'appData',
appVersion: '2.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;
},
}
$refs&computed
<div class="container">
<image-animator class="image-player"ref="animator" images="{{images}}"duration="1s">
</image-animator>
</div>
handleClick(){
const animator = this.$refs.animator;
}
computed: {
message() {
return this.time +' ' + this.objTitle;
},
notice: {
get(){
return this.time;
},
set(newValue){
this.time = newValue;
},
},
},
onClick() {
console.info('get clickevent ' + this.message);
this.notice = 'Tomorrow";
console.info(this.time);
},
方法
export default {
data: {
keyMap: {
OS: 'Harmonyos',
Version: '2.0',
},
},
getAppVersion() {
this.$set('keyMap.Version', '3.0');
console.info("keyMap.Version = " + this.keyMap.Version);
this.$delete('keyMap');
console.info("keyMap.Version = " + this.keyMap);
}
}
公共方法:$element
<div class="container">
<button onclick="handleClick">clickme</button>
<image-animator class="image-player"id="animator" images="ffimages]}"duration="1s"></image-animator></div>
handleClick(){
const animator = this.$element('animator');
}
公共方法:$element
<div class="container">
<button onclick="handleClick">clickme</button>
<image-animator class="image-player"id="animator" images="ffimages]}"duration="1s"></image-animator></div>
handleClick(){
const animator = this.$element('animator');
}