当前位置:   article > 正文

【微信小程序】WXSS模板样式 —— 页面配置_微信小程序样式模板

微信小程序样式模板

1.1、什么是样式导入

使用WXSS提供的 @import 语法,可以导入外联的样式表。

1.2、WXSS 和 CSS 的关系

WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。与CSS相比,WXSS扩展的特性有:

  • rpx 尺寸单位
  • @import 样式导入

1.3、rpx 的实现原理 

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)。

较小的设备上,1rpx所代表的宽度较小

较大的设备上,1rpx所代表的宽度较大

小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。

1.4、@import 的语法格式

@import 后跟需要导入的外联样式表相对路径,用表示语句结束。示例如下:

  1. //外部样式 common.wxss
  2. .small-p{
  3. padding:5px;
  4. }
  5. //引入外部样式 app.wxss
  6. @import "common.wxss";
  7. .middle-p{
  8. padding:15px;
  9. }

2.1、全局样式

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

 2.2、局部样式

页面的.wxss文件中定义的样式为局部样式,只作用于当前页面。

注意:

(1)当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式

(2)当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置

3.1、全局配置文件及常用的配置项

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

(1)pages

  • 记录当前小程序所有页面的存放路径

(2)window

  • 全局设置小程序窗口的外观

(3)tabBar

  • 设置小程序底部的tabBar效果

(4)style

  • 是否启用新版的组件样式

3.2、小程序窗口的组成部分

 

 3.3、了解window节点常用的配置项

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / white
backgroundColorHexColor#ffffff窗口的背景颜色
backgroundTextStyleStringdark下拉loading的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

3.3.1、设置导航栏的标题

  • 设置步骤:app.json => window => navigationBarTitleText
  • 需求:把导航条上的标题,从默认的"WeChat" 修改为 “小程序学习” ,效果如图所示

 3.3.2、设置导航栏的背景色

  • 设置步骤:app.json => window => navigationBarBackgroundColor
  • 需求:把导航栏标题的背景色,从默认的 #fff 修改为 #2E62E2

3.3.3、设置导航栏的标题颜色

  • 设置步骤:app.json => window => navigationBarTextStyle
  • 需求:把导航栏上的标题,从默认的 black 修改为 white,效果如图所示:

3.3.4、全局开启下拉刷新功能

  • 概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。设置步骤:app.json => window => enablePullDownRefresh 的值设置为true
  • 注意:在app.json 中启用下拉刷新功能,会作用于每个小程序页面!

 

 3.3.5、设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:app.json => window => 为backgroundColor 指定16进制的颜色值 #efefef。效果如下:

 3.3.6、设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 app.json => window => 为 backgroundTextStyle 指定 dark 值。效果如下:

 

 3.3.7、设置上拉触底的距离

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

设置步骤: app.json => window => 为onReachBottomDistance 设置新的数值

注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

4.1、tabBar 

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

  • 底部 tabBar
  • 顶部 tabBar

 注意:

  • tabBar中只能配置最少2个最多5个 tab页签
  • 当渲染顶部tabBar时,不显示icon,只显示文本

4.2、tabBar的6个组成部分

  1. backgroundColor:tabBar的背景色
  2. selectedconPath:选中时的图片路径
  3. borderStyle:tabBar上边框的颜色
  4. iconPath:未选中时的图片路径
  5. selectedColor:tab上的文字选中时的颜色
  6. color:tab上文字的默认(未选中)颜色

4.3、tabBar节点的配置项

属性类型必填默认值描述
positionStringbottomtabBar的位置,仅支持 bottom / top
borderStyleStringblacktabBar 上边框的颜色,仅支持 black / white
colorHexColortab 上文字的默认(未选中)颜色
selectedColorHexColortab上的文字选中时的颜色
backgroundColorHexColortabBar的背景色
listArray

tab页签的列表,

最少2个、最多5个tab

示例代码如下:

 

4.4、每个tab项的配置选项 

属性类型必填描述
pagePathString页面路径,页面必须在 pages 中预先定义
textStringtab上显示的文字
iconPathString未选中时的图标路径;当 postion 为 top 时,不显示 icon
selectedIconPathString选中时的图标路径;当 postion 为 top 时,不显示 icon

 示例代码如下:

页面配置

5.1、页面配置文件的作用

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

5.2、页面配置全局配置的关系

  • 小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现
  • 如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json 配置文件” 就可以实现这种需求。

注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准

5.3、页面配置中常用的配置项

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色,如#000000
navigationBarTextStyleStringwhite当前页面导航栏标题颜色,仅支持 black / white
navigationBarTitleTextString当前页面导航栏标题文字内容
backgroundColorHexColor#ffffff当前页面窗口的背景色
backgroundTextStyleStringdark

当前页面下拉 loading 的样式,仅支持 dark / light

enablePullDownRefreshBooleanfalse是否为当前页面开启下拉刷新的效果
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/720094
推荐阅读
相关标签
  

闽ICP备14008679号