文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 14:01

关注

一,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文件中的,全局样式就意味着里面的样式将在每一个页面均生效。

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

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

在某些情况下,可能会将样式分在多个 wxss 文件中,方便对样式的管理(实际项目中,一般不会将一个页面的所有样式都写到一个 page.wxss 文件中,而是在该页面文件夹下新建一个 style 文件夹,其中新建一些 wxss 文件,方便管理样式),这个时候,就需要使用样式导入(将 style 文件夹下的 wxss 文件导入到 page.wxss 中),从而让单独的 wxss 生效。

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

(1)使用 @import 进行导入

(2)@import 后跟需要导入的外联样式表的相对路径(或者绝对路径也可以),用;表示语句结束。


@import './style/box.wxss';
@import './style/container.wxss';

也可以在 app.wxss 中导入一些 wxss 样式文件,比如在实际项目开发中可能会用到很多按钮,为了使这些按钮样式得到统一,就可以在 app.wxss 中导入一个专门为按钮写的样式。上面这种情况在开发中一般会在根目录下新建一个 style 文件夹,然后再在该文件夹下新建一个 btn.wxss 样式文件:.btn{width:100px;height:60px;display:inline-block};。然后到 app.wxss 文件中对该文件进行导入:@import './style/btn.wxss';。完成上述步骤之后,在项目开发中,只需要对按钮组件加上一个 .btn类名 即可。

二,全局配置

全局配置我们在之前的文章也有做过一定的了解,根目录下的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"
  },

还有一个常见的就是style,用来设置是否启用新版组件样式,如果需要,需要让style的值为v2,如果不采用,直接把style那一行删掉即可。

下面这张图方便理解

2.1 属性

属性名中以navigationBar开头的,就是我们的导航栏部分,也就是写在我们app.jsonwindow下。

background开头的,表示对背景区域进行设置,背景区域在微信小程序默认为不可见,只有当我们下拉显示时才会出现,一般在开发中还有伴随加载事件和图片。

上面各属性其实我们通过说明列可以明白个大概,博主就不一一解释。

需要注意的是,最后一栏的onReachBottomDistance属性,指的是页面上拉触发据页面底部距离,也就是你玩手机往下滑的时候,屏幕底部离页面底部多远触发,一般与刷新新内容配合,如内容不够需要拉取更多内容。

三,页面配置

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

而且,在页面配置中,我们不需要再次指定为window字段的属性。

直接,如下所示:

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

总结

到此这篇关于微信小程序WXSS和全局、页面配置的文章就介绍到这了,更多相关微信小程序WXSS和全局、页面配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯