issue_7342981

意向

需求

创建于

2021-10-11 18:29

内容可能含有违规信息

### 目的

随着项目越来越大，工程的代码库也越来越庞大，复杂程度带来了一系列的问题。虽然代码可以压缩，但是仍然无法解决代码冗余的问题，关联耦合的问题。那么如何做到低代码化，按需加载需要用的代码呢？ 以下是我使用国产最新的DevEco Studio 2.1.0.501 IDE开发的OpenHarmony一个功能组件的过程。

### 前言

组件产出流程化，规范化，然后根据实践经验以及相关逻辑，抽象定义出相应的应用场景，然后根据相应的应用场景，确定组件的功能和后续的测试以及代码的迭代，首先确认组件名称，也就是我们需要做的组件功能。

### 工具

开发软件： DevEco Studio 2.1.0.501（DevEco Studio是HarmonyOS的配套的开发IDE，暂只支持Windows系统）,这个工具也可以进行应用开发，下面是软件概览，感兴趣的小伙伴可以试一下，
[https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/deveco-studio-overview.md](http://)

### 下载地址

1）下载并安装好DevEco Studio 2.1 Release及以上版本，下载链接：https://developer.harmonyos.com/cn/develop/deveco-studio#download
2）获取OpenHarmony SDK包并解压，下载链接：https://mirror.iscas.ac.cn/OpenHarmony/sdk/OpenHarmony-SDK-2.0-Canary.7z

### 搭建开发环境

1.安装OpenHarmony SDK
2.导入OpenHarmony工程
3.调试签名配置 [ps:  **这一步非常重要，希望小伙伴按照上面的链接的步骤一步步的操作配置** ]
4.在真机设备上运行应用 [ps: 没有开发板的可以省略此步骤，因为开发软件上面带预览功能，但是如果是正式开发还是需要在真机跑]

### 开发语言

JavaScript语言开发

### 组件功能

###  手机端评论功能

好了，到这里准备工作已经完成，接下来我们开始一步步开发，并调试。

- 新建 - 选择空项目语言js

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163910_750f20f9_9486837.png "屏幕截图.png")

- 输入项目的有信息

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163900_4b9876a2_9486837.png "屏幕截图.png")

当然也可以导入一个示例（JsHelloWorld）
传送门：[https://gitee.com/isrc_ohos/open-harmony-js-demos
](http://)

- 选择导入，会弹出一个选择导入的类型

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163843_a7355f5c_9486837.png "屏幕截图.png")

- 根据自己需要选择即可

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163831_d0899816_9486837.png "屏幕截图.png")

- 然后点next就行了，下面的是我开发的组件导入之后的界面

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163822_c83acf02_9486837.png "屏幕截图.png")

- 看下目录

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163811_9ef0446f_9486837.png "屏幕截图.png")

### 项目新建之后，

- 我的组件使用的js语言，主要功能是每个人可以发布评论，大家可在线评论的，类似论坛，微博的的评论功能
![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163724_35c13382_9486837.png "屏幕截图.png")

### 调试工具
![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163716_fcb86b8b_9486837.png "屏幕截图.png")

- 点击右上角的眼睛图标，可以边编辑，边预览，十分方便
![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163708_6d8a543e_9486837.png "屏幕截图.png")
- Js界面设置变量和方法供html页面使用，如下图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163659_cf52197a_9486837.png "屏幕截图.png")

- Css界面，我使用的是flex，如下图：

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163650_14674b89_9486837.png "屏幕截图.png")

- 好了，完成以上的功能内容后，我们就要打包了
OpenHarmony在工具栏点击Build->Build Hap(s)/APP(s)->Build Hap(s)，如下图：

![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/163619_fb179110_9486837.png "屏幕截图.png")

- 打包完成后，可以将打包的文件推送到自己的设备或者开发板，以下是详细的推送文档

[https://gitee.com/isrc_ohos/ultimate-harmony-reference/blob/master/OpenHarmony%20JS%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.md#%E4%BA%94%E8%BF%90%E8%A1%8C
](http://)

### 到这里，我的经验感想已经分享完了，感兴趣的可以去官方文档详细了解。
最后希望OpenHarmony能发展的越来越强大，大家一起努力加油！
 :muscle:

登录后才可以发表评论

状态

负责人

项目

里程碑

Pull Requests

关联的 Pull Requests 被合并后可能会关闭此 issue

分支

开始日期 - 截止日期

置顶选项

优先级

预计工期（小时）

参与者（1）

其他

https://gitee.com/gitee-community/OHZW210809.git

git@gitee.com:gitee-community/OHZW210809.git

gitee-community

OHZW210809

OpenHarmony组件开发大赛-有奖征文

Gitee Community/OpenHarmony组件开发大赛-有奖征文

内容风险标识

评论 (0)

Gitee Community/OpenHarmony组件开发大赛-有奖征文 .gitee-modal { width: 500px !important; }

内容风险标识

issue_7342981

评论 (0)

搜索帮助

Gitee Community/OpenHarmony组件开发大赛-有奖征文