微信小程序 - 04_wxss模板样式和全局配置（模板样式_rpx_@import样式导入、全局配置_window_tabBar）

欢迎访问笔者个人技术博客： http://rukihuang.xyz/

wxss模板样式

01 什么是wxss

• wxss是一套样式语言，用于美化wxml的组件样式，类似于网页开发的css

1.1wxss和css的关系

• wxss具有css大部分特性，同时wxss还对css进行了扩充和修改，以适应微信小程序的开发。
  • wxss扩展有：
    • rpx尺寸单位
    • @import样式导入

1.1.1 什么是rpx

• rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位
• 实现原理：rpx把所有设备的屏幕，在宽度上等分为750份（当前屏幕的总宽度为750rpx）
  • 在小设备上，1rpx代表的宽度较小
  • 在大设备上，1rpx代表的宽度较大

1.2 样式导入

• 使用wxss提供的@import语法，可以导入外联的样式表
• @import后跟需要导入的外联样式表的相对路径，用;表示语句结束

/* common样式 */
.username {
    color: red;
}

/* 导入样式 */
@import "/common/common.wxss";

02 全局样式和局部样式

2.1 全局样式

• 定义在app.wxss中的样式为全局样式，作用于每一个页面

2.2 局部样式

• 在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
• 注意：
  • 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

全局配置

01 全局配置文件常用配置项

• 小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
  • pages
    • 记录当前小程序所有页面的存放路径
  • window
    • 全局设置小程序窗口的外观
  • tabBar
    • 设置小程序底部的tabBar效果
  • style
    • 是否启用新版的组件样式

1.1 window

  "window":{
    "navigationBarBackgroundColor": "#025D54",
    "navigationBarTitleText": "在线测试",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle":"dark",
    "onReachBottomDistance": 50
  },

1.1.1 组成部分

1.1.2 常用配置项

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

• 设置路径：app.json->window

1.1.3 全局开启下拉刷新功能

• 通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
• 设置路径：app.json->window->enablePullDownRefresh设置为true
• 注意：在app.json开启下拉刷新功能后，会作用于每个小程序页面

1.1.4 设置下拉刷新背景色

• 当全局开启下拉刷新功能之后，默认的窗口背景为白色。
• 设置路径：app.json->window->backgroundColor16进制颜色值（#efefef）

1.1.5 设置下拉刷新时loading的样式

• 当全局开启下拉刷新功能之后，默认窗口的loading样式为白色。
• 设置路径：app.json->window->backgroundTextStyle为dark
• 注意：backgroundTextStyle可选值只有dark和light

1.1.6 设置上拉触底的距离

• 通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

• 设置路径：app.json->window->onReachBottomDistance设置新的值

• 注意：默认距离为50px，如果没有特殊需求，建议使用默认值

1.2 tabBar

• tabBar是移动端常见的页面效果，用于实现多页面的快速切换。通常分为：
  • 底部tabBar
  • 顶部tabBar
• 注意：
  • tabBar中只能配置最少2个，最多5个tab页签
  • 当渲染顶部tabBar时，不显示icon，只显示文本

1.2.1 tabBar的6个组成部分

• backgroundColor：tabBar 的背景色
• selectedlconPath：选中时的图片路径
• borderStyle：tabBar上边框的颜色
• iconPath：未选中时的图片路径
• selectedColor： tab上的文字选中时的颜色
• color：tab上文字的默认(未选中)颜色

1.2.2 tabBar结点配置选项

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

1.2.3 每个tab项的配置选项

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

1.2.4 实例

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "home",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "message",
        "iconPath": "images/message.png",
        "selectedIconPath": "images/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "contact",
        "iconPath": "images/contact.png",
        "selectedIconPath": "images/contact-active.png"
      }
    ]
  }

1.3 页面配置

• 小程序中，每个页面都有自己的.json配置问价你，用来对当前页面的窗口外观、页面效果等进行配置。

1.3.1 页面配置和全局配置的关系

• 小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
• 某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。
• 注意：当页面配置与全局配置冲突时，根据就近原则，最终效果以页面配置为准。

1.3.2 页面配置中常用的配置项

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

• enablePullDownRefresh：一般全局不开启，在特定有需求的页面开启