精华内容
下载资源
问答
  • WXSS

    千次阅读 2017-09-23 15:19:02
    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/屏幕宽度)
    iPhone51rpx = 0.42px1px = 2.34rpx
    iPhone61rpx = 0.5px1px = 2rpx
    iPhone6 Plus1rpx = 0.552px1px = 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" 的组件
    elementview选择所有 view 组件
    element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
    ::afterview::after在 view 组件后边插入内容
    ::beforeview::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

    千次阅读 2018-04-22 18:01:27
  • wxss文件

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

    样式的三种写法

    • 行内样式 组件中添加style
    • 页内样式 page.wxss文件下声明
    • 全局样式 app.wxss文件下声明
    • 权重:行内>页内>全局

    wxss样式导入

    • 首先定义一个wxss文件,添加样式。然后在需要的样式文件wxss文件中引入@import ‘相对路径/绝对路径’

    官方样式库WeUI-wxss

    rpx自适应

    • 可以根据屏幕宽度进行自适应
    • 2倍自适应(若想要100px,则需要200rpx)
    展开全文
  • wxss-transpiler wcsc.exe移植到Javascript。 测试仅在macOS上有效,但是此编译器本身也可以通用,即使在linux上也可以。 用法 npm i wxss-transpiler const transpile = require ( 'wxss-transpiler' ) const ...
  • animate.wxss

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

    千次阅读 2020-02-11 16:19:17
    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 选择器
    • 等等

     

     

     

     

     

     

    展开全文
  • app.wxss 指小程序全局样式表; 页面wxss 指引入组件的页面样式表; 组件wxss 指组件的样式表; 一. 默认自定义组件的样式只受自定义组件的影响;以下两种情况除外: ( 一 ). app.wxss 或 页面wxss 中使用了**标签...
  • FontAwesome.wxss

    2019-04-19 03:05:50
    已转好码,微信可以直接使用的FontAwesome.wxss 适合微信小程序开发人员直接使用 免去微信小程序人员自己的手动转换
  • 微信小程序wxss文件stylelint配置stylelint-config-wxss-master.zip
  • wxss样式

    千次阅读 2018-03-01 16:10:58
    WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层...
  • 设置微信小程序的全局样式app.wxss特性wxss特性wxss 变量写法app.wxss 示例写法关于弹性布局的一些看法 app.wxss特性 定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为...
  • font-awesome.wxss

    2019-09-02 23:51:21
    将font-awesome.ttf 转成微信小程序支持的格式 font-awesome.wxss
  • fontAwesome.wxss

    2020-10-26 09:39:46
    Font Awesome提供了可缩放的矢量图标,fontAwesome.wxss是在微信小程序内可使用的可缩放的矢量图标 和Font Awesome一样可以可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的...
  • less2wxss:小偷-源码

    2021-05-16 14:39:14
    编译less,然后整理wxss 安装 npm install less2wxss API less2wxss AllCssBuild oneCssBuild
  • 微信小程序视图层WXSS_小程序WXSS

    千次阅读 2018-07-04 10:19:09
    微信小程序视图层WXSS_小程序WXSS微信小程序的WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。WXSS用来决定小程序的WXML的组件应该怎么显示。为了适应广大的前端开发者,微信小程序的WXSS具有...
  • 微信小程序之视图层wxss,微信小程序之视图层wxss,微信小程序之视图层wxss
  • wxss样式表.xlsx

    2019-11-27 12:04:45
    比较全面的wxss样式表,写Html5页面参考资料,内容包括详细用法和详细说明,写前端必备资料,本文档已收集网上使用频率较高的样式,如有错误或者变更的地方,请在评论中发表
  • weui-wxss.zip

    2019-11-10 20:53:23
    weui-wxss 类似于Bootstrap框架一样,在开发小程序前端界面设计中给你节省很多时间。 使用方法很简单, 里面也有文档。 下载后用小程序开发工具打开里面的dist 目录就能看见文档和实列
  • 主要介绍了微信小程序 WXSS的相关资料,并附简单实例代码,需要的朋友可以参考下
  • 小程序 WXSS样式

    2021-06-07 20:19:16
    WXSS WXSS是一套样式语言,用于描述WXML的组件样式(有点CSS描述HTML样式的感觉) 为了适应广大的前端开发者,WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序,WXSS对CSS进行了扩充以及修改。例如: 1. ...
  • WXSS
  • 小程序WXSS

    2020-11-29 16:45:53
    微信官方关于wxss的文档
  • wxml,wxss

    2021-04-02 17:33:07
    wxml写标签,wxss写样式。
  • 区别:1、 wxss不能直接通过css3中的background-image属性来设置显示的背景图片;2、小程序中的文档流中不存在window、document对象,在使用css3属性position时需注意为基础节点设置fixed属性值。wxss和css3的区别0 ...
  • 微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件...
  • wxss解析

    2017-04-06 19:07:00
     wxss是样式语言,用于描述wxml组件样式;  在css基础上扩展而来:  1、尺寸单位: rpx, rem  2、支持样式导入 @import语句导入外联样式表  note: 微信小程序一般使用iphone6 来视觉稿的标准; 二、选择器 ...
  • wxss与rpx

    2019-03-21 16:04:00
    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,976
精华内容 11,990
关键字:

wxss