> 文档中心 > HarmonyOS JS Demo应用开发

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。

情感课堂