目录
wxss模板样式
wxss
wxss是一套样式语言,用于美化wxml的组件样式,,类似网页开发中的CSS
wxss和css的关系
rpx是什么?
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx的实现原理
了解
wxss模板样式-样式导入
什么是样式导入
使用WXSS 提供的@import语法,可以导入外联的样式表。
@import的语法格式
全局样式和局部样式
定义在app.wxss 中的样式为全局样式,作用于每一个页面。
在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面。
了解window节点常用的配置项
设置导航栏的标题
设置步骤:app.json -> window ->navigationBarTitleText
需求:”WeChat“ 修改为”小海想要什么“
设置导航栏背景色
设置步骤:app.json -> window ->navigationBarBackgroundColor
需求:把导航栏的背景色,从默认的#fff 修改为 #2b4b6b
设置导航栏的标题颜色
设置步骤:app.json -> window ->navigationBarTextStyle
将black修改为white
注意:navigationBarTextStyle 的可选值只有black 和 white
全局开启下拉刷新功能
注意:在app.json 中启用下拉刷新功能,会作用于每个小程序页面!
模拟器的问题说明
模拟器不能百分百模拟手机操作
设置下拉刷新时窗口的背景色
设置下拉刷新时 loading 的样式
注意 backgroundTextStyle 的可选值只有 light 和 dark
设置上拉触底的距离
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
"onReachBottomDistance": 50
tabBar
什么是tabBar
tabBar的6个组成部分
了解tabBar节点的配置项
每个tab项的配置选项
实现tabBar的案例
①拷贝图标资源
②新建 3 个对应的tab页面
③配置 tabBar 选项
tabBar页面放app.json中page中前面
页面配置
页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
页面配置和全局配置的关系
页面配置中常用的配置项
标红的,可以放到具体页面的.json