HarmonyOS JS Demo应用开发_harmonyos js $t

前言

体验下"HarmonyOS JS Demo应用开发"。

视频教程：HarmonyOS JS Demo应用开发

源码仓库：harmonyos_app_samples

目前没有HarmonyOS结构性的认识，需要了解的话，可自行参考官方文档。

上面链接中的demo，站在应用开发者的角度来看，大体是：html显示内容，css控制样式，JavaScript用于交互。

由于仓库代码使用Apache License 2.0，这里可以复制/修改仓库中的部分代码用于笔记，完整代码见仓库。

简介：

本示例适用于介绍如何开发一个 JS Demo 应用。

此应用通过一个列表的示例展示JS应用开发过程中的界面布局和逻辑实现。

在应用页面展示日程安排的列表，列表项由事项名称、时间、紧急程度组成。支持勾选和删除事项列表。

---

注意事项

代码比较容易看懂。这里我们仅仅看下列表中的一个元素是如何布局的。

因为我的前端比较菜，所以这里关注下布局。

html代码如下：

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    
    <list>
        <list-item for="{{todayList}}" class="todo-list-item">
            <image class="todo-image-left" src="{{$item.checkBtn}}" onclick="completeEvent({{$item.id}})"></image>
            <div class="todo-item flex-row">
                <div class="todo-name-mark">
                <text class="todo-name">{{$item.event}}</text>
                <text class="todo-mark {{$item.tag}}"></text>
                </div>
            <text class="todo-time">{{$item.time}}</text>
            </div>
            <image class="todo-image-right" src="/common/images/delete.png" onclick="deleteEvent({{$item.id}})" show="{{$item.completeState}}"></image>
        </list-item>
    </list>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

显示的效果如下：

[1] "约会"event和"小黄点"tag在一个div(这里取名叫div1吧)中。

[2] "14:30"time和div1，在更大的div2(这里取名叫div2吧)中。使用Flex进行上下布局。

[3] ✔️、❎和div2，为一个list-item。