精华内容
下载资源
问答
  • wxss教程
    2021-03-02 11:24:24
    选择器样式表现
    .class.container选择拥有class=“container”的组件
    #id#firstname选择拥有id=“firstname”的组件
    elemenview选择搜有view组件
    ::afterview::after在view组件的后面插入内容
    ::beforeview::before在view组件的前边插入内容

    优先级

    标签权重优先级
    element1
    class10
    id100
    style1000
    !important正无穷
    更多相关内容
  • WXSS 样式简明教程

    2022-07-12 20:50:20
    WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS与Web开发中的CSS类似。

    WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

    WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。

    1 文件组成

     文件组成

    • 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面。
    • 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件。
    • 其它样式:其它样式可以被项目公共样式和页面样式引用,引用方法查看本章中的2.3.3小节。

    在小程序开发中,开发者不需要像Web开发那样去优化样式文件的请求数量,只需要考虑代码的组织即可。样式文件最终会被编译优化。

    2 尺寸单位

    在WXSS中,引入了rpx(responsive pixel)尺寸单位。引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。

    如图所示,同一个元素,在不同宽度的屏幕下,如果使用px为尺寸单位,有可能造成页面留白过多。

    使用px尺寸单位,iPhone5与iPad视觉对比。

    修改为rpx尺寸单位,效果如图所示。

    使用rpx尺寸单位, iPhone5与iPad视觉对比

    小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。

    举个例子:iPhone6屏幕宽度为375px,共750个物理像素,那么1rpx = 375 / 750 px = 0.5px。

    常用机型rpx尺寸换算表

    3 WXSS引用

    在CSS中,开发者可以这样引用另一个样式文件:@import url('./test_0.css')

    这种方法在请求上不会把test_0.css合并到index.css中,也就是请求index.css的时候,会多一个test_0.css的请求。

     css import网络请求

    在小程序中,我们依然可以实现样式的引用,样式引用是这样写:

    @import './test_0.wxss'
    

    由于WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。

    4 内联样式

    WXSS内联样式与Web开发一致:

    <!--index.wxml-->
    
    <!--内联样式-->
    <view style="color: red; font-size: 48rpx"></view>
    

    小程序支持动态更新内联样式:

    <!--index.wxml-->
    
    <!--可动态变化的内联样式-->
    <!--
    {
      eleColor: 'red',
      eleFontsize: '48rpx'
    }
    -->
    <view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>
    

    5 选择器

    目前支持的选择器如表所示。

    类型选择器样例样例描述
    类选择器.class.intro选择所有拥有 class="intro" 的组件
    id选择器#id#firstname选择拥有 id="firstname" 的组件
    元素选择器elementview checkbox选择所有文档的 view 组件和所有的 checkbox 组件
    伪元素选择器::afterview::after在 view 组件后边插入内容
    伪元素选择器::beforeview::before在 view 组件前边插入内容

    小程序WXSS支持的选择器

    WXSS优先级与CSS类似,权重如图2-13所示。

     WXSS选择器优先级

    权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式。

    view{ // 权重为 1
      color: blue
    }
    
    .ele{ // 权重为 10
      color: red
    }
    
    #ele{ // 权重为 100
      color: pink
    }
    
    view#ele{ // 权重为 1 + 100 = 101,优先级最高,元素颜色为orange
      color: orange
    }
    
    view.ele{ // 权重为 1 + 10 = 11
      color: green
    }
    

    选择器优先级权重

    6 官方样式库

    为了减轻开发者样式开发的工作量,官方提供了WeUI.wxss基础样式库。

    WeUI是一套与微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

    WeUI.wxss示例列表

    具体使用文档可参考:GitHub - Tencent/weui-wxss: A UI library by WeChat official design team, includes the most useful widgets/modules.

    展开全文
  • 同学们大家好,我是小伊同学,今天进入WXSS部分的学习,首先我们还是先来讲解一下基本语法。 本部分我们将要学习的知识点如下所示: 经过之前的课程,相信各位同学已经对wxss有了初步的印象,那么本节课...

    同学们大家好,我是小伊同学,今天进入WXSS部分的学习,首先我们还是先来讲解一下基本语法。

     

      本部分我们将要学习的知识点如下所示:

     

     

      经过之前的课程,相信各位同学已经对wxss有了初步的印象,那么本节课,我们就来具体地学习一下wxss。

     

     

      WXSS的全称为WeiXinStyle Sheets,是一套样式语言,用于描述WXML的组件样式。它是由CSS语言,全称为CascadingStyle Sheets,修改扩充而来,因而具备了CSS的大部分特性。如果说css是一种用来变美的语言,那么wxss也同样如此,它决定了wxml中的组件应该如何显示,通过wxss的代码,我们可以对组件设置字体、颜色、位置、大小等样式,也能够添加动画效果,使页面呈现出最佳的视觉效果。

     

      那么,我们如何写一段wxss代码呢?下面我们就来学习一下wxss的语法,基本上和css是一致的。

     

     

     

      一段wxss代码首先是选择器,选择器的作用是指明针对哪些wxml组件使用此样式,选择器后为一个花括号,括号内部为属性和属性值。属性表明了我要设置这个组件哪个方面的样式,是字体大小还是颜色什么的,不同属性名称的含义不同。冒号后面跟着属性值,表明对于该属性我要设置成什么样子,如果是颜色,这里就填颜色值,如果是字体大小,那么这里就是字号。我们把属性和属性值称作一条声明,使用分号作为结束符。一个花括号中可以包含多条声明。所有这些组合起来成为声明块,代表了一种样式格式。

     

      下面的例子是一段简单的wxss代码,点txt是这个样式格式的名字,也是选择器,表示在wxml中的样式属性被设置为txt的组件使用wxss文件中的此样式进行展示。整个声明块中有三条声明,分别对三个属性进行了设置:字体大小设置为50rpx,颜色设置为橙色,背景颜色设置为小麦色。

     

      之前我们说到wxss是在css上修改而来的,那么wxss与css的区别在哪呢,下面我们就要介绍在wxss中特有的尺寸单位,细心的同学可能已经发现了,在上一页ppt的字体大小中,我设置为了50rpx,这里的rpx就是一种特殊的尺寸单位。

     

     

      做过网页前端的可能都知道,在网页上如何衡量尺寸呢?比如组件的长和宽、字体大小等很多地方都需要用到尺寸。一般在网页前端,为了避免因为显示器的大小及分辨率等因素的差异带来前端展示效果的破坏,我们使用的是px,它代表了像素,是一种在所有电脑上都能使用的单位。

     

      但是我们知道,网页是有滑动条的,如果页面超出窗口大小,可以很方便地向右或者向下滑动的,而像小程序这样,如果无法在一个屏幕上展示全部页面无疑用户体验会非常不好,这就要求小程序开发者必须知道手机屏幕的长和宽到底有多少像素,以确定组件的大小不会超出。

     

      但是每个手机的屏幕大小也不尽相同,因此为了更好的用户体验,避免用户手机屏幕物理尺寸和分辨率的问题,微信在px的基础上使用了一种新的单位,这就是rpx,它可以根据屏幕宽度进行自适应。

     

      具体来说是如何做到自适应的呢?这里微信规定了,一个页面的宽度就是750rpx,开发者使用这一单位进行开发,能够保证页面大小不会超出,而对rpx和真实大小的映射由微信统一完成,在不同手机上只是映射关系不同,而对rpx单位来说大家都是750rpx。

     

      例如,在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx= 375px = 750物理像素,1rpx= 0.5px = 1物理像素,开发者设定多少rpx会被计算折合与该手机对应的实际大小而被显示。

     

      因此,在微信小程序的开发中,如果需要在样式上用到尺寸单位,我们尽量使用rpx。需要说明的是px单位也是可以使用的,但不能保证在所有手机上都能使展示效果与开发者在预览的时候一致。而当样式错乱以后,页面往往都会非常难看,所以使用rpx单位就成为了一种小程序代码的编写习惯。此外,我们有时也会使用百分比来表示尺寸,他表示占上一层容器尺寸的百分比。

     

      好了,本节课的内容就到这里,我们明天继续。如果大家有什么问题,欢迎在文末留言。

     

    想看视频版?

    关注公号“微程序学堂”,我们的视频教程即将上线

     

    如果你自己写了好文章想投稿

    请联系我们

     

     

    展开全文
  • 微信小程序 教程WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXSS WXSS...
  • 为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入。 补充:关于扩展的特性我们下面会...
  • 微信小程序之WXSS详解

    千次阅读 2017-06-10 13:42:46
    WXSS详解   1.概述 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合...

    WXSS详解

     

    1.概述

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

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

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

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

       尺寸单位。


       样式导入。

     

     

     

    2.尺寸单位

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

     


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

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

     

     

     

    3.样式导入

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

     

    代码

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

     

     

     

    4.内联样式

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

     

    4.1.​​​​​​​style

    静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

    <view style="color:{{color}};" />

     

    4.2.class

    用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

    <view class="normal_view" />

     

     

     

    5.选择器

    目前支持的选择器​​​​​​​

     

     

    6.全局样式与局部样式

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

     

     

     

     

     

    展开全文
  • 小程序开发学习(3)---.wxss详解篇

    千次阅读 多人点赞 2020-07-29 16:21:15
    文章目录1. app.wxss2.跳转按钮设置2.1 hover-class...app.wxss主要是用在全局配置样式,有些可以共有的样式,就不需要在每个.wxss文件夹中重复使用,优先级比.wxss低一些,所以如果两者都写入了样式,会默认执行文件
  • 个啥?:小程序界的Bootstrap  去哪下?...干啥使?:就是企鹅公司告诉你,你的小程序要和我微信要保持一个尿性,一样式的。  咋使呢?:把东西下载下来,怎么用呢,不然不白下了吗?...3.在app.wxss或页面wxss导入we
  • 但是在小程序中用的是特有的格式,WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,说白了就是用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,。同时为了更适合开发微信小程序...
  • animate.wxss

    2020-09-08 17:22:07
    小程序使用的animate.wxss动画效果,已测试,可用,效果还不错,手机不是特别卡顿,使用教程看我博客
  • 小程序WXSS中多个.class的意思

    千次阅读 2018-05-09 17:32:26
  •   WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 (小安娜:好像很厉害的样子,那基础组件、事件系统是什么?感觉更厉害,因为必须结合它们。...
  • visual studio开发小程序less转wxss的插件使用教程1、less转为wxss2、其他好用的插件 1、less转为wxss 在vscode中下载 Easy WXLESS 插件,在自己的根目录下找到 .vscode 文件夹,找到 settings.json 文件(如果没有...
  • 小程序快速入门教程 1.2 WXML 和 WXSS

    千次阅读 2019-08-20 00:51:43
    文章目录前言1 WXML1.1 使用 view 组件增加内容1.2 给 WXML 的组件增加选择器属性2 WXSS2.1 字体属性与文本属性2.2 盒模型3 小结END 前言 这节开始学习小程序的视图层,WXML 和 WXSS 就像网页开发的 HTML 和 CSS,一...
  • 微信小程序 教程WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXML WXML...
  • 上一节课我们介绍的声明段代码都需要写在wxss后缀的文件中,而我们在wxml部分的讲解中提到,组件有两种属性可以设置其样式,分别是style和class属性。 这两种方式的区别在于: class属性的属性值为wxss...
  • 小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64,然后引用。 。下载到本地并解压ttf文件,...
  • 微信小程序基础学习(WXSS+组件)

    千次阅读 2022-02-10 18:26:35
    WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 与 CSS 相比,WXSS 扩展的特性有:单位尺寸和样式导入
  • 小程序构成介绍:WXML 和 WXSS

    千次阅读 2020-09-22 11:53:02
    网页编程的多种方式中,HTML + CSS + JavaScript 算是... 微信小程序也采用类似的方式,只是 WXML 充当的就是 HTML 的角色,而 WXSS 承担 CSS 的职责。 今天的内容小程序构成的第二篇,介绍 WXML 页面文件和 WXSS...
  • 在前面几节我们说了很多语法规则,大家已经对wxss有了一个基本的认识。用好wxss能够让我们的页面变得美观漂亮。那么大家一定很好奇,都能对组件设置哪些样式呢?下面我们就来介绍一下常用的样式属性。 首先...
  • 解决VScode 中 Easy Less插件.less文件保存后自动生成wxss文件 问题描述 在使用 VScode 进行小程序开发时,我们都会安装 Easy LESS插件,这个插件可以帮助我们更便携的写出css文件,也就是小程序开发中的 .wxss 文件...
  • 1,button组件,按钮 2,wxss的介绍以及使用 .wxml是一个界面的架构的设计...app.wxss ***.wxss style这三个都可以影响.wxml的样式。 但是,一旦,三种方式都同时设置了同一个属性不同的样式。比如说,他们分别设置了
  • 微信小程序 wxss(css)样式的学习

    千次阅读 2021-12-07 21:04:05
    view> /* pages/css1/css1.wxss */ /*手机 content区域*/ .redmi{ background: rgb(102, 61, 156); text-align: center; } /*手机盒*/ .root{ background: pink; /*上,右,下,左*/ padding: 10px 10px 10px 10px; ...
  • 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入。补充:关于扩展的特性我们下面会说,...
  • WXSS(WeiXin Style Sheet)与CSS对应,用于描述页面的样式。 特性 内联样式: 组件的 style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。 选择器 对于常用的...
  • 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。 将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套...
  • 微信小程序 教程WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML 什么是事件 ...
  • wxss样式——持续更新

    2020-02-28 17:32:09
    "van-stepper": "../../miniprogram_npm/miniprogram_npm/@vant/weapp/stepper/index" } } 效果展示 这个页面其实盗用了第三方包,也就是vant样式,可以cmd到小程序项目里面用npm工具安装,具体教程我有一篇文章...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,370
精华内容 1,348
关键字:

wxss教程