TodoList应用构建
(1).首先要注意页面的设置
- 页面结构使用 HTML 相同的标签进行嵌套,最外层是 div 容器。
- 文本内容放在
<text>
标签中才能呈现,否则不会呈现文本内容。 - 可以直接调用 鸿蒙 JS 封装好的 组件,这里我们使用的是 switch 组件。
如图所示为一个switch组件
(2)页面样式设计注意事项
- 页面 CSS 支持 id、class、tag 选择器,建议使用 class 选择器。
- 页面样式系统基于 flex 弹性布局进行设置,默认就是 flex 弹性布局,需要注意,弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
- 鸿蒙封装的 JS 组件,有一个专门的样式说明,这个和我们传统的 CSS 写法有很大的差异,这个尤其需要注意
(3)数据渲染与事件绑定
1.第三方 JSON 数据导入,注意使用相对路径
代码:
-
export default [ { info: '给老王打个电话', status: true }, { info: '输出工作计划', status: false }, { info: '和小王对接需求', status: true }, { info: '整理客户资料', status: false }, { info: '和朋友一起聚餐', status: false } ] import todoList from "../../common/datas/todoList.js"
2.数据绑定
与vue用法类似
hml {{ 变量名 }}
js 变量放在 data 中
export default{
data:{
变量名: value
}
}
3.列表渲染(for)
tid 属性指定数组中每个元素的唯一标识,默认值为 id,用于加速for循环的重渲染。
写法1(都不指定):<div for="{{array}}" tid='id'></div>
,$idx代表元素索引,$item代表数组元素
写法2(指定元素名称):<div for="{{value in array}}" tid='id'></div>
,$idx 代表元素索引,value 代表数组元素
写法3(指定索引和元素名称):<div for="{{(index,value) in array}}" tid='id'></div>
,index代表元素索引,value代表数组元素
4.
事件绑定
类似 v-on,在 js 中绑定的函数和 data 同级
hml:<div onclick="clickfunc"></div>
或 <div @click="clickfunc"></div>
js: 放在 data 后:
export default{
data:{
},
clickfunc: function(){
......
}
}
5.用计算属性 computed 和 Vue 中的用法一样,依赖 data 中的数据进行计算,return 返回计算的结果。
页面样式布局及多终端运行TodoList
(1)多终端页面样式设计规则
-
JS UI 框架页面样式,系统基于 flex 弹性布局进行设置,默认就是 flex 弹性布局,需要注意,弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
-
JS UI框架中手机和智慧屏中的 px 指逻辑像素,px 是根据实际屏幕宽度物理像素进行缩放计算的。例如当width 设为 100px 时,在宽度为1440物理像素的屏幕上,实际显示的宽度为200物理像素。
-
需要注意的地方有:
- 在 TV 上有一个黑色的背景,需要针对性的调整对应的 CSS 样式,颜色需要重点处理反转。
- 穿戴设备是一个圆形的表盘,需要针对圆形容器特征专门设计对应的样式
-
媒体查询(Media Query)在移动设备上应用十分广泛,开发者经常需要根据设备的大致类型或者特定的特征和设备参数(例如屏幕分辨率)来修改应用的样式。为此媒体查询提供了如下功能:
-
针对设备和应用的属性信息,可以设计出相匹配的布局样式。
-
当屏幕发生动态改变时(比如分屏、横竖屏切换),应用页面布局同步更新。
-
-
我们常用类型来进行判断,按照 phone、tv、wearable 顺序输出不同响应式的页面布局
@media screen and (device-type: phone) {} @media screen and (device-type: tv) {} @media screen and (device-type: wearable) {}