CH5-JS基础语法

文章目录

  • 前言
  • 目标
  • 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文件中包含的内容,结构和样式。

20220116213655

数据绑定

可以在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选择器用于选择需要添加样式的元素,常见的五种选择器如下表

20220116214219

<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;
}

20220116214341

  • 当多条选择器声明匹配到同一元素时,各类选择器优先级由高到低顺序为:内联样式>id > class > tag优先级高的选择器样式设置会覆盖优先级低的选择器样式,同级的选择器后面的样式会覆盖前面的样式。
  • 组件样式的生命除了用单独的.css文件外,也可以直接定义在.hml文件中
<div class="container">
	<text style="color: red">Hello World</text>
	</div>

伪类

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

20220116214512

当按钮被点击时,背景颜色变为蓝色。

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

20220116215039

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

方法

20220116215302

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');
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绿洲213

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值