OpenHarmony开发实例:【 待办事项TodoList】

这篇具有很好参考价值的文章主要介绍了OpenHarmony开发实例:【 待办事项TodoList】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

TodoList应用是基于OpenHarmony SDK开发的安装在润和HiSpark Taurus AI Camera(Hi3516d)开发板标准系统上的应用;应用主要功能是以列表的形式,展示需要完成的日程;通过本demo可以学习到 JS UI 框架List使用;

运行效果

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

样例原理

本demo只有一个list组件组成,初始化数据展示列表,并设置点击事件改变数据状态,重新渲染列表

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

工程版本
  • 系统版本/API版本:OpenHarmony SDK API 8
  • IDE版本:DevEco Studio 3.0 Beta3

快速上手

准备硬件环境

搭建标准系统环境

准备开发环境
  • 安装最新版[DevEco Studio]。
  • 请参考[配置OpenHarmony SDK],完成DevEco Studio的安装和开发环境配置。
准备工程

鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

配置git
  • 提前注册准备码云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
工程导入
  • DevEco Studio导入本工程;

    打开DevEco Studio,点击File->Open->下载路径/FA/TodoList

    OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

    OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

编译
  • 点击File > Project Structure > Project > Signing Configs界面勾选“Automatically generate signing”,等待自动签名完成即可,点击“OK”。如下图所示:

    OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

  • 点击Build->Build Hap/APPs 编译,编译成功生成entry-default-signed.hap

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

烧录/安装
  • 识别到设备后点击

    OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

    ,或使用默认快捷键Shift+F10(macOS为Control+R)运行应用。

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

  • [安装应用]如果IDE没有识别到设备就需要通过命令安装,如下

    打开OpenHarmony SDK路径 \toolchains 文件夹下,执行如下hdc_std命令,其中path为hap包所在绝对路径。

    hdc_std install -r path\entry-default-signed.hap//安装的hap包需为xxx-signed.hap,即安装携带签名信息的hap包。

工程目录

完整的项目结构目录如下

├─entry\src\main
│          │  config.json  //应用配置文件
│          │  
│          ├─js
│          │  └─MainAbility
│          │      │  app.js  // 应用程序入口
│          │      │  
│          │      ├─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

开发步骤

1. 新建OpenHarmony ETS项目

在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next,Language 选择JS语言,最后点击Finish即创建成功。 

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

2. 编写主页面

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

2.1页面展示

1)最外层是[div]容器,并在class里面设置背景色为黑色按行布局;

2)再通过[list]包裹[list-item]的 内层div 容器按列布局,并设置点击事件[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点击事件

点击某一行后,并根据当前行的状态改变相反的状态

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;
            }
        }
    },
操作体验
列表滑动

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

鸿蒙Next核心技术分享

1、鸿蒙基础知识←《鸿蒙NEXT星河版开发学习文档》

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

2、鸿蒙ArkUI←《鸿蒙NEXT星河版开发学习文档》

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

3、鸿蒙进阶技术←《鸿蒙NEXT星河版开发学习文档》

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

 4、鸿蒙就业高级技能←《鸿蒙NEXT星河版开发学习文档》 

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

 5、鸿蒙多媒体技术←《鸿蒙NEXT星河版开发学习文档》 

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

6、鸿蒙南向驱动开发←《鸿蒙NEXT星河版开发学习文档》  

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

7、鸿蒙南向内核设备开发←《鸿蒙NEXT星河版开发学习文档》  

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发

 8、鸿蒙系统裁剪与移植←《鸿蒙NEXT星河版开发学习文档》  

OpenHarmony开发实例:【 待办事项TodoList】,鸿蒙,harmonyos,鸿蒙系统,程序员,移动开发,OpenHarmony,鸿蒙,编程开发文章来源地址https://www.toymoban.com/news/detail-861276.html

到了这里,关于OpenHarmony开发实例:【 待办事项TodoList】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙开发实例 | 分布式涂鸦

    CSDN话题挑战赛第2期 参赛话题:学习笔记  本篇文章介绍分布式设备间如何共享涂鸦画板的核心功能。 在涂鸦画板中有3个核心功能:     (1) 涂鸦者选择好希望连接的设备后,可以直接把涂鸦成果流转给对应的设备。     (2) 其他设备接收流转的涂鸦后,可以在涂鸦的基础上添

    2024年02月09日
    浏览(16)
  • 鸿蒙开发实例|构建轻量级智能穿戴设备用户界面

    HarmonyOS提供了轻量级智能穿戴应用开发,开发者可以在运动手表上开发跨设备协同工作的应用,如从与之匹配的智能手机、平板等各类设备上获取信息,便捷地显示在运动手表上,或通过对运动手表的操作来控制其他设备上的操作任务,为消费者带来更加灵活、智慧的分布式

    2024年02月03日
    浏览(14)
  • HarmonyOS鸿蒙开发指南:基于ArkTS的声明式开发范式 声明式UI开发实例 绘图与动画

    目录 绘制图形 绘制基本几何图形 绘制自定义几何图形 animateTo实现闪屏动画 页面转场动画 绘制能力主要是通过框架提供的绘制组件来支撑,支持svg标准绘制命令。 本节主要学习如何使用绘制组件,绘制详情页食物成分标签(基本几何图形)和应用Logo(自定义图形)。

    2024年01月17日
    浏览(14)
  • HarmonyOS鸿蒙开发指南:UI开发 基于ArkTS的声明式开发范式 声明式UI开发实例 页面布局与连接

    目录 构建食物数据模型 构建食物列表List布局 构建食物分类Grid布局  页面跳转与数据传递

    2024年02月03日
    浏览(13)
  • iOS开发Swift-12-列表UI,TableViewController,动态响应Button勾选-待办事项App(1)

    1.创建新项目 为项目添加图标 2.将Table View Controller添加到界面中 将箭头移动到Table View上来,代表它是首页(根页面).选中ViewController,点击Delete,对它进行删除.将代码ViewController.swift也删除掉. 新建一个Cocoa Touch Class. 将TableViewController的class设置成TodosViewController. 2.为cell取名为TodoC

    2024年02月09日
    浏览(15)
  • 智能合约入门开发实例

    web3开发:前端使用ethers.js调用Hello智能合约。 hello.sol 智能合约文件: dapp.html  前端文件:

    2024年02月02日
    浏览(17)
  • 安卓开发实例:方向传感器

    调用手机的方向传感器,X轴,Y轴,Z轴的数值 activity_sensor.xml Sensor.java

    2024年02月06日
    浏览(10)
  • HarmonyOS 远端状态订阅开发实例

    IPC/RPC 提供对远端 Stub 对象状态的订阅机制, 在远端 Stub 对象消亡时,可触发消亡通知告诉本地 Proxy 对象。这种状态通知订阅需要调用特定接口完成,当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户,需要实现消亡通知接口 DeathRecipient 并实现 onRemote

    2024年02月07日
    浏览(17)
  • HarmonyOS开发实例:【分布式邮件】

    基于TS扩展的声明式开发范式编程语言编写的一个分布式邮件系统,可以由一台设备拉起另一台设备,每次改动邮件内容,都会同步更新两台设备的信息。效果图如下: 完成本篇Codelab我们首先要完成开发环境的搭建,本示例以 Hi3516DV300 开发板为例,参照以下步骤进行: [获取

    2024年04月28日
    浏览(12)
  • Arduino开发实例-Arduino中断详解

    本文是关于Arduino中断的文章。中断是一种让Arduino在特定事件发生时执行特定代码的功能。中断可以让Arduino在后台执行一些重要的任务,也可以让Arduino在低功耗模式下被唤醒。中断的使用需要注意一些细节和注意事项,本文将介绍中断的基本概念、使用方法和示例。 中断是

    2024年02月11日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包