微信小程序开发：学习笔记[3]——WXSS样式

微信小程序开发：学习笔记[3]——WXSS样式

快速开始

介绍

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

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

文件组成

　　

  • 项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面。
  • 页面样式：与app.json注册过的页面同名且位置同级的WXSS文件。比如注册了pages/rpx/index页面，那pages/rpx/index.wxss为页面pages/rpx/index.wxml的样式。
  • 其它样式：其它样式可以被项目公共样式和页面样式引用。

　　在小程序开发中，开发者不需要像Web开发那样去优化样式文件的请求数量，只需要考虑代码的组织即可。样式文件最终会被编译优化，具体的编译原理我们留在后面章节再做介绍。

尺寸单位

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

传统的px单位在不同的分辨率屏幕下显示效果差别很大：

采用rpx后不同分辨率下显示效果相同：

　　

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

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

　　

引用WXSS文件

在传统CSS中

　　

原文地址：https://www.cnblogs.com/MrSaver/p/8994216.html

时间： 2024-12-23 03:38:10

微信小程序开发：学习笔记[3]——WXSS样式的相关文章

微信小程序，学习笔记（一）框架，视图层

微信小程序,学习笔记(一)框架,视图层 学习链接:http://www.w3cschool.cn/weixinapp/ 因为其实并非原创,但是并没有什么好的类别可选,所以修改成:"翻译"了. 熟悉 文档结构介绍 --- [D] pages --- [D] utils --- [F] app.js --- [F] app.json --- [F] app.wxss 全局变量.对象.方法 普通类型 对象 App 应用程序全局实例,在app.js中定义,每个程序只有一个实例,可以通过如下方式

微信小程序-20170421学习笔记

/**     * 微信小程序 笔记     */ 1.文件结构        微信小程序 官方给与的结构为:        projectName            pages                index                    index.js                    index.wxml            app.js            app.json 这里重点看一下,app.json        {          "pages

小程序开发--学习笔记

公众平台登录网页:https://mp.weixin.qq.com 小程序社区:http://developers.weixin.qq.com/ ------------------ 默认开发目录 ---------------- 1.  app.js.app.json.app.wxss 这三个文件必须有不能删掉. 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录 js后缀的是脚本文件,调用小程序框架提供的 API-- API 文档 json后缀的文件是对整个小程序的全局配置文件--

微信小程序开发个人笔记

1,配置文件.json 小程序的全局配置app.json和页面配置page.json每单页页面也有相应的.json文件,设置每个页面中.json配置,会覆盖与app.json相同的配置项.如下:是一个包含了所有配置选项的简单配置app.json "pages": [//设置页面的路径 "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合 "pages/logs/logs&q

微信小程序-开发组件-笔记1

1.视图容器组件(view) view组件代表了一个页面的基本视图,也就是一个新的页面的最外层容器,相当于HTML中的DIV容器.对于每一个微信小程序的控件而言,有一些属性是通用的.表1是一些通用的属性. 表1  view属性和说明 属性名 类型 描述 注释 Id String 组件的唯一标识 保持整个页面唯一 class String 组件的样式类 在对应的wxss中定义的样式类 style String 组件的内联样式 可以动态设置的内联样式 hidden Boolean 组件是否显示 所有

微信小程序开发学习（一）

一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.config.json 一些个性化配置,暂时没遇到需要用到的地方. 3.页面配置page.json 独立定义每个页面一些属性,如顶部颜色.是否允许下拉刷新.不过色调感觉还是统一定义比较好,适合多个页面情况,一般来说小程序主要是结合tab实现多页面. 二.WXML 1.标签名 类比HTML,不过标签名是v

微信小程序开发学习（二）

一些官方API 总结了一些官方API,便于之后有用时针对性查找(发现官方给了好多好用的API)官方API文档 基础 wx.canIUse:判断小程序的API,回调,参数,组件等是否在当前版本可用,返回值为boolean. 使用${API}.${method}.${param}.${options}或者${component}.${attribute}.${option}方式来调用 参数说明 ${API}代表API名字 ${method}代表调用方式,有效值为return,success, obj

微信小程序开发：学习笔记[1]——Hello World

微信小程序开发:学习笔记[1]--Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2.打开微信开发者工具,并新建项目 打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选"建立普通快速启动模板"的选项. 3.在根目录添加代码 1.在根目录创建app.json文件 2.

微信小程序开发：学习笔记[2]——WXML模板

微信小程序开发:学习笔记[2]--WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建出页面的结构. 打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件.模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxm