簡介
TodoList應(yīng)用是基于OpenHarmony SDK開發(fā)的安裝在潤和HiSpark Taurus AI Camera(Hi3516d)開發(fā)板標(biāo)準(zhǔn)系統(tǒng)上的應(yīng)用；應(yīng)用主要功能是以列表的形式，展示需要完成的日程；通過本demo可以學(xué)習(xí)到 JS UI 框架List使用；
運行效果
樣例原理
本demo只有一個list組件組成，初始化數(shù)據(jù)展示列表，并設(shè)置點擊事件改變數(shù)據(jù)狀態(tài)，重新渲染列表
工程版本
- 系統(tǒng)版本/API版本：OpenHarmony SDK API 8
- IDE版本：DevEco Studio 3.0 Beta3
快速上手
準(zhǔn)備硬件環(huán)境
搭建標(biāo)準(zhǔn)系統(tǒng)環(huán)境
準(zhǔn)備開發(fā)環(huán)境
- 安裝最新版[DevEco Studio]。
- 請參考[配置OpenHarmony SDK]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
準(zhǔn)備工程
鴻蒙開發(fā)指導(dǎo)文檔：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md點擊或者復(fù)制轉(zhuǎn)到。
配置git
-
提前注冊準(zhǔn)備碼云gitee賬號。
-
git工具下載安裝
sudo apt install git sudo apt install git-lfs -
配置git用戶信息
git config --global user.name "yourname" git config --global user.email "your-email-address" git config --global credential.helper store
git下載
git clone https://gitee.com/openharmony-sig/knowledge_demo_smart_home.git --depth=1工程導(dǎo)入
-
DevEco Studio導(dǎo)入本工程;
打開DevEco Studio,點擊File->Open->下載路徑/FA/TodoList
編譯
- 點擊File > Project Structure?>?Project > Signing Configs界面勾選“Automatically generate signing”，等待自動簽名完成即可，點擊“OK”。如下圖所示：
- 點擊Build->Build Hap/APPs 編譯，編譯成功生成entry-default-signed.hap
燒錄/安裝
- 識別到設(shè)備后點擊
，或使用默認(rèn)快捷鍵Shift+F10（macOS為Control+R)運行應(yīng)用。
-
[安裝應(yīng)用]如果IDE沒有識別到設(shè)備就需要通過命令安裝，如下
打開OpenHarmony SDK路徑 \toolchains?文件夾下，執(zhí)行如下hdc_std命令，其中path為hap包所在絕對路徑。
hdc_std install -r path\entry-default-signed.hap//安裝的hap包需為xxx-signed.hap，即安裝攜帶簽名信息的hap包。
工程目錄
完整的項目結(jié)構(gòu)目錄如下
├─entry\src\main
│ │ config.json //應(yīng)用配置文件
│ │
│ ├─js
│ │ └─MainAbility
│ │ │ app.js // 應(yīng)用程序入口
│ │ │
│ │ ├─common // 公共資源
│ │ │ │ checkbutton.png
│ │ │ │ delete.png
│ │ │ │ done.png
│ │ │ │ head0.png
│ │ │ │ head1.png
│ │ │ │ head2.png
│ │ │ │ head3.png
│ │ │ │ head4.png
│ │ │ │ right.png
│ │ │ │
│ │ │ └─images
│ │ │ bg-tv.jpg
│ │ │ Wallpaper.png
│ │ │
│ │ ├─i18n // 多語言文件
│ │ │ en-US.json
│ │ │ zh-CN.json
│ │ │
│ │ └─pages
│ │ └─index
│ │ index.css //頁面樣式
│ │ index.hml //首頁展示
│ │ index.js //頁面邏輯
│ │
│ └─resources
│ ├─base
│ │ ├─element
│ │ │ string.json
│ │ │
│ │ └─media
│ │ icon.png
│ │
│ └─rawfile開發(fā)步驟
1. 新建OpenHarmony ETS項目
在DevEco Studio中點擊File -> New Project ->[Standard]Empty Ability->Next，Language 選擇JS語言，最后點擊Finish即創(chuàng)建成功。?
2. 編寫主頁面
2.1頁面展示
1）最外層是[div]容器，并在class里面設(shè)置背景色為黑色按行布局；
2）再通過[list]包裹[list-item]的 內(nèi)層div 容器按列布局，并設(shè)置點擊事件[onclick]
3）[div]容器按列布局依次寫入[image]?組件和 div 容器 ；
4）div容器里面又包裹一個div容器和以及[text]組件,且div容器里面也是兩個按列布局的[text]
<div class="container">
<list class="tag-list" initialindex="{{initialIndex}}">
<list-item for="{{taskList}}" class="todo-list-item" focusable="false">
<div class="todo-item flex-row" onclick="completeEvent({{$item.id}})">
<image class="todo-image" src="{{$item.checkBtn}}" ></image>
<div class="todo-text-wrapper">
<div class="todo-name-mark">
<text class="todo-name {{$item.color}}" focusable="false">{{$item.event}}</text>
<text class="todo-mark {{$item.tag}} {{$item.showTag}}"></text>
</div>
<text class="todo-time" >{{$item.time}}</text>
</div>
</div>
</list-item>
</list>
</div>2.2點擊事件
點擊某一行后，并根據(jù)當(dāng)前行的狀態(tài)改變相反的狀態(tài)
completeEvent(e) {
for (let i of this.taskList) {
if (i.id == e) {
if (i.checkBtn == "/common/done.png") {
i.checkBtn = "/common/checkbutton.png";
i.showTag = 'show';
i.color = 'text-default';
i.completeState = false;
} else {
i.checkBtn = "/common/done.png";
i.showTag = 'hide';
i.color = 'text-gray';
i.completeState = true;
}
return;
}
}
},操作體驗
列表滑動
鴻蒙Next核心技術(shù)分享
1、鴻蒙基礎(chǔ)知識←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》
2、鴻蒙ArkUI←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》
3、鴻蒙進(jìn)階技術(shù)←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》
?4、鴻蒙就業(yè)高級技能←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》?
?5、鴻蒙多媒體技術(shù)←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》?
6、鴻蒙南向驅(qū)動開發(fā)←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》??
7、鴻蒙南向內(nèi)核設(shè)備開發(fā)←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》??
文章來源：http://www.zghlxwxcb.cn/news/detail-861276.html
?8、鴻蒙系統(tǒng)裁剪與移植←《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》??
文章來源地址http://www.zghlxwxcb.cn/news/detail-861276.html
到了這里，關(guān)于OpenHarmony開發(fā)實例：【 待辦事項TodoList】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
