公开揭密团队成员开发鸿蒙 OpenHarmony 的完整过程(收获官方7k奖金和开发板等，2w字用心总结)

背景

随着 OpenHarmony 组件开发大赛结果公布，我们的团队成员被告知获得了二等奖，在开心之余也想将我们这段时间宝贵的开发经验写下来与大家分享，当我们看到参赛通知的时候已经是 9 月中旬的时候，此时已经是作品可以提交的时间了，参考了一些其他作品发现，基于 Canvas 开发的组件目前还没有，那我们就开始计划写一个基于 Canvas 和通用组件一起开发的组件，在这之前由于并没有开发过 OpenHarmony 应用，我们团队成员都没有相关的经验，大家从零开始在摸索，我们首先分工合作，有的成员负责去下载 IDE 和调试设备，有的成员负责研究和阅读官方文档。先附上源代码，分享和总结不易，求点赞关注一下⭐️：

https://github.com/Wscats/openharmony-sheet

配置

在阅读完官方文档之后，我们成员分别在自己本地电脑和设备上做了以下的环境配置：

1. 下载并安装好 DevEco Studio 2.1 Release 及以上版本
2. 获取 OpenHarmony SDK 包并解压
3. 配置 OpenHarmony SDK

在 DevEco 主界面，点击工具栏中的 File > Settings > Appearance & Behavior > System Settings > HarmonyOS SDK 界面，点击 HarmonyOS SDK Location 加载 SDK：

然后一直点击 Next 和 Finish 完成环境配置。

4. 安装额外包，进入 OpenHarmony-SDK-2.0-Canary/js/2.2.0.0/build-tools/ace-loader 目录，然后在该目录下运行命令行工具，分别执行如下命令，直至安装完成

npm cache clean -f
npm install

5. 下载 OpenHarmonyJSDemos 项目工程，将工程导入 DevEco Studio
6. 申请并配置证书，注意 OpenHarmony 与 HarmonyOS 的证书不通用，所以需要额外进行申请
7. 进行编译构建，生成一个 HAP 应用安装包，生成 HAP 应用安装包，安装到 OpenHarmony 开发板
8. 安装运行后，在开发板屏幕上点击应用图标即可打开应用，即可在设备上查看应用示例运行效果，以及进行相关调试
9. 除了使用真机调试，我们还可以使用远程调试和本地的 Previewer 调试，虽然非常相当方便，但实际表现肯定和真机是有稍微差异的

前言

在实现 Canvas 应用之前，我们经过一些商量和讨论，首先是希望能借助这一次开发提升对 OpenHarmony 的理解，方便后续业务的支持，其次我们团队成员也是希望能拿到比较好的名次和奖励，我们注意到比赛的评分由评委打分，满分为 100 分，这里会根据作品的创意性、实用性、用户体验、代码规范等四个维度点评打分，Canvas 的应用首先实现成本会比普通应用难度稍微大点，并且不好调试，在创意性和实用性上我们优势不大，因为大部分前端开发者接触到的 Canvas 应用都是游戏相关的，所以这条路注定是会相对艰难的，用户体验也是一个很大的难点，我们真机测试发现 Canvas 的表现也不是很好，比原生一些组件的体验差很多，对于团队成员的代码质量是有信心的，但是代码规范的评分比重却是最少的，所以在立项的时候我们有比较大的分歧。

评选维度	说明	分值
创意性	作品的创新程度	30%
实用性	作品在应用场景中的实际应用程度	30%
用户体验	用户体验价值，用户能够轻松使用组件，并获得良好体验感	25%
代码规范	代码的质量，美观度，是否符合规范	15%

计划

正因为由上面总总的疑虑，我们先制定了三个计划和一个目标：

• 使用基础组件和容器组件等实现通用组件 - OpenHarmonyGallery
• 使用画布组件实现 Canvas 游戏 - OpenHarmonyFlappyBird
• 使用基础组件，容器组件和画布组件实现 Canvas 渲染引擎 - 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 是提供了齐全的画布接口：

我们使用经典 FlappyBird</