- 基本内容:
- 配置对应的 SDK 版本
- 在 DevEco Studio 菜单栏,点击Tools > SDK Manager
- 浏览软件页面:View——tool Windows——previewer
- 解除软件页面的锁定:右上角——设置——view mode——float
- 真机测试:
- PS:在 Views 可以快速设置编辑器主题,以及对应的开发设置
- 配置对应的 SDK 版本
- 主要关注口:
- entry
- src
- main
- java、js、resources
- resources里的devicetype js
- java、js、resources
- main
- src
- js的内容(JS 模块 (entry/src/main/js/module) 的典型开发目录结构)
- 目录结构中文件分类
- .hml 结尾的 HML 模板文件:当前页面的文件布局结构
- .css 结尾的 CSS 样式文件:页面样式
- .js 结尾的 JS 文件:处理页面和用户的交互
- 各个文件夹的作用
- app.js 文件:
- 用于全局 JavaScript 逻辑和应用生命周期管理
- pages 目录:
- 用于存放所有组件页面
- common 目录:
- 用于存放公共资源文件,比如:媒体资源和 JS 文件
- i18n 目录:
- 用于配置不同语言场景资源内容,比如:应用文本词条,图片路径等资源,注意 i18n 是开发保留文件夹,不可重命名
- app.js 文件:
- 目录结构中文件分类
- 文件使用规则
- 文件访问规则
- 应用资源可通过绝对路径或相对路径的方式进行访问,本开发框架中绝对路径以 "/" 开头,相对路径以 "./" 或 "../"
- 引用代码文件,需使用相对路径,比如:../common/utils.js。
- 引用资源文件,推荐使用绝对路径。比如:/common/xxx.png。
- 媒体文件格式
- app.js 标签中包含了实例名称、页面路由信息
- 每个应用可以在 app.js 自定义应用级生命周期的实现逻辑
- onCreate:在应用生成时被调用的生命周期函数
- onDestory:在应用销毁时被调用的生命周期函数
- 视频范例
- 文件访问规则
- 基础组件介绍及 Chart 组件使用(主要寻找官网)
- 动画帧
- 图片会自动缩放,所以需要对图片背景进行更改
- ps :图片引用时的位置选好,改为引用js时,要注意不能使用绝对路径
- ps:创建新页面后
- (1)要去config.gson里配置路由
- (2)所有pages下文档用index
- (3)要重新启动预览
- 导入图标后不能引用绝对路径
- entry
- 第六节TodoList 应用构建(任务标签和按钮)
- 注意事项
- 结构
- 页面结构使用 HTML 相同的标签进行嵌套,最外层是 div 容器。
- 文本内容放在<text>标签中才能呈现,否则不会呈现文本内容。
- 可以直接调用 鸿蒙 JS 封装好的 组件,这里我们使用的是 switch 组件。
- 样式
- 页面 CSS 支持 id、class、tag 选择器,建议使用 class 选择器。
- 页面样式系统基于 flex 弹性布局进行设置,默认就是 flex 弹性布局,需要注意,弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
- 鸿蒙封装的 JS 组件,有一个专门的样式说明,这个和我们传统的 CSS 写法有很大的差异,这个尤其需要注意。
- 结构
- 数据渲染与事件绑定
- 1、第三方 JSON 数据导入,注意使用相对路径
- 例子:import todoList from "../../common/datas/todoList.js"
- 2、数据绑定
- 与vue用法类似
- 3、列表渲染
- tid 属性指定数组中每个元素的唯一标识,默认值为 id,用于加速for循环的重渲染
- tid 属性指定数组中每个元素的唯一标识,默认值为 id,用于加速for循环的重渲染
- 4、事件绑定
- 类似 v-on,在 js 中绑定的函数和 data 同级
- 5、使用计算属性 computed 和 Vue 中的用法一样,依赖 data 中的数据进行计算,return 返回计算的结果。
- 1、第三方 JSON 数据导入,注意使用相对路径
- 注意事项