,,微信小程序的WXSS和全局、页面配置详细讲解

WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。下面这篇文章主要介绍关于WXSS的相关信息，微信小程序的整体情况和页面配置。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。

一，WXSS

首先介绍一下wxss，这是微信小程序特有的模板风格。它类似于web开发中的CSS，拥有CSS的大部分功能。同时还扩展了几个内容功能。接下来牛牛就来介绍一下新加入的rpx尺寸单位和样式import @import。

1.1 rpx尺寸单位

Rpx大小单位是微信特有的，主要用来解决屏幕适配的问题。这是怎么回事？我们知道，手机的款式很多，手机屏幕的大小也不尽相同。我们想让小程序根据屏幕宽度自动完成屏幕适配，所以有了rpx，rpx就把屏幕宽度分成了750份。我们开发时使用rpx大小单位，使用时会转换成像素单位，实现屏幕适配。

tip:

建议微信开发者在开发微信小程序时，可以使用iPhone6作为视觉稿的标准。

1.2 样式导入@import

在CSS中，我们使用link标签来导入outreach样式表。在微信小程序中，我们不用担心单个页面的wxss文件渲染页面，但是有时候需要额外导入外联样式。在WXSS中，我们使用@import来实现。

语法：@import“相对路径”

1.3 全局样式

微信小程序的全局样式写在根目录下的app.wxss文件中。全局样式意味着里面的样式将在每个页面上生效。

需要注意的是，当全局样式与页面的局部样式冲突，但局部选择器的权重大于或等于全局样式选择器的权重时，会采用最近原则，用局部样式的定义进行渲染。

补充：wxss的扩展-样式导入

在某些情况下，可能会将样式分成多个wxss文件，以方便对样式的管理(在实际项目中，一般不会将一个页面的所有样式都写入一个page.wxss文件中，而是在page文件夹下新建一个style文件夹，其中新建了一些wxss文件，以方便对样式的管理)。此时需要使用样式导入(将样式文件夹下的wxss文件导入到page.wxss中)，这样

在一个 wxss 中导入另一个 wxss 文件：

(1)使用@import进行导入

(2)@import后跟要导入的外部样式表的相对路径(或绝对路径)，使用；指示语句的结束。

/*page.wxss将其他wxss样式导入文件*/

@import '。/style/box . wxss '；

@import '。/style/container . wxss '；

也可以在app.wXSS中导入一些wxss样式文件，比如实际项目开发中可能会用到很多按钮。为了统一这些按钮样式，可以在app.wXSS中导入一个专门为按钮编写的样式，上面这种情况，开发时一般会在根目录下新建一个样式文件夹，然后在这个文件夹下新建一个btn.wxss样式文件：btn {宽度：100px高度：60px显示：inline-block }；然后将文件导入app.wxss文件：@ import’。/style/BTN . wxss '；完成以上步骤后，在项目开发中，只需要给按钮组件添加一个. btn类名即可。

二，全局配置

全局配置。我们在之前的文章中也做了一些了解。根目录中的app.json文件是专用于全局配置的地方。

app.json文件有六个主要部分。

Pages，用来存储页面的路径，第一个是小程序的首页。

pages': [

页数/索引/索引'，

'页面/列表/列表'

窗口，页面的窗口外观，例如：

窗口':{

navigationBarBackgroundColor ':' # fff '，

navigationBarTextStyle ':'黑色'，

NavigationBarTitleText ':'第一个小程序'

TabBar，页面的底部栏，在微信小程序中经常被用作跳转页面的工具。

tabBar': {

列表':[

{

页面路径':'页面/索引/索引'，

文本':'主页'

{

页面路径':'页面/列表/列表'，

文本':'目录'

}

颜色':' #fff '，

selectedColor': '#999 '，

backgroundColor': '#111 '

另一个常见的是样式，用来设置是否启用新的组件样式。如有必要，您需要使样式v2的值。如果没有，就删除样式行。

下图很好理解。

2.1 属性

属性名中以navigationBar开头的是我们的导航栏，写在我们app.json的窗口下

从背景开始，就是设置背景区域。背景区域在微信小程序中是默认不可见的，只有我们下拉才会出现。开发中一般会有伴随的加载事件和图片。

其实我们可以通过描述栏了解以上属性，博主就不一一解释了。

需要注意的是，最后一列的onReachBottomDistance属性是指页面被拉起时离页面底部的距离，也就是你玩手机向下滑动时屏幕底部离页面底部有多远。一般来说，它可以刷新新内容。如果内容不够，就需要拉更多的内容。

三，页面配置

app.json中的部分配置也可以在页面的json文件中配置。但需要注意的是，当全局配置与页面配置冲突时，会遵循邻近原则，冲突属性的值以页面配置为准。

而且，在页面配置中，我们不需要再次指定窗口字段的属性。

直接，如下所示：

{

navigationBarBackgroundColor ':' # ffffff '，

navigationBarTextStyle ':'黑色'，

NavigationBarTitleText ':'微信界面功能演示'，

background color ':' # eeeee '，

backgroundTextStyle': 'light '

}

总结

关于微信小程序WXSS以及全局和页面配置的这篇文章到此为止。关于微信小程序WXSS以及全局和页面配置的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录