1 Star 0 Fork 246

金永生 / knowledge_demo_smart_home

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 8.09 KB
一键复制 编辑 原始数据 按行查看 历史
super_派派 提交于 2022-09-16 00:26 . update docs/NutRecipes/README.md.

坚果食谱(NutRecipes)

应用场景简介

  • 居家生活。

  • 做中餐。

  • 做西餐。

    还可以学习做菜,查看做菜的配料,做菜的步骤等等。

运行效果

工程版本

  • 系统版本/API版本:OpenHarmony SDK API 8
  • IDE版本:DevEco Studio 3.0 Beta4

快速上手

准备硬件环境

准备开发环境

准备工程

工程下载
git clone https://gitee.com/openharmony-sig/knowledge_demo_smart_home.git
工程导入
  • DevEco Studio导入本工程;

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

编译

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

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

烧录/安装

  • 识别到设备后点击,或使用默认快捷键Shift+F10(macOS为Control+R)运行应用。

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

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

    hdc_std install -r path\entry-debug-standard-ark-signed.hap

相关概念

容器组件

基础组件

通用

TS语法糖

好的接下来我将详细讲解如何制作

开发教学

创建好的 eTS工程目录

新建工程的ETS目录如下图所示。

各个文件夹和文件的作用:

  • index.ets:用于描述UI布局、样式、事件交互和页面逻辑。
  • app.ets:用于全局应用逻辑和应用生命周期管理。
  • pages:用于存放所有组件页面。
  • resources:用于存放资源配置文件。

接下来开始正文。

我们的主要操作都是在在pages目录中,然后我将用不到10分钟的时间,带大家实现这个功能。

拆解

具体布局

具体布局设计到一些细节的地方,例如间隔,边框,当前组件尺寸设置等一些特殊情况,基本上就是嵌套,一层一层去实现。

代码结构

编码

恭喜你

在本文中,通过实现坚果菜谱App示例,我主要为大家讲解了如下ArkUI(基于TS扩展的类Web开发范式)组件,以及路由跳转。

容器组件

基础组件

通用

TS语法糖

希望通过本教程,各位开发者可以对以上基础组件具有更深刻的认识。

后面的计划:

  • UI美化
  • 动画交互

参考资料

1
https://gitee.com/Cruise2019/knowledge_demo_smart_home.git
git@gitee.com:Cruise2019/knowledge_demo_smart_home.git
Cruise2019
knowledge_demo_smart_home
knowledge_demo_smart_home
master

搜索帮助