【微信小程序】WXSS和全局、页面配置

最新推荐文章于 2025-06-26 08:03:04 发布

2401_84138927

最新推荐文章于 2025-06-26 08:03:04 发布

阅读量2.4k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： 2024年程序员学习文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/2401_84138927/article/details/137664140

2024年程序员学习专栏收录该内容

126 篇文章

订阅专栏

🍒观众老爷们好呀，小程序系列更新，上文我们讲解了小程序中WXML 中的条件渲染和列表渲染，那么接下来，就让我们走进微信小程序的WXSS以及小程序配置吧！

🍒今天的内容也是非常重要，赶紧拿小本本记起来呀。

文章目录

- 一，WXSS
- - 1.1 rpx尺寸单位
  - 1.2 样式导入@import
  - 1.3 全局样式
- 二，全局配置
- - 2.1 属性
- 三，页面配置

一，WXSS

首先我们先介绍一下wxss，wxss是微信小程序独有的模板样式，它类似于web开发中的CSS，具备CSS大部分的功能，同时，它还拓展出了几个内容功能，接下来牛牛介绍一下新增的rpx尺寸单位以及样式导入@import。

1.1 rpx尺寸单位

rpx尺寸单位是微信独有的，主要用来解决屏适配问题。怎么回事呢？我们知道，手机款式很多，手机屏幕的大小也并不一致，我们想要让小程序根据屏幕宽度自动完成屏适配，于是有了rpx，rpx将屏幕宽度等分为750份，我们在开发的时候使用rpx尺寸单位，到使用的时候就会将其换算成像素单位，实现屏适配。

tip:

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

1.2 样式导入@import

在CSS中，我们用<link>标签导入外联样式表，在微信小程序中，单个页面的wxss文件渲染页面并不用我们操心，不过有时候我们需要格外导入外联样式，而在WXSS中，我们使用@import实现。

语法：@import "相对路径"

1.3 全局样式

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

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

二，全局配置

全局配置我们在之前的文章也有做过一定的了解，根目录下的app.json文件就是专门放全局配置的地方。

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

pages，用来存放页面的路径，第一个放的就是小程序的首页。


  "pages": [

    "pages/index/index",

    "pages/list/list"

  ],

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


  "window": {

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "第一个小程序"

  },

tabBar，页面的底部栏，微信小程序中这部分经常作为跳转页面的工具。


  "tabBar": {

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页"

      },

      {

        "pagePath": "pages/list/list",

        "text": "目录"

      }

    ],

    "color": "#fff",

    "selectedColor": "#999",

    "backgroundColor": "#111"

  },