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节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black/white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉lading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件出发时距页面底部距离，单位为px

全局配置 - tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。
小程序中通常将其分为：

底部tabBar
顶部tabBar
注意：
tabBar中只能配置至少2个、最多5个tab标签
当渲染顶部tabBar时，不显示icon,只显示文本
tabBar的6个组成部分

background: tabBar的背景色
selectedIconPath:选中时的图片路径
3.borderStyle: tabBar上边框的颜色
iconPath: 未选中时的图片路径
selectedColor: tab上的文字选中时的颜色
color: tab上文字的默认（未选中）颜色
tabBar节点的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar的位置，仅支持bottom/top
borderStyle	String	否	black	tabBar上边框的颜色，仅支持black/white
color	HexColor	否		tab上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab上文字选中时的颜色
backgroundColor	HexColor	否		tabBar的背景色
list	Array	是		tab页签的列表，最少2个，最多5个

每个tab项的配置选项

属性	类型	必填	默认值
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	tab上显示的文字
iconPath	String	否	未选中时的图标路径；当postion为top时，不显示icon
selectedIconPath	String	否	选中时的图标路径；当postion为top时，不显示icon

简单配置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模板样式和全局局部配置）相关推荐

微信小程序_4,WXSS模板样式
1.什么是WXSS: WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的css 2.WXSS和CSS的关系: WXSS具有CSS大部分特性 ...
【微信小程序】WXSS模板样式 —— 页面配置
1.1.什么是样式导入使用WXSS提供的 @import 语法,可以导入外联的样式表. 1.2.WXSS 和 CSS 的关系 WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改 ...
【微信小程序】WXSS模板样式
✅作者简介:CSDN内容合伙人.阿里云专家博主.51CTO专家博主
【微信小程序】WXSS 模板样式
目录
微信小程序学习day02-WXSS 模板样式
目录 WXSS 模板样式-介绍: 1. 什么是 WXSS: 2. WXSS 和 CSS 的关系: WXSS 模板样式 - rpx : 2. rpx 的实现原理: 3. rpx 与 px 之间的单位换算 ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序数据绑定与模板语法
微信小程序数据与模板配置总述: 对应的语法格式与vue的语法格式类似 wxml数据绑定 WXML 模板语法 - 数据绑定.数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据在 ...
清除微信小程序button的默认样式
清除微信小程序button的默认样式文章目录清除微信小程序button的默认样式总结最近在微信小程序的开发过程中,经常的使用button按钮,但是我们要怎么样去除它们的默认样式呢? 一.去除b ...
*通配符与微信小程序的WXSS
在编写前端样式的时候,很多人都喜欢先用通配符规定一些样式但是,在微信小程序的wxss中,没有 * 通配符 ,所以只能用笨方法 , 把每个标签选上再设置 .

微信小程序3（WXSS模板样式和全局局部配置）