WXSS模板样式
WXSS模板样式-rpx
rpx(responsive pixel)
是微信小程序独有的,用来解决屏适配的尺寸单位
实现原理‘
鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rpx把所有社保的屏幕,在宽度上等分为7500份(即当前屏幕的总宽度为750px)
小程序·在不同设备运行时,会自动把rpx的样式单位换算成对应的像素单位px来渲染,从而实现屏幕适配
WXSS模板样式 - 样式导入
使用wxss提供的@import
语法,可以导入外联的样式表
@import
的语法格式
@import
后跟需要导入的外联的样式表的相对路径,用;表示语句结束
@import "commm.wxss" ;
WXSS模板样式 - 全局样式和局部样式
全局样式
定义在app.wxss中的样式作为全局样式,作用于每个界面
常用的配置项:
pages 记录当前小程序所有页面的存放路径window 全局设置小程序窗口的外观tabBar 设置小程序的tabBar效果style 是否启用新版的组件样式全局配置 - window
小程序窗口的组成部分了解window节点常用的配置项
全局配置 - tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。
小程序中通常将其分为:
底部tabBar顶部tabBar
注意:tabBar中只能配置至少2个、最多5个tab标签当渲染顶部tabBar时,不显示icon,只显示文本
tabBar的6个组成部分background: tabBar的背景色selectedIconPath:选中时的图片路径3.borderStyle: tabBar上边框的颜色iconPath: 未选中时的图片路径selectedColor: tab上的文字选中时的颜色color: tab上文字的默认(未选中)颜色
tabBar节点的配置项
每个tab项的配置选项
简单配置tabBar
在项目的统计目录下创建images文件夹,里面存放你需要的图片资源
由于无法直接通过编译器创建与pages同级的目录,可以通过右击打开资源管理器,直接创建文件夹,我们需要的图片资源分点击前和点击后,建议在阿里巴巴矢量图标库下载两种颜色的png,便于管理,对其进行有意义的命名(自己能区分就好)在app.json文件中,创建你需要的分页,分页是为了对应tabBar中有得选
"pages": ["pages/index/index","pages/shangcheng/shangcheng","pages/wode/wode" ],
创建与windows同级的标签"tabBar",并利用上面的表格属性为其创建
"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页","iconPath": "images/shouye.png","selectedIconPath": "images/shouye1.png"},{"pagePath":"pages/shangcheng/shangcheng","text":"商城","iconPath": "images/shangcheng.png","selectedIconPath": "images/shangcheng1.png"},{"pagePath": "pages/wode/wode" ,"text": "我的","iconPath": "images/wode.png","selectedIconPath": "images/wode1.png"}]},
以上就是所有步骤,下面的gif是实际的效果,内容是之前的填充,没有删除
局部样式
在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面
注意:
当局部样式和全局样式冲突,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于等于全局样式的权重时,才会覆盖全局的样式
页面配置和全局配置的关系
小程序中app.json中的window节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,”页面级别的.json配置问价“就可以实现这种需求。
注意:当页面配置和全局配置冲突时,根据就近原则,最终的效果是以页面配置
为准
页面配置中常用的配置项
和全局配置一样
如果觉得《微信小程序3(WXSS模板样式和全局局部配置)》对你有帮助,请点赞、收藏,并留下你的观点哦!