簡(jiǎn)介

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使用；

運(yùn)行效果

樣例原理

本demo只有一個(gè)list組件組成，初始化數(shù)據(jù)展示列表，并設(shè)置點(diǎn)擊事件改變數(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]。
• 請(qǐng)參考[配置OpenHarmony SDK]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。

準(zhǔn)備工程

鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

配置git

• 提前注冊(cè)準(zhǔn)備碼云gitee賬號(hào)。
• 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,點(diǎn)擊File->Open->下載路徑/FA/TodoList
  

編譯

• 點(diǎn)擊File > Project Structure > Project > Signing Configs界面勾選“ Automatically generate signing ”，等待自動(dòng)簽名完成即可，點(diǎn)擊“ OK ”。如下圖所示：
• 點(diǎn)擊Build->Build Hap/APPs 編譯，編譯成功生成entry-default-signed.hap

燒錄/安裝

• 識(shí)別到設(shè)備后點(diǎn)擊，或使用默認(rèn)快捷鍵Shift+F10（macOS為Control+R)運(yùn)行應(yīng)用。

• [安裝應(yīng)用]如果IDE沒有識(shí)別到設(shè)備就需要通過命令安裝，如下
  打開OpenHarmony SDK路徑 toolchains 文件夾下，執(zhí)行如下hdc_std命令，其中path為hap包所在絕對(duì)路徑。

  hdc_std install -r pathentry-default-signed.hap//安裝的hap包需為xxx-signed.hap，即安裝攜帶簽名信息的hap包。
  

工程目錄

完整的項(xiàng)目結(jié)構(gòu)目錄如下

HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

├─entrysrcmain
│          │  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項(xiàng)目

在DevEco Studio中點(diǎn)擊File -> New Project ->[Standard]Empty Ability->Next，Language 選擇JS語言，最后點(diǎn)擊Finish即創(chuàng)建成功。

2. 編寫主頁面

2.1頁面展示

1）最外層是[div]容器，并在class里面設(shè)置背景色為黑色按行布局；

2）再通過[list]包裹[list-item]的 內(nèi)層div 容器按列布局，并設(shè)置點(diǎn)擊事件[onclick]

3）[div]容器按列布局依次寫入[image] 組件和 div 容器 ；

4）div容器里面又包裹一個(gè)div容器和以及[text]組件,且div容器里面也是兩個(gè)按列布局的[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點(diǎn)擊事件

點(diǎn)擊某一行后，并根據(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;
            }
        }
    },

操作體驗(yàn)

列表滑動(dòng)

審核編輯 黃宇