一、样式
WXSS (WeiXin Style sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。与 CSS 相比，WXSS 扩展的特性有:
- rpx尺寸单位。
-
@import 样式导入。
image.png
1.2、 rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位。
rpx 的实现原理简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)。
- 在较小的设备上，1rpx 所代表的宽度较小。
- 在较大的设备上，1rpx 所代表的宽度较大。
小程序在不同设备上运行的时候，会自动把rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
1.3、RPX与PX之间的单位换算
在 iPhone6 上，屏幕宽度为375px,共有 750 个物理像素等分为 750rpx。则:750rpx=375px=750 物理像素
1rpx=0.5px=1物理像素
官方建议:开发微信小程序时，设计师可以用iPhone6 作为视觉稿的标准。
开发举例:在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。
1.4、样式导入
使用 WXSS 提供的 @import 语法，可以导入外联的样式表。
@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下:
.view_text {
color:aqua;
}
@import "/common/common.wxss"
<view class = "view_text">公共样式表</view>
1.5、全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
在页面的.wxss 文件中定义的样式为局部样式，只作用于当前页面。
- 注意
当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
二、全局配置
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
- pages
记录当前小程序所有页面的存放路径。 -
window
全局设置小程序窗口的外观。 -
tabBar
设置小程序底部的 tabBar 效果。 -
style
是否启用新版的组件样式。
2.1、pages
"pages": [
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],
2.2、window
2.2.1、小程序窗口组成部分
2.2.2、window节点常用配置项
2.2.2.1、设置导航栏标题
在app.json中进行更改如下:
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "导航栏标题更改",
"navigationBarBackgroundColor": "#ffffff"
},
2.2.2.2、设置导航栏背景色
"navigationBarTitleText": "导航栏标题更改",
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "导航栏标题更改",
"navigationBarBackgroundColor": "#2b4b6b"
},
2.2.2.3、设置导航栏的标题颜色
"navigationBarTextStyle": "white"
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "导航栏标题更改",
"navigationBarBackgroundColor": "#2b4b6b"
},
- 注意:
navigationBarTextStyle 的可选值只有 black 和 white。否则会报错:[ app.json 文件内容错误] app.json: window.navigationBarTextStyle field needs to be string, string(env: Windows,mp,1.06.2405020; lib: 3.4.9)
2.2.2.4、全局开启下拉刷新功能
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
"enablePullDownRefresh":true
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "导航栏标题更改",
"navigationBarBackgroundColor": "#2b4b6b",
"enablePullDownRefresh":true,
},
2.2.2.5、设置下拉刷新时窗口的背景色
"backgroundColor": "#EFEFEF"
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "导航栏标题更改",
"navigationBarBackgroundColor": "#2b4b6b",
"enablePullDownRefresh":true,
"backgroundColor": "#EFEFEF"
},
2.2.2.6、设置下拉刷新时 loading 的样式
"backgroundTextstyle":"light"
可选值只有light与dark。
2.2.2.7、设置上拉触底的距离
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
"onReachBottomDistance":100
- 注意
默认距离为50px，如果没有特殊需求，建议使用默认值即可。
2.3、tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为:
- 底部 tabBar
- 顶部 tabBar
- 注意
tabBar中只能配置最少2个、最多5个tab 页签。
当渲染顶部 tabBar 时，不显示icon，只显示文本。
2.3.1、tabBar的6个组成部分
2.3.1、tabBar配置项
tab页签列表每个 tab 项的配置选项如下：
3.2.1、配置tabbar页面
通过 app.json 文件的 pages 节点，新建3个对应的 tab 页面，示例代码如下:
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact",
"pages/logs/logs"
],
其中，home 是首页，message 是消息页面，contact是联系我们页面。
2.3.2、配置tabbar页签
- 打开 app.json 配置文件，和 pages、window平级，新增 tabBar 节点。
- tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象。
- 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下:
pagePath 指定当前 tab 对应的页面路径【必填】
text指定当前 tab 上按钮的文字【必填】
iconPath 指定当前 tab 未选中时候的图片路径【可选】
selectedlconPath 指定当前 tab 被选中后高亮的图片路径【可选】
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact",
"pages/logs/logs"
],
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/tabs/home.png",
"selectedIconPath": "images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/tabs/message.png",
"selectedIconPath": "images/tabs/message-active.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "images/tabs/contact.png",
"selectedIconPath": "images/tabs/contact-active.png"
}
]
},
2.3.3、配置效果
三、页面配置
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
3.1、页面配置选项
小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的 .json 配置文件”就可以实现这种需求，配置选项如下：
- 注意
当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
3.2、配置效果
{
"usingComponents": {},
"navigationBarBackgroundColor":"#ff0000",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"消息页面",
"backgroundColor": "#ff0000",
"backgroundTextStyle": "light",
"enablePullDownRefresh":true
}
