首页 > 其他分享 >框架-视图层(WXSS)

框架-视图层(WXSS)

时间:2022-08-25 20:38:15浏览次数:65  
标签:style wxss 框架 样式 视图 导入 WXSS 选择器

WXSS

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入

尺寸单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
    image

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

注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />

选择器

目前支持的选择器有:
image

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

标签:style,wxss,框架,样式,视图,导入,WXSS,选择器
From: https://www.cnblogs.com/Steph/p/16625603.html

相关文章

  • 框架-视图层(WXS)
    WXS-上WXS简介WXS(WeiXinScript)是小程序的一套脚本语言,结合WXML,可以构建出页面的结构。注意wxs不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。wxs与......
  • 设置视图的间距
    视图提供了两种通用属性来设置间距,它的所有子类都具有这两种属性(即各类布局和控件)1.layout_margin(外间距):用来设置当前视图与外部视图(包括上级视图和平级视图)的距离。 ......
  • 框架-视图层(WXML)
    WXML-上WXML简介WXML(WeiXinMarkupLanguage)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。用以下一些简单的例子来看看WXML具有什么能力:<......
  • 通过部署流行 Web 框架掌握 Serverless 技术
    大家好,我是霍大侠,本篇我们通过学习部署流行Web框架,如SpringBoot,Express,WebIDE,让你掌握Serverless函数计算架构和技术,领略弹性并发、高可用的好处。下面我将从实践介......
  • 架构、框架、设计模式的定义和区别
    一、架构架构即软件架构,是有关软件整体结构与组件的抽象描述,用于指导大型软件系统各个方面的设计。软件体系结构是构建计算机软件实践的基础,简单来说,软件架构是一个系......
  • Taurus.MVC 微服务框架 入门开发教程:项目部署:4、微服务应用程序发布到Docker部署(上)。
    系列目录:本系列分为项目集成、项目部署、架构演进三个方向,后续会根据情况调整文章目录。开源地址:https://github.com/cyq1162/Taurus.MVC本系列第一篇:Taurus.MVCV3.......
  • 设置视图的对齐方式
    通过layout_gravity属性可以设置当前视图在上级视图中的对齐方式通过gravity属性可以设置下级视图在上级视图中的对齐方式这两个属性的取值可以是:top,bottom,left,right,也可......
  • dlvm-netcore开源框架后台管理
    前言现在的程序开发人员大部分都不会自己去从零开发一个系统了,基本都是在使用一些免费的框架或破解一些有用的功能来自己二次开发组合使用,一般要达到要求是几个框架的功能......
  • 视图(View)
    视图家族有四个成员:View,ViewGroup,布局,控件视图包括各类布局和控件,因为不管是布局还是控件,都是由视图基类View派生而来的,他们继承了View的所有属性。视图组ViewGroup既是V......
  • 这次我设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架
    作者:冰河博客地址:https://binghe001.github.io大家好,我是冰河~~没错,这次冰河又要搞事情了,这次准备下手的是RPC框架项目。为什么要对RPC框架项目下手呢,因为在如今分布式......