Skip to content
Mr.HopeMr.Hope
主页
  • 小程序
    • 小程序教程

      • 小程序指南
        • 代码构成
          • 宿主环境
            • 配置

              • 配置
                • 全局配置文档
                  • 页面配置
                    • 小程序内索引
                    • 框架

                      • 框架
                        • 场景值
                          • 小程序的运行环境
                            • 小程序运行机制
                              • 小程序更新机制
                              • 逻辑层

                                • 逻辑层
                                  • 生命周期 <Badge text="不需要立即掌握" />
                                    • 页面路由
                                      • 注册
                                        • App
                                          • Page
                                            • 小程序运行机制
                                              • 模块化
                                                • API

                                                  • API <Badge text="重要" type="error" />
                                                    • 路由 API
                                                      • 数据缓存 API
                                                        • 页面交互 API
                                                          • 网络 API
                                                            • 系统相关 API
                                                          • 视图层

                                                            • 视图层 View
                                                              • WXSS
                                                                • 尺寸单位
                                                                  • 样式导入
                                                                    • 内联样式
                                                                      • 选择器
                                                                        • 全局样式与局部样式
                                                                        • 事件
                                                                          • 基础组件
                                                                            • 动画
                                                                              • WXS
                                                                                • WXS 事件
                                                                                  • 简易双向绑定
                                                                                    • 获取界面上的节点信息
                                                                                      • 初始渲染缓存
                                                                                      • 能力

                                                                                        • 小程序能力
                                                                                          • 网络
                                                                                            • 存储
                                                                                              • 文件系统
                                                                                                • 调试
                                                                                              • 开发者工具

                                                                                                • 工具使用
                                                                                                  • 界面
                                                                                                    • 调试
                                                                                                      • npm 支持
                                                                                                        • 体验评分
                                                                                                        • 小程序框架

                                                                                                          • 小程序框架说明
                                                                                                            • 小程序简易开发指南
                                                                                                              • 小程序页面参数表
                                                                                                                • Page 插件
                                                                                                                  • YAML 文件案例
                                                                                                                  • 小程序分享

                                                                                                                    WXSS

                                                                                                                    Mr.Hope2020年11月8日
                                                                                                                    • 小程序
                                                                                                                    大约 2 分钟

                                                                                                                    此页内容
                                                                                                                    • 尺寸单位
                                                                                                                    • 样式导入
                                                                                                                    • 内联样式
                                                                                                                    • 选择器
                                                                                                                    • 全局样式与局部样式

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

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

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

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

                                                                                                                    • 尺寸单位
                                                                                                                    • 样式导入

                                                                                                                    与 CSS 相比,WXSS 缺失的特性有:

                                                                                                                    • 一部分高级选择器
                                                                                                                    • 一部分 CSS3 高级功能

                                                                                                                    # 尺寸单位

                                                                                                                    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;
                                                                                                                    }
                                                                                                                    

                                                                                                                    # 内联样式

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

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

                                                                                                                      <view style="color:{{color}};" />
                                                                                                                      
                                                                                                                    • class: 用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上 .,样式类名之间用空格分隔。

                                                                                                                      <view class="normal_view" />
                                                                                                                      

                                                                                                                    # 选择器

                                                                                                                    目前支持的选择器有:

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

                                                                                                                    # 全局样式与局部样式

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

                                                                                                                    编辑此页open in new window
                                                                                                                    上次编辑于: 2021/1/19 13:09:25
                                                                                                                    贡献者: Mr.Hope
                                                                                                                    下一页
                                                                                                                    事件

                                                                                                                    预览:

                                                                                                                    0  字
                                                                                                                    评论
                                                                                                                    Powered by Waline v2.5.1
                                                                                                                    Copyright © 2019-present Mr.Hope