鸿蒙培训三

图片下载地址：iconfont-阿里巴巴矢量图标库

视频链接;鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili

博客链接：技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结

1、导入图片，设置图标：

阿里图标库内下载图片；

图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径；

图片动画并未出现，为什么呢？因为图片的渲染机制是直接更改到对应的大小，所以，我们需要保证心形在图片中占有的位置，使用截图工具截图后，终于出现了心形跳动的结果。

2、页面结构设计注意事项：

（1）页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。

（2）文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。

（3）可以直接调用鸿蒙JS封装好的组件。

3、页面样式设计注意事项：

（1）页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。

（2）页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。

（3）鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异，这个尤其需要注意。

4、事件绑定

类似 v-on，在 js 中绑定的函数和 data 同级

hml：<div onclick="clickfunc"></div> 或 <div @click="clickfunc"></div>

js： 放在 data 后: