【微信小程序】全局样式、局部样式、全局配置

作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
博客主页：苏凉.py的博客
系列专栏：小程序开发基础教程
名言警句：海阔凭鱼跃，天高任鸟飞。
要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
关注点赞收藏

样式导入

使用wxss提供的@import语法，可导入外联的样式表。

@import语法

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

实例：

1. 在根目录下创建一个文件夹，在文件夹中创建一个wxss文件
   
2. 在该wxss下写入样式，并在页面wxss文件中导入该样式。
   
   这样就可以将外联样式导入进来了。
   

全局样式

全局样式即app.wxss这个文件，这里面的样式会应用到全局。作用于每一个页面。

局部样式

在页面中的.wxss文件都属于局部样式，只作用于当前页面。

注意:

1. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
2. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:

• pages
  记录当前小程序所有页面的存放路径
• window
  全局设置小程序窗口的外观
• tabBar
  设置小程序底部的 tabBar效果
• style
  是否启用新版的组件样式

小程序的窗口组成部分

window可配置小程序的导航栏区域和背景区域。

全局配置–window

常用window配置属性

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

在app.json文件中找到window进行配置。
如：修改导航栏的标题和背景颜色。

开启下拉刷新

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
在window全局配置下，将enablePullDownRefresh属性值改为true即可。

在app.json中开启下拉刷新后会作用于每一个页面。

设置背景色：

设置loading样式：
这里只能设置为dark和light两个样式。

设置上拉触底距离

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
默认距离为50px，如需重新设置，则在app.json文件中的window项进行配置。

全局配置–tabBar

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

• 底部tabBar
• 顶部 tabBar

注意:

1. tabBar中只能配置最少2个、最多5个tab页签。
2. 当渲染顶部 tabBar时，不显示 icon，只显示文本。

tarBar的6个组成部分

backgroundColor: tabBar的背景色

selectedlconPath:选中时的图片路径

borderStyle: tabBar 上边框的颜色

iconPath:未选中时的图片路径

selectedColor : tab 上的文字选中时的颜色

color: tab 上文字的默认（未选中）颜色

tarBar节点的配置项

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

每个tab项的配置项

在app.json中添加于window平齐的tabBar配置项。
其中每隔tab项都有以下四个属性值。

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