- 1. 编译器的安装与下载,华为账号实名认证
- 2. app创建,认识项目目录结构
- 3. 在p40模拟器上运行Hello world
- 目录功能
- 目录结构
- 主要关注entry--》src--》main这个文件
- app.js 文件用于全局 JavaScript 逻辑和整个应用生命周期管理。
- pages 目录用于存放所有组件页面。
- common 目录用于存放公共资源文件,比如:媒体资源和 JS 文件。
- i18n 目录用于配置不同语言场景资源内容,比如:应用文本词条,图片路径等资源,注意 i18n 是开发保留文件夹,不可重命名。
- 设备
- 在进行预览时,不能选文件夹进行,要选择文件夹内部的文件进行预览
- 文件使用规则
- 应用资源可通过绝对路径或相对路径的方式进行访问,本开发框架中绝对路径以 "/" 开头,相对路径以 "./" 或 "../" ,具体访问规则如下:
- 引用代码文件,需使用相对路径,比如:../common/utils.js。
- 引用资源文件,推荐使用绝对路径。比如:/common/xxx.png。
- 图片路径引用失败不会出现文件查找失败错误提示,建议使用绝对路径进行文件路径编码
- 小窍门:绝对路径输入没有路径自动补全提示,可以使用「相对路径」选择到对应的文件,然后,在去掉前面的相对路径引入。
- 数据文件 import 导入只能使用相对路径,不能使用绝对路径,使用绝对路径会报错。
- chart组件
- 用于图表组件,用于呈现线形图、柱状图、量规图界面。
- 步骤
- 在pages创建文件夹,包含index.hml,index.css,index.js三个文件(注意:这三个文件的命名必须与文件夹的命名方式相同),否则会出错
- 配置路由,在 config.json 这个文件里面。
- 也可以直接创建JSpage,就不用再去配置路由了
- 预览页面时,务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
- 切换页面进行预览,不需要重新启动预览器,直接点击右上角刷新按钮即可,出现错误提示。
- 出现预览错误修改后,刷新无效,必须重新启动预览器才能正常显示,点击右侧收起再展开即可。
- button组件
- placement属性可以设置按钮上图片与文本的位置关系
- justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
- stack(容器组件)
- 堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。 <stack class="stack-parent"> <div class="back-child bd-radius"></div> <div class="positioned-child bd-radius"></div> <div class="front-child bd-radius"></div> </stack>
- 使用div时,它默认的排列方式为横着排列,可以通过调整flex-direction来改变
- 一个页面只能有一个div,其他只能包含在最大的div里面
- 生命周期
页面A的生命周期接口的调用顺序
打开页面A:onInit() -> onReady() -> onShow()
在页面A打开页面B:onHide()
从页面B返回页面A:onShow()
退出页面A:onBackPress() -> onHide() -> onDestroy()
页面隐藏到后台运行:onInactive() -> onHide()
页面从后台运行恢复到前台:onShow() -> onActive()
导入模块
import router from '@system.router'; - router.push
用应用内的某个页面替换当前页面,并销毁被替换的页面。
router.back
返回上一页面或指定的页面。
router.clear
清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
router.getLength
获取当前在页面栈内的页面数量。
router.getState
获取当前页面的状态信息。