1、view,text,image组件 在wxml中通过框架提供的基础组件来表达元素内容 文本 对多个元素构成的整体做一个总的样式控制(html中的div标签)
2、应用弹性盒子布局 display:flex; 每个元素按顺序排列(默认从左往右) flex-direction:column; 改为自上而下 justify-content: space-around; 所有元素按相同的间隔排列 align-items:center; 所有元素居中显示 border-radius: %;将图片圆形展现
3、响应式长度单位rpx 为了适配不同设备 引入相对长度单位rpx, 并规定所有设备的屏幕宽高均为750rpx
4、小程序新增页 在app.json中 “pages”: [ “pages/test/test” ] 增加新页面的路径
5、navigator 设置标签来跳转页面 text标签中只能放置纯文本 display:inline 同一行 链接,使其跳转到目标页,并有返回原本页的按钮 open-type=“redirect”使其无法返回原本页 open-type=“navigate”使其可返回
6、tabBar 增加底边栏tab来任意快速实现页面转换 配置icon图 “tabBar”:{ “list”:[ list属性的取值是对象数组,每一个对象对应的是一个tab的设置 { “text”:“底边栏tab文本内容”, “iconPath”:“默认的icon图路径”, “pagePath”:“对应的页面路径”, “selectedIconPath”:“选中后的icon图路径”, } ] } 配置tabBar属性会使navigator标签失效 将open-type="switchTab"即可使原本页的标签和底边栏均实现页面跳转的作用
7、配置全局的导航栏样式 在app.json中设置 “window”:{ “navigationBarBackgroundColor”:“全局背景颜色设置”, “navigationBarTextStyle”: “全局文本颜色设置”, “navigationBarTitleText”: “导航栏标题设置”,(若页面没有设置标题,将默认使用此标题) }
