赞
踩
随着 OpenHarmony
组件开发大赛结果公布,我们的团队成员被告知获得了二等奖,在开心之余也想将我们这段时间宝贵的开发经验写下来与大家分享,当我们看到参赛通知的时候已经是 9 月中旬的时候,此时已经是作品可以提交的时间了,参考了一些其他作品发现,基于 Canvas
开发的组件目前还没有,那我们就开始计划写一个基于 Canvas
和通用组件一起开发的组件,在这之前由于并没有开发过 OpenHarmony
应用,我们团队成员都没有相关的经验,大家从零开始在摸索,我们首先分工合作,有的成员负责去下载 IDE
和调试设备,有的成员负责研究和阅读官方文档。先附上源代码,分享和总结不易,求点赞关注一下⭐️:
https://github.com/Wscats/openharmony-sheet
在阅读完官方文档之后,我们成员分别在自己本地电脑和设备上做了以下的环境配置:
OpenHarmony SDK
在 DevEco
主界面,点击工具栏中的 File
> Settings
> Appearance & Behavior
> System Settings
> HarmonyOS SDK
界面,点击 HarmonyOS SDK Location
加载 SDK
:
然后一直点击 Next
和 Finish
完成环境配置。
OpenHarmony-SDK-2.0-Canary/js/2.2.0.0/build-tools/ace-loader
目录,然后在该目录下运行命令行工具,分别执行如下命令,直至安装完成npm cache clean -f
npm install
DevEco Studio
OpenHarmony
与 HarmonyOS
的证书不通用,所以需要额外进行申请HAP
应用安装包,生成 HAP
应用安装包,安装到 OpenHarmony
开发板Previewer
调试,虽然非常相当方便,但实际表现肯定和真机是有稍微差异的在实现 Canvas
应用之前,我们经过一些商量和讨论,首先是希望能借助这一次开发提升对 OpenHarmony
的理解,方便后续业务的支持,其次我们团队成员也是希望能拿到比较好的名次和奖励,我们注意到比赛的评分由评委打分,满分为 100 分,这里会根据作品的创意性、实用性、用户体验、代码规范等四个维度点评打分,Canvas
的应用首先实现成本会比普通应用难度稍微大点,并且不好调试,在创意性和实用性上我们优势不大,因为大部分前端开发者接触到的 Canvas
应用都是游戏相关的,所以这条路注定是会相对艰难的,用户体验也是一个很大的难点,我们真机测试发现 Canvas
的表现也不是很好,比原生一些组件的体验差很多,对于团队成员的代码质量是有信心的,但是代码规范的评分比重却是最少的,所以在立项的时候我们有比较大的分歧。
评选维度 | 说明 | 分值 |
---|---|---|
创意性 | 作品的创新程度 | 30% |
实用性 | 作品在应用场景中的实际应用程度 | 30% |
用户体验 | 用户体验价值,用户能够轻松使用组件,并获得良好体验感 | 25% |
代码规范 | 代码的质量,美观度,是否符合规范 | 15% |
正因为由上面总总的疑虑,我们先制定了三个计划和一个目标:
Canvas
游戏 - OpenHarmonyFlappyBirdCanvas
渲染引擎 - OpenHarmonySheet渲染引擎是我们最终目标,虽然难度偏大,但我们团队成员决定分开三步来实现该目标,首先至少先学会使用基础组件和容器组件,然后再学会使用画布组件,最后综合这些经验实现一个渲染引擎。
我们首先实现了一个通用的画廊组件来作为练手项目,它主要使用了四个基础组件和容器组件:
我们放置一个按钮来触发 showGallery
方法,该方法控制 panel
弹出式组件的显示和隐藏,这里的 div
和 button
标签就是 hml
内置的组件,跟我们平常写 html
很相似,它支持我们大部分的常规属性如 id
,class
和 type
等,方便我们用来设置组件基本标识和外观特征显示。
<div class="btn-div">
<button type="capsule" value="Click Here" onclick="showGallery"></button>
</div>
然后我们 panel
组件中放置可变更的画廊内容展示窗口,并让 mode
和 src
变成可设置的变量,这样画廊组件就能根据模式让画廊组件显示不同的形态,根据传入的图片地址显示不同的图片内容,这里的语法跟微信小程序很和 Vue
框架相似,都可以使用 Mustache
语法来控制属性值。
<panel id="gallery" class="gallery" type="foldable" mode="{ {modeFlag}}}" onsizechange="changeMode" > <div class="panel-div" onclick="closeGallery"> <image class="panel-image" onclick="closeGallery" src="{ {galleryUrl}}}"></image> <button class="panel-circle" onclick="closeGallery" type="circle" icon="/common/images/close.svg" ></button> </div> </panel>
实现完视图和布局之后,我们就可以在同级目录下 index.js
中补充画廊组件的逻辑,由于支持 ES6
语法,我们写的也很舒服很高效,这里的 data 是画廊组件的数据模型,类型可以是对象或者函数,如果类型是函数,返回值必须是对象,注意属性名不能以 $
或 _
开头,不要使用保留字,我们在这里给 modeFlag
和 galleryUrl
设置默认值。
export default {
data: {
modeFlag: "full",
galleryUrl:
"https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_1440w.jpg?source=172ae18b",
},
};
而显示和隐藏逻辑比较简单,只需要获取 panel
的节点,然后触发 show
或者 hide
方法即可,当然除了该方法,我们还可以使用 渲染属性
来实现:
for
根据设置的数据列表,展开当前元素if
根据设置的 boolean
值,添加或移除当前元素show
根据设置的 boolean
值,显示或隐藏当前元素showGallery(e) {
this.$element('gallery').show()
},
closeGallery(e) {
if(e.target.type==='image') return
this.$element('gallery').close()
},
我们还可以在同级目录下在 index.css
补充组件的样式,可以让我们的画廊呈现更好的效果,这里动画样式还支持动态的旋转、平移、缩放和渐变效果,均可在 style
或 css
中设置。
.panel-div {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
整体实现的效果如下图所示,效果简单粗暴,写完了这个 DEMO
之后,我们团队成员对 OpenHarmony
的基础组件运用有了最基本的了解:
虽然上面我们掌握了最基础的组件使用,但我们还是没使用到 Canvas
画布组件,所以我们继续翻阅官方文档,发现 OpenHarmony
是提供了齐全的画布接口:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。