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

简介

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

运行效果

样例效果

样例原理

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

原理图

工程版本
  • 系统版本/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点击或者复制转到。

搜狗高速浏览器截图20240326151450.png

配置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

    打开工程

    导入工程

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

    运行

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

编译

编译完成

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

    img

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

运行

  • [安装应用]如果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即创建成功。 

image-20211124092813545

2. 编写主页面

image-20211124093106260

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

样例效果

鸿蒙Next核心技术分享

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

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

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/1884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端三剑客 HTML+CSS+JavaScript ③ HTML标准结构

生活没有任何意义&#xff0c;这就是活着的理由&#xff0c;而且是唯一的理由 —— 24.4.22 一、HTML注释 1.特点 注释的内容会被浏览器所忽略&#xff0c;不会呈现到页面中&#xff0c;但源代码中依然可见 2.作用 对代码进行解释和说明 3.写法 <!-- xxxxx --> <html&…

上位机图像处理和嵌入式模块部署(树莓派4b使用pcl点云库)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 图像处理&#xff0c;大家都知道它有显著的优点和缺点。优点就是分辨率高&#xff0c;信息丰富。缺点就是&#xff0c;整个图像本身没有深度信息。…

高效可扩展,使用Dask进行大数据分析

大家好&#xff0c;Dask技术作为并行计算领域的创新力量&#xff0c;正在重塑大数据的处理模式。这项开源项目为Python语言带来了强大的并行计算能力&#xff0c;突破了传统数据处理在扩展性和性能上的瓶颈。 本文将介绍Dask的发展历程、架构设计&#xff0c;并分析其在大数据…

Nacos服务注册中心

1.引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency>2.application.properties中配置 # 应用名称 spring.application.namenacos-aserver…

接收区块链的CCF会议--SecureComm 2024 截止5.10 附录用率

会议名称&#xff1a;SecureComm CCF等级&#xff1a;CCF C类会议 类别&#xff1a;网络与信息安全 录用率&#xff1a;2022年录用率33%&#xff08;43/130) Topics Security and privacy in computer networks (e.g., wired, wireless, mobile, hybrid, sensor, vehicular,…

UI5:面向企业级应用的JavaScript框架

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

ng反向代理 conf配置

log_format szxw_timed_combined $remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for" $request_time $upstream_response_time;#外部转发 …

15.Nacos服务分级存储模型

服务跨集群调用问题&#xff1a; 服务调用尽可能的选择本地集群的服务&#xff0c;跨集群调用延迟较高。 本地集群不可访问的情况下&#xff0c;再去访问其他集群。 如何配置集群的实例属性&#xff1a; spring: cloud:nacos:server-addr: localhost:8848 #nacos服务端地址d…

findImg找图工具

findImg 安装 npm install findImg -g 启动 findImg run 介绍 找出当前目录下的所有图片&#xff08;包括svg的symbol格式&#xff09;在浏览器中显示出来 源码 https://github.com/HuXin957/find-img 场景 例如前端项目中的img目录&#xff0c;大家都在往里面放图片&#xff…

java接口自动化测试

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

那些早期的iax和SIP软电话软件界面,看看你见过几个?

目录 一些iax/sip软电话UI图片SIP软电话的界面怎么设计SIP软电话的功能有哪些 早期voip发展中&#xff0c;很多公司开发了自己的SIP软电话&#xff0c;有些已经不存在了&#xff0c;有些还在使用中&#xff0c;比如X-Lite&#xff0c;Zoiper等等&#xff0c;我们一起看看这些早…

lvgl图形化设计工具GUI Guider结合使用

前言 上篇博客整合了lvgl到项目中&#xff0c;采用的是自己编写源码的方式&#xff0c;实现了个简单的界面。实际过程中一般情况开发界面都借助设计工具&#xff0c;这里使用的是gui guider来进行示例记录 项目结构&#xff08;生成代码路径依然放到项目路径下&#xff09; C…

实验2 组合逻辑电路与时序逻辑电路设计

实验目的: 1.构建基于verilog语言的组合逻辑电路和时序逻辑电路; 2.掌握verilog语言的电路设计技巧。 3.完成如下功能:加法器、译码器、多路选择器、计数器、移位寄存器等。 实验内容及步骤: 一、实验原理 原理图文件《数字系统设计_sch.pdf》,找到如下两个部分: 图…

一文扫盲(5):实验室管理系统的界面设计

本次带来第5期&#xff1a;实验室管理系统的设计&#xff0c;从系统定义、功能模块、界面构成和设计着力点四个方面讲解&#xff0c;大千UI工场愿意持续和大家分享&#xff0c;欢迎关注、点赞、转发。 一、什么是实验室管理系统 实验室管理系统是一种用于管理和监控实验室运作…

nodejs版本过高导致vue-cli无法启动的解决方案

目录 前言异常现象解决方案总结 前言 之前使用软件管家升级了Nodejs&#xff0c;今天在运行Vue项目的时候老是报错&#xff0c;查了很多资料&#xff0c;最后确定是Nodejs版本过高导致的。 异常现象 E:\project\ry\RuoYi-Cloud\ruoyi-ui>npm run dev> ruoyi3.6.4 dev …

13-LINUX--消息队列

一.消息队列 1.消息队列&#xff1a;消息队列为一个进程向另一个进程发送一个数据块提供了条件&#xff0c;每个数据块会包含一个类型。 2.相关函数 1>.msgget(key_t key,int msgflg) : 创建消息队列 2>. msgsnd&#xff1a;把消息添加到消息队列 3>.msgrcv &#xf…

CSS布局 Flex 和 Grid

在 CSS 中&#xff0c;理解 flex 和 Grid 布局非常重要&#xff0c;今天把这两个重要知识点回顾一下。 Flexbox 弹性盒子布局 弹性布局支持 flex、inline-flex&#xff0c;支持块和内联。 容器 轴的概念&#xff0c;在 Flexbox&#xff0c;有主轴和侧轴的概念&#xff0c;轴…

实验 3--表的基本操作与数据查询

文章目录 实验 3--表的基本操作与数据查询4.3.1 实验目的4.3.2 实验准备实验内容1.在 SSMS 中向数据库 YGKQ 中的表插入数据。2.使用 T-SQL 语句向 YGKQ 中的表插入数据。3.在 SSMS 中删除数据库 YGKQ 中的表数据。4.使用 T-SQL 语句删除数据库 YGKQ中的表数据。5.在 SSMS 中修…

OPAM模型(细粒度图像分类)

OPAM模型&#xff08;细粒度图像分类&#xff09; 摘要Abstract1. OPAM1.1 文献摘要1.2 细粒度图像分类1.3 研究背景1.4 OPAM模型创新点1.5 OPAM模型1.5.1 补丁过滤1.5.2 显着性提取1.5.3 细粒度区域级注意模型对象-空间约束方法&#xff08;Object spatial constraint&#xf…

WSL安装-问题解决

WslRegisterDistribution failed with error: 0x8004032d WslRegisterDistribution failed with error: 0x80080005 Error: 0x80080005 ??????? 解决&#xff1a; 1、 winr输入&#xff1a;optionalfeatures.exe 2、打开这两项