牛宿-<HarmonyOS三方组件的开发与绘制>学习笔记 原创

【本文正在参与优质创作者激励】

Start Time: 11 February,2022

Author: Hairtail

Location: Gao Xing

引言

此系列是学习朱伟老师的直播课（HarmonyOS组件库应用及进阶）、董昱老师的直播课（HarmonyOS三方组件的开发与绘制）、张云波的直播课（ArkUI高级UI组件定制）后的学习笔记，包括直播内容，以及自己对组件和组件库的思考。

一、董昱老师的直播课-HarmonyOS三方组件的开发与绘制

网页地址

思维导图

（一）HarmonyOS应用程序的UI设计

• 设计包容性：Java UI/JS UI/eTS UI
• 生态开放性：推荐使用和贡献三方组件
• 各语言的UI设计构成：
  • Java UI
    • 表现/结构（XML）
    • 逻辑（Java）
  • JavaScript UI
    • 结构（HML）
    • 表现（CSS）
    • 逻辑（JS）
  • eTS UI
    • 结构/表现/逻辑（eTS）
• 应用程序设计最佳实践：
  • 用户页面部分：ArkUI（JS+eTS)
  • 业务逻辑部分：Java
  • 业务逻辑部分（性能敏感）：C++

（二）eTS UI设计和三方组件开发和绘制

eTS官方文档

• eTS=extended TypeScript

• 创建项目：
  • 注意：language选择eTS，SDK Version 7以上
  • 效果：
  • 解释：
• 小总结：布局是骨，组件是肉，内容是灵魂

• 创建一个圆组件，并使用：
• 绘制HarmonyOS的白色圆圈：
  • 
• 把FirstComp单独拎出来：
  • 
• 复杂的自定义：通过Path组件进行绘制
  • 使用SVG软件绘制SVG路径
  • 使用Shape和Path组件添加SVG路径
  • 设置颜色等属性

Path组件文档

• 使用Path和Shap组件绘制五边形

（三）JS UI设计和三方组件开发

• 流程：封装成的新组件->element引入组件->使用组件
  • if-else的使用
  • 事件绑定：使用(on|@)child1语法

//官方文档基础用法
<element name='comp1' src='../../common/component/comp1/comp1.hml'></element>
<element name='comp2' src='../../common/component/comp2/comp2.hml'></element>
<div>
  <comp1 if="{{showComp1}}" prop1='xxxx' @child1="bindParentVmMethodOne"></comp1>
  <comp2 else prop1='xxxx' @child1="bindParentVmMethodTwo"></comp2>
</div>
1.
2.
3.
4.
5.
6.
7.

• 自定义组件的创建及引入

（四）Java UI设计和三方组件开发

• 不宜花太多时间
• 自定义组件方式很多，现成的资源比较丰富
• Component有四个基本构建方法，都需要实现
• 实例：地图组件，TinyMap For HarmonyOS

（五）附件一览