wxss_文献搜索 - CSDN
精华内容
参与话题
  • 微信小程序---wxss常用属性

    千次阅读 2018-09-13 14:01:03
    以下内容均为个人理解,主要用于备忘或者提醒,各种副标题的名称定义纯属DIY,...HTML,WXSS=>CSS。 附上两条链接:w3school关于CSS的完整教程,w3school关于HTML的完整教程。 因为相似,...

    以下内容均为个人理解,主要用于备忘
    —–前言即废话篇——-
    微信小程序的代码和网页编程非常相似,两者都有JS、JSON文件,同时WXML=>HTML,WXSS=>CSS。
    附上两条链接:w3school关于CSS的完整教程w3school关于HTML的完整教程
    因为相似,所以熟悉网页编程的就能够很快上手小程序的编写。

    1. width:组件宽度。百分比情况下会对父组件的总宽度进行百分比换算。单位:1px=2rpx(rpx可以在不同屏幕尺寸的设备上都能尽量保持一样的比例大小。px则不行)%,hv。

    2. height:组件高度。同上。

    3. background-color:所有组件都可以设置背景颜色,就算是text也可以,不过如果没有设置宽高度,就没有办法渲染颜色。变量取值:rgb(a,b,c)(a,b,c取值0~255);#000000~ffffff(十六进制取色),RED/BLUE/PINK(英文单词对应的各种颜色)

    4. display:组件内的元素显示方式。通常设置为flex,使元素更加灵活。

    5. flex-direction:设置为flex后,可以使用该属性。column为列排序;row为行排序。

    6. align-items:各元素在盒子内的位置。center居中,flex-start居首,flex-end居尾。

    7. justify-content:元素周围留白的方式。space-around各元素周围留白。space-between元素与元素之间留白。center元素居中(该属性很厉害)在这里居中的话,align-items就会被屏蔽。

    8. position:规定该元素/盒子定位方式。relative相对定位-以上一层盒子的左上角为(0,0),absolute绝对定位-以整个页面的左上角为(0,0)。fixed黏着定位-以整个页面的左上角为(0,0),不会随着屏幕的滚动而改变位置,悬浮窗、悬浮按钮之类的就是这样做的。

    9. left、right、top、bottom:距离左、由、上、下盒子的距离,用来具体定位元素在盒子里的位置。单位同width。hv似乎不适用,我没有尝试过。设置left的时候就没有必要设置right,因为你只需要让该组件距离left多少,而并不需要知道它距离right多少,同理top、bottom。

    10. z-index:设置该元素/盒子的层次顺序,变量取数字0~无穷大,类似ps中的图层顺序。越大的排在视图的前面,低级的会被高级的遮挡住。悬浮窗、悬浮组件的实现同样需要将顺序设置为全局中最高的。

    11. padding:变量取值: a b c d 。分别代表该元素距离所在盒子的左、上、右、下的内边距距离。也可padding-left/right/top/bottom:a 。具体规定某个方向的内边距距离。

    12. margin:设置外边距。变量取值、具体设置、用法同上。

    13. border-radius:变量取值:a b c d。代表左上、右上、右下、左下角的圆角框的半径。不设置的情况下为0,即该元素/组件为方角。如果只赋值a,则a=b=c=d。单位px、rpx。PS一句复杂定义:如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的(官方定义,基本废话难以理解所以可以忽略,因为你完全可以 a 0 b 0这样去赋值,很方便)

    14. border:设置元素/盒子的边框样式。变量取值:a b c。a-边框宽度,b-边框样式,c-边框颜色。border是统一设置四个边框(左右上下)的属性,而border-left/right/top/bottom是具体规定某个边框的样式。PS很重要如何在屏幕上画一条线??申请一个view,属性设置为border-bottom/left:a b c。bottom为横线,left为竖线。a为线的粗细,b为样式,c为颜色。bottom的时候该view的width要设置为你想要的线的长度;而left的时候该view的height要设置为你想要的线的高度。如果不设置width/height的话,则会继承父容器的width/height。

    15. opacity:元素的不透明级别,取值0.0~1.0,对应完全透明~完全不透明。运用:opacity+positio+z-index去规定一个view容器,就可以做屏幕上的遮罩层,再用background-color+width+height,去规定容器的颜色、大小。

    16. font:设置字体属性,所有的组件中只要含有字体元素都可以使用该属性,比如input、button、view等等。常用四种:font-size:大小;color:颜色;font-style:字体样式;font-width:字体粗细。

    17. line-height:常用于button中,设置按钮内字体的高度。

    18. 。。。。未完待续


    以上就是个人在实习期间入坑小程序经手的项目训练中总结出来的,CSS属性非常非常非常多,列举的17条属性是项目编写过程中出场率90%以上的,不同属性之间的联合就可以变幻出非常华丽的页面,不过这就需要对CSS有一定掌握才能实现的吧。内容参考了很多CSDN前辈的技巧。

    喜欢的点赞留言,不足或者表达不明确的欢迎提问!

    日后有空,再来补充
    巴金旧舍的猫

    展开全文
  • 微信小程序(WXSS样式文件)

    千次阅读 2019-08-16 16:24:38
    WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。 WXSS分类 小程序中的样式文件一共分为两个级别/两类: 提供了全局的样式和局部样式。和前边 app.json, page...

    WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。
    WXSS分类
    小程序中的样式文件一共分为两个级别/两类:
    提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
    小程序全局样式app.wxss,也叫页面公共样式,会被注入到小程序的每个页面。页面样式page.wxss,即单个页面样式
    注意:WXSS 仅支持部分 CSS 选择器
    WXSS简介
    WXSS 决定 WXML 组件的显示样式。
    为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
    与 CSS 相比,WXSS 扩展的特性有:
    尺寸单位
    样式导入
    WXSS尺寸单位
    在WXSS中、引入了rpx(responsive pixel响应像素)尺寸单位。、
    目的:适配不同了宽度的屏幕、开发起来更简单。
    在不同宽度的屏幕下,如果使用px为尺寸单位,有可能造成留白过多,如图:
    在这里插入图片描述
    修改为rpx尺寸单位,则如下所示:
    在这里插入图片描述
    原理:
    小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。
    具体适配与像素问题见下节《物理像素与逻辑像素》
    在这里插入图片描述
    WXSS样式导入
    微信小程序可以使用@import语句导入外联样式表
    @import后跟需要导入的外联样式表的相对路径,用;表示结束
    ①定义公共样式
    在这里插入图片描述
    ②导入
    在这里插入图片描述
    ③结果
    在这里插入图片描述
    WXSS内联样式
    小程序框架组件支持使用 style属性来控制组件的样式
    style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,要尽量避免将静态的样式写进 style 中,以免影响渲染速度。
    在这里插入图片描述
    渲染结果:<view style="color:pink"></view> —>内联样式绑定
    WXSS选择器
    WXSS目前支持的选择器如下所示
    在这里插入图片描述
    开发工具设置
    (1)上传代码时自动补全
    小程序要求兼容到iOS8以下版本,需要开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”。
    (2)不校验合法域名
    设置完毕后,在微信开发者工具中,就可以随意访问了。此时便可以使用 http://localhost:12345/这种既不带 https的安全链接地址。
    总结
    定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

    展开全文
  • WXSS

    千次阅读 2017-09-24 12:59:48
    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,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物理像素。
    设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
    iPhone5 1rpx = 0.42px 1px = 2.34rpx
    iPhone6 1rpx = 0.5px 1px = 2rpx
    iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

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

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

    样式导入

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

    示例代码:

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

    选择器

    目前支持的选择器有:

    选择器 样例 样例描述
    .class .intro 选择所有拥有 class="intro" 的组件
    #id #firstname 选择拥有 id="firstname" 的组件
    element view 选择所有 view 组件
    element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
    ::after view::after 在 view 组件后边插入内容
    ::before view::before 在 view 组件前边插入内容

    内联样式

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

    • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
    <view style="color:{{color}};" />
    <view bindtap="viewtap" style="color:{{color}}">      //wxml文件
        {{firstTest}}---{{m1.max(arrNum)}}--{{m1.message}}
      </view>
    Page({    //js文件的内容
      data: {
        motto: 'Hello zoe',
        userInfo: {},
        hasUserInfo: false,
        firstTest:1,
        color:'red',
    wxml内的js变量也能调用
    <!--index.wxml-->
    <wxs module="m1">
      var msg = "this is the first moudle";
      var getMax = function(array){
        var max = undefined;
        for (var i = 0; i < array.length; ++i) {
          max = max === undefined ? 
            array[i] : (max >= array[i] ? max : array[i]);
        }
        return max;
      }
      var color = 'red';
      module.exports.max = getMax;
      module.exports.message = msg;
      module.exports.aaa=color;
    </wxs>
    <!--wxml-->
    <view class="container">
      <view bindtap="viewtap" style="color:{{m1.aaa}}">

    全局样式与局部样式

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












    展开全文
  • 什么是wxss

    2020-02-24 22:33:18
    wxss( WeiXin Style Sheets ) 是一套样式语言,用来决定 WXML 的组件应该怎么显示 wxss 具有 css 大部分特性 wxss 对 css 进行了扩充以及修改,以适应微信小程序的开发 wxss 与 css 相比,wxss扩展的特性有: ...

    小程序中的样式

    • wxss( WeiXin Style Sheets ) 是一套样式语言,用来决定 WXML 的组件应该怎么显示
    • wxss 具有 css 大部分特性
    • wxss 对 css 进行了扩充以及修改,以适应微信小程序的开发
    • wxss 与 css 相比,wxss扩展的特性有:
      • 尺寸单位
      • 样式导入

    wxss目前支持的选择器

    • id选择器
    • 标签选择器
    • 类选择器
    • 伪类选择器
    • data-*属性选择器
    • :nth-of-type()等常用的 css3 选择器
    • 等等

     

     

     

     

     

     

    展开全文
  • wxss文件

    2020-03-01 19:26:44
    页内样式 page.wxss文件下声明 全局样式 app.wxss文件下声明 权重:行内>页内>全局 wxss样式导入 首先定义一个wxss文件,添加样式。然后在需要的样式文件wxss文件中引入@import ‘相对路径/绝对路径’ 官方...
  • WXSS 相关知识点补充

    2020-01-06 16:21:51
    目录 1、样式的三种写法 ...页面样式的三种写法:(1)行内样式、(2)页面样式 page.wxss、(3)全局样式 app.wxss。都可以作用于页面的组件 <!--1.行内(内联)样式--> <view style='color:red; fo...
  • wxss

    千次阅读 2018-04-22 18:01:27
  • WXSS学习

    2019-07-16 17:36:58
    <view class='container'> <button type='default'>测试</button> <button type='default' id='margintext'>测试1</button> <view style='border:1px solid #000'>......
  • wxss ``` .content{ font-family: 微软雅黑; color: white; bottom:47px; padding:0px; margin:0px; position:absolute; text-align: center; } .btn{ width:100%; ...
  • 小程序 WXSS样式导入 @import

    万次阅读 2018-07-21 16:26:12
    index.wxml text { color: #ff0000;... index.wxss &lt;text&gt;Hello,Netease&lt;/text&gt; import.wxss @import'import.wxss'; 可以通过@import来引入在别的文件中的样式。 
  • vscode高亮小程序wxml和wxss语法

    万次阅读 2018-03-02 10:47:11
    vscode默认无法识别wxml和wxss语法, 但是强大的vscode自然有解决办法,我们点击纯文本会发现 所以我们只要将wxml关联成html就可以语法高亮了 默认的语法不高亮 关联后的高亮语法 同样的方法我们再将...
  • 小程序里的wxss支持变量写法

    千次阅读 2019-03-26 18:18:24
    <view class="container" style='--width--:{{-tipsWidth}}rpx;'></view> .container { width: var(--width--); }
  • 概述:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、...
  • 小程序 wxss样式总结

    千次阅读 2017-10-10 17:06:00
    wxss样式里代码看不懂可以查阅这里,如果没找到对应样式,请自行百度喽,这些也是代码君问的度娘 display属性 none:此元素不会被显示 block:两个元素自动换行 inline:两个元素靠在一起 inh
  • 小程序中实时将less编译成wxss

    千次阅读 2018-07-19 14:14:06
    小程序中将less编译成wxss 安装 $ npm install -g wxss-cli 使用 minicode 为小程序开发根目录 $ wxss ./minicode 链接地址 github: 小程序中实时将less编译成wxss 小程序社区: 小程序中实时将...
  • VM414:2 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./pages/founding/founding.wxss:288:3)This wxss file is...
  • 微信小程序开发者工具更新后出现WXSS文件编译错误1.更新出错:2.在控制台输入:openVendor();然后会跳转到开发工具所在目录,删除掉一下两个文件最后重启一下开发者工具即可!
  • VM3564:1 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./components/componentLabel/index.wxss:3:1)This wxss file is ignored. ...
  • 小程序报错:编译.wxss文件错误

    千次阅读 2018-01-30 16:22:49
    在控制台输入openVendor() 后,会打开一个文件夹,删掉里面的wcsc.exe文件,重启开发工具即可。
  • 前言 博主最近又重新开始捡起微信小程序,想做点自己的东西。了解到最近小程序工具有做更新,就顺手更新了最新的版本,功能比之前强大了不少!  更新归更新,更新后控制台就一直报下面这个错误: ...
1 2 3 4 5 ... 20
收藏数 21,168
精华内容 8,467
关键字:

wxss