实战篇：带着大家用鸿蒙HarmonyOS做项目（三：初版项目完成，吐槽鸿蒙）

Shaka
3,968 阅读6分钟

前言

在前面，我们已经完成了Home、Mine、Calendar三个模块了

现在我们继续往下Data模块和Add模块

这次我们要完成整个项目啦~

大家加油！

Data

老样子，新建一个Data.ets，然后再TabBar中引用

image.png

DataPane模块

我现在想搞一个冰箱容量的模块

那么我可以用一下自带的DataPanel组件

image.png

但是这个组件比较蛋疼，只能说还不完善吧，功能较少

image.png

效果

image.png

但是我现在并不知道每个模块都是什么东西，光有个占比，所以我自己加了一个文本，并加上了一个背景色，用来区分

image.png

image.png

这是目前的效果，需要说的是，颜色好像也不能更改，我还是自己吸的色，哈哈哈哈有点搞笑在里面

东西太多了，我给抽出去了，大家到这里应该懂我的意思了

image.png

目前除了这个Arc自带的这个组件，我还找到了一个openharmony第三方的库，叫做ohos-MPChart

image.png

它有点类似于echarts，可以完成一些更多的可视化效果，但是文档太难受了

image.png

是全是代码的形式，看惯了组件库的文档的我，表示很难受，而且在使用的时候API还出现了一些问题，所以先搁置了，待我研究一下这里打算单门再出文章

但是由此我看到目前已经有一些第三方库，于是我想去自建库，也就是文档的这里

image.png

但是我第一步就卡住了

image.png

这个库的模板在哪啊？目前也没有找到，求教。。

并不是想造轮子，是根本没有啥轮子，要不也得封装，不如做个库了

但是还不知道咋建立，所以目前只能单建项目，把封装的组件记录一下了

这里有懂建库的可以评论一下

ohpm踩坑

当我最开始用ohpm的时候是失败的，如果有人遇到了可以看我下面的解决方案

如果你想通过ohpm来下载依赖发现失败的时候

0c961f6e39ab1b7d75ba5de690f49a7.png

这个时候你先检查一下，你的配置是不是出问题了

如果不会配置的话

官网文档这里教了，挺全面的：developer.harmonyos.com/cn/docs/doc…

正常完事是这样的

image.png

如果你在引入库出现这个报错的话

image.png

那么你可以在setting中将下面这项关掉

image.png

List

好的，我们继续

我现在想里面的内容更加细分，比如，我想知道我现在的食品里面都有什么，于是我打算再搞一个List

image.png

老朋友了，我们先做成目前的效果

好的，我们现在加点内容

image.png

这是我想要的效果，于是我把这一块封装成一个DataItem组件

image.png

然后里面的值需要父组件进行传递

于是我新建了一个ItemData存放数据

image.png

这里懒得起名字了，所以草率了点

然后在Data.ets中进行遍历

image.png

效果

image.png

然后这里我希望我的这个List是横向的

那么我们需要改变排列方向

image.png

image.png

所以现在可以得到效果

List.gif

Add

最后一个模块了，现在我们别的地方都完成了，就差一个加入商品了

首先新建Add.ets然后再TabBar中进行替换

我的构想是这样的，理论上可以扫描二维码或者条形码，快速加入商品，但是此部分内容较为复杂，可以通过OpenHarmony的三方库 @ohos/zxing，它是一个解析/生成一维码/二维码的库

image.png

地址：OpenHarmony-TPC/zxing (gitee.com)

这里仅仅提供样式和布局，后面有时间了我再加上功能

除了扫码，我们还可以通过输入框输入信息来添加商品

那咱们开始吧~

扫描条形码的部分我封装成一个Scan组件

然后我用Stack布局简单书写一下我想要的样式

image.png

看看效果

image.png

好的，开始剩余的部分，剩余的部分类似于一个表单

image.png

所以这里简单封装一下，我叫做ProductForm

我们简单写一下，目前是这样的

image.png

发现有大量的重复样式，所以这里我们可以用样式装饰器@Extend

首先，把Text的封装了

image.png

然后是输入框

image.png

然后有两个输入框是输入日期的，这里我们不想手写输入，而是需要通过日期选择器进行输入

那我们第一时间应该想到DatePickerDialog

image.png

那我们就去写一下

image.png

看看效果

time.gif

好的，效果没问题，现在我们这里按照之前Mine的思路进行父子间的传值即可，我们改进一下ProductForm

image.png

image.png

这样就可以获取到值了

我们看看效果吧

time1.gif

这里的时间大家可以通过Date获取当前的日期，比较简单，我就给大家提供个思路

最后我们再加一个按钮即可

image.png

效果

image.png

结尾

wan.gif

项目的初版算是完成了，希望大家不要去深挖一些业务逻辑上的漏洞，因为这个项目主要是为了帮助大家学习，复习一些ArcTS的语法，以及一些组件的使用

当然，目前我自己也是很不满意的，所以我在下一节会对整个项目进行优化和改造（但是整体页面效果不会变太多，大多是细节和逻辑上的优化）

整体大概是四节，跟我预料的差不多，写这种实战教学真的耗时耗精力，希望大家多支持

希望这套专栏对大家有所帮助吧~那么这一切都是值得的

有什么问题或者交流的话可以加V：Js_perplexed09

感谢大家的支持~

后面出什么内容大家可以建议一下

吐槽

ArcUI的确处在一个较为初步的阶段，组件功能不够完善，有一些组件还没有，很多都需要自己封装，不知道Arc组件库啥时候出

IDE有bug，有时候会生成js和一些文件

官方文档待完善，有的地方书写的不对（不知道是不是没更新）

不知道大家有没有同样的感受：文档找东西费劲（我感觉是设计问题），我现在多少算是熟读文档了，但是有的时候我想找点找过的东西，这个费劲

第三方库太少了，自己想封装还不知道为啥库的模板没有了

一些小的坑属于不记得了，可能也算是无伤大雅吧。。

另外，能不能页面调试方便一点，类似于微信开发者工具那样也行（虽然体验感也挺差的）

但是最后，我想说的是，我是期待国内的技术蓬勃发展的，我也很期待鸿蒙能够很好地发展，在ArcTS普及的初期，难免问题会多一些，但是希望官方能尽快地完善

期间华为打过几次电话寻求开发者反馈，我反馈了不少，但是并不知道结果如何

希望能做的更好吧~

avatar
文章
阅读
粉丝