精华内容
下载资源
问答
  • 微信小程序wxss语法
    千次阅读
    2022-04-11 12:23:53

    尺寸

    1.高度

    • height: 高度
    • line-height: 行高
    • max-height: 最大高度
    • min-heught: 最小高度

    2.宽度

    • width: 宽度
    • max-width: 最大宽度
    • min-width: 最小宽度

    3.设置方法

    • 像素值

      • px,如20px
      • rp
    • List item

    x,如20rpx
    - 说明:px=2rpx

    • 百分比

    • 如10%

    背景

    1.backgroung

    多属性的缩略写法,顺序分别是background-color,图像地址,图像重复,图像是否重 复 ,图像是否固定,图像位置

    2.background-attachment:图像是否固定,或随着页面的其余部分滚动

    • 默认值scroll,即随着页面其余部分滚动
    • fixed,图像固定不动
    • inherit,从父元素继承background-attachment属性值

    3.bacground-color:背景颜色

    • color_name,颜色名称,如red
    • hex_number,颜色16进制值,如:#00ff00
    • rgb_number ,rgb背景颜色,如rgb(255,123,111)
    • transparent,默认值即透明
    • inherit,从父元素继承background-image属性的值

    4.background-image:背景图像,不能在wxss中定义

    • 默认值none,即不显示图像
    • url(“url”),指向图像的路径
    • inherit,从父元素继承background-image属性的值

    5.background-position:设置背景图片的位置

    • 默认值0%0%,如果只设置了一个关键词,则第二个默认是center
    • top left
    • top center
    • top right
    • center left
    • center center
    • center right
    • bottom left
    • bottom center
    • bottom right
    • x% y%
      • 第一值是水平位置,第二个值是垂直位置
      • 左上角是0% 0%,右下角是100% 100%
      • 如果只设置了第一个值,第二个值默认是50%
    • xpos ypos
      • 第一值是水平位置,第二个值是垂直位置
      • 左上角是0 0
      • 如果只设置了第一个值,第二个值默认是50%

    6.background-repeat:如何重复背景图像

    • 默认值repeat, 背景图像将在垂直方向和水平方向重复
    • repeat-x ,在水平方向重复
    • repeat-y ,在垂直方向重复
    • no-repeat ,仅显示一次
    • inherit ,从父元素继承background-repeat属性设置

    边框

    1.border

    针对四个边的属性设置,border-width,border-style,border-color的缩写,如border: 5px soild green

    2.border-style:元素所有边框的样式

    • 默认值none,即无边框
    • hidden,隐藏边框,同none
    • dotted,点状边框
    • dashed,虚线边框
    • solid,实线
    • doubie,双线
    • groove,3D凹槽边框
    • ridge,3D垄状边框
    • inset,3Dinset 边框
    • outset,3Doutset边框
    • inherit,从父元素继承边框样式

    3.border-width:边框的高度

    4.border-color:边框的颜色

    5.上边框

    • border-top:上边框的属性
    • border-top-color:上边框的颜色
    • border-top-style:上边框的样式
    • border-top-width: 上边框的宽度

    6.下边框

    • border-bottom:下边框的属性
    • border-bottom-color:下边框的颜色
    • border-bottom-style:下边框的样式
    • border-bottom-width: 下边框的宽度

    7.左边框

    • border-left:左边框的属性
    • border-left-color:左边框的颜色
    • border-left-style:左边框的样式
    • border-left-width: 左边框的宽度

    8.右边框

    • border-right:右边框的属性
    • border-right-color:右边框的颜色
    • border-right-style:右边框的样式
    • border-right-width: 右边框的宽度

    9.border-radius:圆角

    轮廓

    1.元素周围的一条线,即在边框边缘的外围

    2.outline:

    • outline-color
    • outline-style
    • outline-width

    3.outline-color:轮廓颜色

    4.outline-style:轮廓样式

    5.outline-width:轮廓宽度

    • none:无轮廓,默认值
    • dotted:点状轮廓图
    • dashed:虚线轮廓
    • solid:实现轮廓
    • double:双线轮廓
    • groove:3D凹槽轮廓
    • ridge:3D凸轮廓
    • inset:3D凹边轮廓
    • outset:3D凸边轮廓
    • inherit:从父元素继承轮廓

    边距

    1.内边距

    • padding:四个边距,padding-top,padding-right,padding-bottom,padding-left的简写,如:padding:10px 10px 10px 10px;
    • padding-top:上边距
    • padding-right:右边距
    • padding-bottom:下边距
    • padding-left:左边距

    2.外边距

    • margin:top right bottom left
    • margin-top:上外边距:(1)默认值0,允许使用负值 (2)auto (3) length固定的值 (4)%基于父对象总高度的百分比上外边距 (5)inherit从父元素继承上外边距
    • margin-right:右外边距
    • margin-bottom:下外边距
    • margin-left:左外边距

    3.外边距合并

    • 当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者。

    文本

    1.color:文本颜色

    • 颜色名称,如:red
    • 十六进制颜色值,如:#ff00dd
    • rgb颜色值,如:rgb(10,111,233)
    • inherit:从父元素继承颜色值

    2.direction:文本方向

    • ltr:默认值,从左向右
    • rtl:从右向左
    • inherit:从父元素继承

    3.line-height:行高

    • normal:默认,设置合理的行间距
    • number:设置的数字会与当前的字体尺寸相乘来设置行间距
    • length:设置固定的行间距
    • %:基于当前字体尺寸的百分比间距
    • inherit:从父元素继承

    4.letter-spacing字符间距

    • normal:默认,没有额外的空间
    • length:固定空间,允许使用负值
    • inherit:从父元素继承

    5.text-align:对齐元素中的文本

    • left:默认,文本排序到左边
    • right:文本排序到右边
    • center:文本排列到中间
    • justify:两端对齐
    • inherit:从父元素继承

    6.text-decoration:祥文本中添加修饰

    • none:默认
    • underline:文本下的一条线
    • overline:文本上的一条线
    • line-through:穿过文本下的一条线,即删除线
    • blink:闪烁的文本
    • inherit:从父元素继承

    7.text-indent:缩进元素中文本的首行

    • length:默认值0,固定的缩进
    • %:基于父元素宽度的百分比
    • inherit:从父元素继承

    8.text-shadow:设置文件阴影

    9.text-transform:控制元素中的字母

    • none:默认,标准的文本
    • capitalize:每个单词以大写字母开头
    • uppercase:大写字母
    • lowercase:小写字母
    • inherit:从父元素继承

    10.unicode-bidi:设置文本方向

    11.white-space:设置元素中空白的处理方式

    • normal:默认,空白会被浏览器忽略
    • pre:空白会被浏览器保留
    • nowrap:文件不会换行,直到遇到
      标签换行
    • pre-wrap:保留空白符序列,正常换行
    • pre-line:合并空白符序列,保留换行符
    • inherit:从父元素继承

    12.word-spacing:设置字间距

    • normal:默认,定义标准空间
    • length:固定空间
    • inherit:从父元素继承

    尺寸

    1.高度

    • height: 高度
    • line-height: 行高
    • max-height: 最大高度
    • min-heught: 最小高度

    2.宽度

    • width: 宽度
    • max-width: 最大宽度
    • min-width: 最小宽度

    3.设置方法

    • 像素值

      • px,如20px
      • rpx,如20rpx
      • 说明:px=2rpx
    • 百分比

    • 如10%

    背景

    1.backgroung

    多属性的缩略写法,顺序分别是background-color,图像地址,图像重复,图像是否重 复 ,图像是否固定,图像位置

    2.background-attachment:图像是否固定,或随着页面的其余部分滚动

    • 默认值scroll,即随着页面其余部分滚动
    • fixed,图像固定不动
    • inherit,从父元素继承background-attachment属性值

    3.bacground-color:背景颜色

    • color_name,颜色名称,如red
    • hex_number,颜色16进制值,如:#00ff00
    • rgb_number ,rgb背景颜色,如rgb(255,123,111)
    • transparent,默认值即透明
    • inherit,从父元素继承background-image属性的值

    4.background-image:背景图像,不能在wxss中定义

    • 默认值none,即不显示图像
    • url(“url”),指向图像的路径
    • inherit,从父元素继承background-image属性的值

    5.background-position:设置背景图片的位置

    • 默认值0%0%,如果只设置了一个关键词,则第二个默认是center
    • top left
    • top center
    • top right
    • center left
    • center center
    • center right
    • bottom left
    • bottom center
    • bottom right
    • x% y%
      • 第一值是水平位置,第二个值是垂直位置
      • 左上角是0% 0%,右下角是100% 100%
      • 如果只设置了第一个值,第二个值默认是50%
    • xpos ypos
      • 第一值是水平位置,第二个值是垂直位置
      • 左上角是0 0
      • 如果只设置了第一个值,第二个值默认是50%

    6.background-repeat:如何重复背景图像

    • 默认值repeat, 背景图像将在垂直方向和水平方向重复
    • repeat-x ,在水平方向重复
    • repeat-y ,在垂直方向重复
    • no-repeat ,仅显示一次
    • inherit ,从父元素继承background-repeat属性设置

    边框

    1.border

    针对四个边的属性设置,border-width,border-style,border-color的缩写,如border: 5px soild green

    2.border-style:元素所有边框的样式

    • 默认值none,即无边框
    • hidden,隐藏边框,同none
    • dotted,点状边框
    • dashed,虚线边框
    • solid,实线
    • doubie,双线
    • groove,3D凹槽边框
    • ridge,3D垄状边框
    • inset,3Dinset 边框
    • outset,3Doutset边框
    • inherit,从父元素继承边框样式

    3.border-width:边框的高度

    4.border-color:边框的颜色

    5.上边框

    • border-top:上边框的属性
    • border-top-color:上边框的颜色
    • border-top-style:上边框的样式
    • border-top-width: 上边框的宽度

    6.下边框

    • border-bottom:下边框的属性
    • border-bottom-color:下边框的颜色
    • border-bottom-style:下边框的样式
    • border-bottom-width: 下边框的宽度

    7.左边框

    • border-left:左边框的属性
    • border-left-color:左边框的颜色
    • border-left-style:左边框的样式
    • border-left-width: 左边框的宽度

    8.右边框

    • border-right:右边框的属性
    • border-right-color:右边框的颜色
    • border-right-style:右边框的样式
    • border-right-width: 右边框的宽度

    9.border-radius:圆角

    轮廓

    1.元素周围的一条线,即在边框边缘的外围

    2.outline:

    • outline-color
    • outline-style
    • outline-width

    3.outline-color:轮廓颜色

    4.outline-style:轮廓样式

    5.outline-width:轮廓宽度

    • none:无轮廓,默认值
    • dotted:点状轮廓图
    • dashed:虚线轮廓
    • solid:实现轮廓
    • double:双线轮廓
    • groove:3D凹槽轮廓
    • ridge:3D凸轮廓
    • inset:3D凹边轮廓
    • outset:3D凸边轮廓
    • inherit:从父元素继承轮廓

    边距

    1.内边距

    • padding:四个边距,padding-top,padding-right,padding-bottom,padding-left的简写,如:padding:10px 10px 10px 10px;
    • padding-top:上边距
    • padding-right:右边距
    • padding-bottom:下边距
    • padding-left:左边距

    2.外边距

    • margin:top right bottom left
    • margin-top:上外边距:(1)默认值0,允许使用负值 (2)auto (3) length固定的值 (4)%基于父对象总高度的百分比上外边距 (5)inherit从父元素继承上外边距
    • margin-right:右外边距
    • margin-bottom:下外边距
    • margin-left:左外边距

    3.外边距合并

    • 当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者。

    文本

    1.color:文本颜色

    • 颜色名称,如:red
    • 十六进制颜色值,如:#ff00dd
    • rgb颜色值,如:rgb(10,111,233)
    • inherit:从父元素继承颜色值

    2.direction:文本方向

    • ltr:默认值,从左向右
    • rtl:从右向左
    • inherit:从父元素继承

    3.line-height:行高

    • normal:默认,设置合理的行间距
    • number:设置的数字会与当前的字体尺寸相乘来设置行间距
    • length:设置固定的行间距
    • %:基于当前字体尺寸的百分比间距
    • inherit:从父元素继承

    4.letter-spacing字符间距

    • normal:默认,没有额外的空间
    • length:固定空间,允许使用负值
    • inherit:从父元素继承

    5.text-align:对齐元素中的文本

    • left:默认,文本排序到左边
    • right:文本排序到右边
    • center:文本排列到中间
    • justify:两端对齐
    • inherit:从父元素继承

    6.text-decoration:祥文本中添加修饰

    • none:默认
    • underline:文本下的一条线
    • overline:文本上的一条线
    • line-through:穿过文本下的一条线,即删除线
    • blink:闪烁的文本
    • inherit:从父元素继承

    7.text-indent:缩进元素中文本的首行

    • length:默认值0,固定的缩进
    • %:基于父元素宽度的百分比
    • inherit:从父元素继承

    8.text-shadow:设置文件阴影

    9.text-transform:控制元素中的字母

    • none:默认,标准的文本
    • capitalize:每个单词以大写字母开头
    • uppercase:大写字母
    • lowercase:小写字母
    • inherit:从父元素继承

    10.unicode-bidi:设置文本方向

    11.white-space:设置元素中空白的处理方式

    • normal:默认,空白会被浏览器忽略
    • pre:空白会被浏览器保留
    • nowrap:文件不会换行,直到遇到
      标签换行
    • pre-wrap:保留空白符序列,正常换行
    • pre-line:合并空白符序列,保留换行符
    • inherit:从父元素继承

    12.word-spacing:设置字间距

    • normal:默认,定义标准空间
    • length:固定空间
    • inherit:从父元素继承

    字体

    1.fornt:多个属性的简写

    2.font-family:字体系列

    3.font-size:字体尺寸

    • length:设置为一个固定的值
    • %:设置为基于父元素的一个百分比值
    • larger:设置为比父元素更大的尺寸
    • smaller:设置为比父元素更小的尺寸
    • insert:从父元素继承
    • 取值:
      • xx-samll:最小值
      • x-smaller
      • small
      • medium:默认值
      • large
      • x-large
      • xx-large:最大值

    4.font-size-adjust:字体智能缩放

    • none:默认
    • number:定义字体的aspect值比率
      • 首选字体的尺寸*(font-size-adjust值/可用字体的aspect值)=可应用到可用字体的字体尺寸
      • 取值:0.1~1

    5.font-stretch:水平拉伸

    • normal:默认
    • wider:更进一步的进展
    • narrower:更进一步的收缩
    • 取值
      • ultra-condensed:最宽的值
      • extra-condensed
      • condensed
      • semi-condensed
      • semi-expanded
      • expanded
      • extra-expanded
      • ultra-expanded:最窄的值

    font-style:字体风格

    • normal:默认
    • italic:斜体
    • oblique:倾斜
    • inherit:从父元素继承

    font-variant:以小型大写字体或者正常字体显示文本

    • normal:默认
    • small-caps:显示小型大写字母
    • inherit:从父元素继承

    font-weight:字体的粗细

    • normal:默认,值等同于400,取值100~900
    • bold:定义粗字符,值等同于700
    • bolder:定义更粗的字符
    • lighter:定义更细的字符
    • inherit:从父元素继承

    列表

    list-style:简写属性(list-style-type,list-style-position,list-style-image)

    list-style-image:设置图像为列表标志

    • none:默认,无图形
    • URL:图像的路径
    • inherit:从父元素继承

    list-style-type:列表项标志的类型

    • none:无标志
    • disc:默认,空心圆
    • circle:空心圆
    • square:实心方块
    • decimal:数字0~n
    • decimal-leading-zero:0开头的数字01~0n
    • lower-Roman:小罗马数字
    • upper-Roman:大罗马数字
    • lower-alpha:小写英文字母
    • upper-alpha:大写英文字母
    • lower-Greek:小写希腊字母
    • upper-Greek:大写希腊字母
    • lower-Latin:小写拉丁字母
    • upper:大写拉丁字母
    • Hebrew:传统希伯来编号
    • armenian:传统亚美尼亚编号
    • Georgian:传统乔治亚编号
    • cjk-ideographic:表单数字
    • hiragana:小写日文片假名,如a,i,u,e,o,ka,ki
    • katakana:大写日文片假名,如:A,I,U,E,O,KA,KI
    • hiragana-iroha:小写日文片假名,如:i,ro,ra,hi,ho,he,to
    • katakana-iroha:大写日文片假名,如I,RO,HA,NI,HO,HE,TO

    表格

    border-collapse,表格边框合并为单一的边框

    • separate,默认,边框被分开
    • collapse,边框合并为一个单一的边框
    • inherit,从父元素继承

    border-spacing,分隔单元格边框的距离

    • length length
      • 相邻单边框的距离,不允许用负值
      • 只有一个length时,定义的是水平和垂直的间距
      • 有两个length时,一个定义水平间距,另一个定义垂直间距
    • inherit,从父类元素继承

    cpation-side,表格标题的位置

    • top,默认,定位在表格之上
    • bottom,定位在表格之下
    • inherit,从父元素继承

    empty-cells,是否显示表格中的空单元格

    • show,默认,在空单元格周围绘制边框
    • hide,不在空单元格周围绘制边框
    • inherit,从父元素继承

    table-layout,显示单元、行和列的算法

    • automatic,默认,列宽由单元格内容设定
    • fixed,列宽由表格宽度和列宽设定
    • inherit,从父元素继承

    基本选择器

    类选择器 .name{…}

    • 定义,如:.viewStyle{…}
    • 使用,如: <view class=“viewStyle”>…</view>

    ID选择器 #name{…}

    • 定义,如: <view id=“idStyle”>…</view>

    元素选择器 name{…}

    • 定义:如:view{…}
    • 使用,如:<view>…</view>

    通配符选择器 *{}

    包含选择器

    • p c{…},即parent child{…}
    • 父元素下的所有层的子元素

    子元素选择器

    • p>c{…},即parent>child{…}
    • 父元素的下一层的子元素

    邻近兄弟元素选择器 c + c{}

    通用兄弟元素选择器 c ~ c{…}

    属性选择器

    属性字头选择器 E[attr|= “value” ]

    属性开头选择器 E[attr^= “value”]

    属性包含选择器 E[attr*= “value”]

    属性单词选择器 E[attr~= “value”]

    属性结尾选择器 E[attr$= “value”]

    属性均等选择器 E[attr= “value”]

    属性非均等选择器 E[attr!= “value”]

    伪类选择器

    动态伪类选择器

    • :link
    • :visited
    • :hover
    • :active
    • :focus

    状态伪类选择器

    • :enabled,启用
    • :disabled,禁用
    • :checked,选中

    选择伪类选择器

    • :first-child
    • :last-child
    • :nth-child()
    • :nth-last-child()
    • :nth-of-type()
    • :nth-last-of-type()
    • first-of-type
    • last-of-type
    • only-child
    • only-of-type

    空内容伪类选择器 :empty

    否定伪类选择器 :not

    伪元素

    • ::first-line
    • ::first-letter
    • ::before
    • ::after
    • ::selection

    1、水平布局   display: flex; flex-direction: row;

    2、水平居中   justify-content: center;

    3、垂直居中   align-items: center;

    4、text限制行数  

              display: -webkit-box;   //定义为自适应布局

              -webkit-line-clamp: 4;   //行数

             -webkit-box-orient: vertical;  //垂直方向隐藏

              text-overflow: ellipsis;   //超出部分省略号

              overflow: hidden;   //多出部分隐藏

    更多相关内容
  • 目录原生微信小程序 基础语法原生小程序之 wxml 标签语法定义数据wx:for 遍历属性wx:if wx:elif wx:else 条件语句三目运算模板语法 ( 渲染 同样的标签,只不过内容不一致而已 )原生小程序 之 wxss 样式相关 ...

    原生微信小程序 基础语法

    原生小程序之 wxml 标签语法

    定义数据

    • index.wxml
    <view>
      {{ test }}
    </view>
    
    • index.js
    // pages/about/about.js
    Page({
      data: {
        test:"testtest"
      },
    })
    

    wx:for 遍历 数组

    • index.wxml
    <!--index.wxml-->
    <view class="container">
      <view wx:for="{{arr}}" class="arr-item" wx:key="index">{{  item }}</view>
    </view>
    
    • index.js
    // index.js
    Page({
      // 定义数据
      data: {
        arr: [
          1, 2, 3, 4
        ]
      },
    })
    

    wx:for 遍历 对象

    • index.wxml
    <!--index.wxml-->
    <view >
      <!-- wx:for 遍历对象 设置item为每一个项 和 index值 -->
      <view wx:for="{{obj}}"  wx:for-item="value" wx:for-index="key" wx:key="key">
        <text>{{ value.age }}</text>
      </view>
    </view>
    
    
    • index.js
    // index.js
    Page({
      data: {
        obj:{
          "a":{age:10},
          "b":{age:20},
          "c":{age:30}
        }
      },
    })
    
    • 效果
      在这里插入图片描述

    wx:if wx:elif wx:else 条件语句 ( wx:if 可以和 block空标签一起使用,不会渲染多余的标签)

    • wxml.html
    <!--index.wxml-->
    <view class="container">
      <view wx:if="{{ view == '1'}}">我是1</view>
      <view  wx:elif="{{ view == '2'}}">我是2</view>
      <view  wx:else="{{ view == '3'}}">我是3</view>
    </view>
    
    • index.js
    // index.js
    Page({
      // 定义数据
      data: {
        view:"1"
      },
    })
    

    三目运算

    <view > {{flag ? "我是true" : "我是false"}} </view>
    

    hidden 显示和隐藏属性 ( 类似 vue的 v-show)

    • index.wxml
    <view>
      flag - {{ flag }}
      <view hidden="{{flag}}">true时隐藏,flase为显示</view>
      <button bindtap="btn">修改</button>
    </view>
    
    • index.js
    // pages/about/about.js
    Page({
      data: {
        flag:true
      },
      btn(e){
        this.setData({
          flag: !this.data.flag
        })
      }
    })
    
    • 效果
      在这里插入图片描述

    模板语法 ( 渲染 同样的标签,只不过内容不一致而已 )

    • index.wxml
    <view>
      <template name="staffName">
        <view>
          FirstName: {{firstName}}, LastName: {{lastName}}
        </view>
      </template>
      <template is="staffName" data="{{...staffA}}"></template>
      <template is="staffName" data="{{...staffB}}"></template>
    </view>
    
    • index.js
    // pages/about/about.js
    Page({
      data: {
        staffA:{
          firstName:"谢",
          lastName:"哈哈"
        },
        staffB:{
          firstName:"林",
          lastName:"嘻嘻"
        },
      },
    })
    
    • 效果
      在这里插入图片描述
    • index.wxml
      <template name="objectCombine">
        obj {{ for }} - {{ bar }} 
      </template>
      <template is="objectCombine" data="{{for: a, bar: b}}"></template>
    
    • index.js
    // pages/about/about.js
    Page({
      data: {
        flag:true,
        a:"aaa",
        b:"bbb"
      },
    })
    
    • 效果
      在这里插入图片描述

    原生小程序 之 wxss 样式相关

    • 当前屏幕 750rpx (满屏 - 总宽度)
    • 样式导入
    • @import XXX路径

    class 与 style 两种写法

    • class 与 style 两种写法
    • index.wxml
    <view>
      <!-- style 普通写法 -->
      <view style="color: red">我是red</view>
      <!--style 动态绑定 数据 -->
      <view style="color:{{ color }};background: {{bg}};">我是red</view>
      <view style="color:{{flag? color:color2 }};">我是red</view>
      <view style="color:{{!flag? color:color2 }};">我是red</view>
      <view> ---- 分割线 ---- </view>   
      <!-- class 普通写法 -->
      <view class="color1">我是red</view>
      <view class="{{ flag ? 'color1':'color2'}} 'bg2'">我是red</view>
      <view class="{{ !flag ? 'color1':'color2'}}">我是red</view>
    </view>
    
    • index.js
    // pages/about/about.js
    Page({
      data: {
        color:"blue",
        flag:true,
        color2:"red",
        bg:"orange"
      },
    })
    
    • index.wxss
    .color1 {
      color: #cc1;
    }
    .bg2 {
      background: orange;
    }
    .color2 {
      color: pink;
    }
    
    • 效果
      在这里插入图片描述
    展开全文
  • 微信小程序WXSS语法介绍

    千次阅读 2019-03-24 20:21:06
    WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。 WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。 2.3.1 文件组成 ...

    WXSS 样式

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

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

     

    2.3.1 文件组成

    项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面。页面样式:与app.json注册过的页面同名且位置同级的WXSS文件。

    其它样式:其它样式可以被项目公共样式和页面样式引用。

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

     

    2.3.2 尺寸单位

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

     

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

     

    2.3.3 WXSS引用

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

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

     

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

    @import './test_0.wxss'

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

     

    2.3.4 内联样式

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

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

     

    2.3.5 选择器

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

    2.3.6 官方样式库

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

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

     

    展开全文
  • 微信小程序WXSS和全局、页面配置

    千次阅读 多人点赞 2022-07-21 08:23:12
    本文对微信小程序WXSS相对于CSS新增内容进行讲解,以及微信小程序的全局配置,页面配置

    🍒观众老爷们好呀,小程序系列更新,上文我们讲解了小程序中WXML 中的条件渲染和列表渲染,那么接下来,就让我们走进微信小程序的WXSS以及小程序配置吧!
    🍒今天的内容也是非常重要,赶紧拿小本本记起来呀。

    一,WXSS

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

    1.1 rpx尺寸单位

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

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

    1.2 样式导入@import

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

    语法:@import "相对路径"

    1.3 全局样式

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

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

    二,全局配置

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

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

    1. pages,用来存放页面的路径,第一个放的就是小程序的首页。
      "pages": [
        "pages/index/index",
        "pages/list/list"
      ],
    
    1. window,页面的窗口外观,如:
      "window": {
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "第一个小程序"
      },
    
    1. tabBar,页面的底部栏,微信小程序中这部分经常作为跳转页面的工具。
      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/list/list",
            "text": "目录"
          }
        ],
        "color": "#fff",
        "selectedColor": "#999",
        "backgroundColor": "#111"
      },
    
    1. 还有一个常见的就是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 模板样式

    多人点赞 热门讨论 2022-07-02 19:08:43
    @import 的语法格式WXSS 模板样式 - 全局样式和局部样式1. 全局样式2. 局部样式 2. 局部样式 在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。 注意: ① 当局部样式和全局样式冲突...
  • WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入。 尺寸单位: rpx:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如:在 iPhone6 ...
  • 对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下: wxss样式属性 一、wxss display(显示) 属性 说明 flex 多栏多列布局 flex-direction:row/column inline-block 行内块元素...
  • 同学们大家好,我是伊同学,今天进入WXSS部分的学习,首先我们还是先来讲解一下基本语法。 本部分我们将要学习的知识点如下所示: 经过之前的课程,相信各位同学已经对wxss有了初步的印象,那么本节课...
  • 微信小程序导入wxss文件 在开发小程序中,需要导入一些wxss文件。所以记录一下导入的语法和文件路径写法 @import "/static/iconfont/iconfont.wxss"; 文件夹结构
  • 微信小程序样式 WXSS

    2021-01-12 16:05:48
    微信小程序样式 WXSS样式基础尺寸单位样式导入内联样式选择器less语法 样式基础 类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示。 WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序WXSS 对 ...
  • 微信小程序---wxss模板样式

    多人点赞 热门讨论 2022-07-17 10:43:46
    WXSS(WeiXinStyleSheets)是一套样式语言,用于美化WXML的组件样式,类似于网页...rpx(responsivepixel)是微信小程序独有的,用来解决屏适配的尺寸单位。使用WXSS提供的@import语法,可以导入外联的样式表。.........
  • 微信小程序使用Less三个步骤
  • wxss样式语法,包括rpx尺寸单位,样式导入,全局与局部样式,常用的样式属性,包括尺寸、边框、边距、文本、颜色等等;wxs脚本语言,定义与使用内联式与外联式的wxs脚本
  • 新手开发微信小程序时,在wxss中值得留意的地方
  • 这东西其实是微信自己的一种 CSS 语言,大部分都还是 CSS 语法,也有自己的东西,主要针对微信自己的 WXML 标记语言而生的,用来丰富其组件的显示效果。 WXSS 相对 CSS 并没有太大差别,只是需要注意以下几...
  • 下边我们介绍下webstorm来开发微信小程序的一些配置:   1.首先FileType下Cascading Style Sheet 添加*.wxss (此图片来源于网络,如有侵权,请联系删除! )   2.FileType下HTML 添加*.wxml (此图片来源于网络,如有...
  • 微信小程序的基础语法(必看)

    千次阅读 2021-10-19 16:15:43
    1. 简述微信小程序的运行机制 热启动 :假如⽤户已经打开了某个⼩程序,在⼀定时间内再次打开⼩程序的话,这个时候我们就不再需要重新启动了,这需要把我们的后台打开的⼩程序切换到前台来使⽤。 冷启动:⽤户⾸次...
  • 微信小程序2-WXSS,WXS

    2022-07-09 21:00:52
    微信小程序(1)WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序WXSS 对 CSS 进行了扩充以及修改 rpx...
  • 微信小程序(二)

    2021-06-22 20:55:49
    小程序相关 基本标签 view (快标签) <view></view> image(图片标签) !!!注:图片要给相对路径 <image class="tp" src="1.png"></image> text(文本标签) <text>hello world...
  • 微信小程序基本语法介绍

    千次阅读 2021-06-21 14:43:24
    我们用了一定的篇幅介绍了一下小程序的全局语法,包括app.json的配置,app.js的语法及全局样式app.wxss的配置。本节我们就介绍一下页面的具体语法。 页面组成 小程序是由一个个页面组成的,pages目录下的二级目录...
  • animation 属性微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua定义和用法animation 属性是一个简写属性,用于设置六个动画属性: animation-name ...
  • 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets) wxapp-helper 微信小程序开发助手 生成页面/组件,页面/组件模板可配置...
  • 微信小程序语法

    千次阅读 2019-02-12 11:32:44
    微信小程序不像创建普通的Android项目一样,直接new一个文件就可以了。微信小程序创建一个项目还需要你的appid,比较严格。简单了解一下微信小程序。 它的整体感觉和HTML差不多,比如HTML展示页面,CSS渲染页面,JS...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,066
精华内容 1,626
热门标签
关键字:

微信小程序wxss语法