HarmonyOS JS Demo应用开发
文章目录
-
- 前言
- 注意事项
前言
体验下"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] "约会"event和"小黄点"tag在一个div
(这里取名叫div1吧)中。
[2] "14:30"time和div1,在更大的div2(这里取名叫div2吧)中。使用Flex进行上下布局。
[3] ✔️、❎和div2,为一个list-item。