【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）原创

愚公搬代码

发布于 2022-1-19 16:11

浏览

1收藏

春节不停更，此文正在参加「星光计划-春节更帖活动」

文章目录

前言

每种应用程序都有自己的语法，比如vue，react，angular。华为鸿蒙开发也不例外而且语法和前端框架类似，会前端的化，上手还是很快的。

一、HML语法

1.HML定义

是不是和HTML很像，但HML并不是HTML。

HML（HarmonyOS Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。

2.数据绑定

<div class='container'>
    <text> 我是变量:{{title}}</text>
    <text> 我是数组:{{arr[0]}}-----{{arr[1]}}</text>
    <text> 我是对象: 姓名 :{{obj.name}}</text>
    <text> 我是对象: 年龄 :{{obj.age}}</text>
</div>
1.
2.
3.
4.
5.
6.

export default {
    data: {
        title:"模板语法",
        arr: ['001','002'],
        obj:{name:'愚公',age:30}
    },
}
1.
2.
3.
4.
5.
6.
7.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区

3.普通事件绑定

<div class="container">
    <text class="title">计数器：{{count}}</text>
    <div class="box">
        <button class='btn' onclick="increase">
            加
        </button>
        <button class='btn' @click="decrease">
            减
        </button>
        <button class='btn' @click="multiply(2)">
            乘2
        </button>
        <button class='btn' @click="multiply(10)">
            乘10
        </button>
        <button class='btn' @click="multiply(count)">
            乘计数器
        </button>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

export default {
    data: {
        count: 0
    },
    increase() {
        this.count++;
    },
    decrease() {
        this.count--;
    },
    multiply(multiplier) {
        this.count = multiplier * this.count;
    }
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区

4.冒泡事件和捕获事件

4.1冒泡事件

<!-- xxx.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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

export default {
    clickfunc: function(e) {
        console.log(e);
    },
    touchstartfuc: function(e) {
        console.log(e);
    },
}
1.
2.
3.
4.
5.
6.
7.
8.

4.2 捕获事件

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

export default {
    touchstartfuc: function(e) {
        console.log(e);
    },
}
1.
2.
3.
4.
5.

4.3 综合案例

<div  on:touchstart.capture="capture1"  on:touchstart.bubble="bubble1">
    <div on:touchstart.capture="capture2"  on:touchstart.bubble="bubble2">
        <text on:touchstart.capture="capture3"  on:touchstart.bubble="bubble3">测试</text>
    </div>
</div>
1.
2.
3.
4.
5.

export default {
    capture1(){
        console.log("capture1")
    },
    capture2(){
        console.log("capture2")
    },
    capture3(){
        console.log("capture3")
    },
    bubble1(){
        console.log("bubble1")
    },
    bubble2(){
        console.log("bubble2")
    },
    bubble3(){
        console.log("bubble3")
    }
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区

5.列表渲染

<div class="container">
    <!-- 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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

export default {
    data: {
        array: [
            {id: 1, name: '愚公', age: 30},
            {id: 2, name: '愚婆', age: 20},
        ],
    },
    changeText: function() {
        if (this.array[1].name === "愚公"){
            this.array.splice(1, 1, {id:2, name: '愚小一', age: 18});
        } else {
            this.array.splice(2, 1, {id:3, name: '愚小二', age: 15});
        }
    },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区

5.条件渲染

<div class="container">
    <!--if/elif/else-->
    <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
    <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
    <text if="{{visible}}"> 我是if-1 </text>
    <text elif="{{display}}"> 我是if-2 </text>
    <text else> 我是if-3 </text>
    <!--show-->
    <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
    <text show="{{visibleShow}}" >我是show</text>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

export default {
    data: {
        visible: false,
        display: true,
        visibleShow:false,
    },
    toggleShow: function() {
        this.visible = !this.visible;
    },
    toggleDisplay: function() {
        this.display = !this.display;
    },
    toggle: function() {
        this.visibleShow = !this.visibleShow;
    },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区
第一种写法里if为else时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建。

6.条件渲染

<list>
    <block for="glasses">
        <list-item type="glasses">
            <text>{{$item.name}}</text>
        </list-item>
        <block for="$item.kinds">
            <list-item type="kind">
                <text>{{$item.name}}</text>
                <text>{{$item.color}}</text>
            </list-item>
        </block>
    </block>
</list>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

export default {
    data: {
        glasses: [
            {name:'销售系统', kinds:[{name:'订单管理',color:'001'},{name:'产品管理',color:'002'}]},
            {name:'财务系统', kinds:[{name:'成本会计',color:'003'}]},
        ],
    },
}
1.
2.
3.
4.
5.
6.
7.
8.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区

7.模板引用

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

<element name='comp' src='../../common/template.hml'></element>
<div>
    <comp name="愚公" age="30"></comp>
</div>
1.
2.
3.
4.

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）-鸿蒙开发者社区

二、CSS导入和JS导入

1.CSS导入

@import '../../common/style.css';
.container {
  justify-content: center;
}
1.
2.
3.
4.

2.JS导入

2.1 模块声明

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

import router from '@system.router';
1.

2.2 代码引用

使用import方法导入js代码：

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

2.3 对象导入

2.3.1全局对象

//获取app.js对象
this.$app.$def
1.
2.

本地对象

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
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

2.3.2 DOM元素

 <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
 <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
1.
2.

const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
1.
2.

2.3.3 获取ViewModel

主视图

<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div>
  <parentComp></parentComp>
</div>
1.
2.
3.
4.

export default {
  data: {
    text: 'I am root!',
  },
}
1.
2.
3.
4.
5.

parent视图

<element name='childComp' src='../child/child.hml'></element>
<div>
  <childComp id = "selfDefineChild"></childComp>
</div>
1.
2.
3.
4.

console.info(`${this.$parent().text}`);//获取主视图的text
console.info(`${this.$child('selfDefineChild').childClicked()}`);//获取指定id子视图的方法
1.
2.

子视图

<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
</div>
1.
2.
3.

export default {
  data: {
    text: 'I am child component!',
  },
  childClicked () {
    console.info(`${this.$parent().text}`);//获取父视图
    console.info(`${this.$root().text}`);//获取顶级视图
  },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

分类

HarmonyOS

标签

过年不停更

鸿蒙

3条回复

按时间正序

按时间倒序

愚公搬代码

欢迎大家多多留言

2022-1-19 22:54:57

aaaaaSir

赞赞赞

2022-9-15 21:07:24

物联风景

厉害厉害

2022-9-16 14:37:57

51CTO

51CTO博客

51CTO学堂

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）原创

文章目录

前言

一、HML语法

1.HML定义

2.数据绑定

3.普通事件绑定

4.冒泡事件和捕获事件

4.1冒泡事件

4.2 捕获事件

4.3 综合案例

5.列表渲染

5.条件渲染

6.条件渲染

7.模板引用

二、CSS导入和JS导入

1.CSS导入

2.JS导入

2.1 模块声明

2.2 代码引用

2.3 对象导入

2.3.1全局对象

2.3.2 DOM元素

2.3.3 获取ViewModel

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版） 原创

文章目录

前言

一、HML语法

1.HML定义

2.数据绑定

3.普通事件绑定

4.冒泡事件和捕获事件

4.1冒泡事件

4.2 捕获事件

4.3 综合案例

5.列表渲染

5.条件渲染

6.条件渲染

7.模板引用

二、CSS导入和JS导入

1.CSS导入

2.JS导入

2.1 模块声明

2.2 代码引用

2.3 对象导入

2.3.1全局对象

2.3.2 DOM元素

2.3.3 获取ViewModel

目录

订阅鸿蒙技术特刊，精选内容抢先看

【愚公系列】华为鸿蒙OS-02-页面语法的使用（JS版）原创