小北微信小程序之小白教程系列之 -- 样式(WXSS)
为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入。
补充:关于扩展的特性我们下面会说,既然文档说了WXSS具有CSS 大部分特性,那么有什么不同那?
1、没有body
是的,在小程序的每一个page里是没有body属性的,不过你可以通过在wxss中对page的设置来影响整个页面的样式,比如下面的代码
page {
background:#F8F8F8
}
诸如此类,当然你也可以设置page的xxx.json中的backgroundColor属性来影响一个page页面下拉时出现的空白区域的颜色,一般来说当你页面有下拉刷新和上拉加载功能时,往往要设置backgroundColor属性。
2、没有父子关系
在使用css的时候,我们经常让样式的层级关系和html接点的层级关系保持一致,比如你的html代码中有下面代码
<div class="box">
<p class="content">
<strong ></strong>
</p>
</div>
我们习惯于css的写法如下
.box .content strong {}
这样写的好处是strong的样式不会去影响其他地方的strong。 但是 在小程序中并不支持这种父子的层级关系。你只能一个一个的设置,看下面的小程序代码
<view class="box">
<text class="box-txt"></text>
</view>
针对于上面的视图,对应的wxss应该如何写那?看下面代码
// 正确的
.box {}
.box-txt {} // 错误的
.box .box-txt {}
这样说你明白了吧?!
3、尺寸的变化
在css中我们有很多衡量尺寸的单位,比如px、em等等,当然这些在小程序中也依然可以使用,但是小程序又为自己增加了一个单位,那就是 rpx 。
小程序作为移动端的应用需要适配不同规格的设备并且兼容越来越大的手机( 话说我依然喜欢iphone5的尺寸,单手可控而且床上看电影不会砸到头 )。
所以rpx最重要的特性就是可以根据屏幕宽度进行自适应。它规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
算明白了么?官方给了一个表格,很浅显易懂,见下图。
这个换算比较简单,不在讲解,如果你真不懂可以留言。
4、样式导入
小程序的wxss支持样式的导入,这个功能相当有用,尤其是我们使用一些其他库的时候可以直接导入第三方的wxss文件,何其乐哉。
用法也很简单,看看下面代码。
@import "common.wxss";
.middle-p {
padding:15px;
}
5、内联样式
和css一样,wxss支持class和style两种样式,但是在用法上还是有区别的,一句话概括:“如果你的样式中存在动态内容,将其写到style中,其他的都放到class文件,
比如这段代码
<view style="color:{{color}};" />
将过多的样式写到style中带来的问题就是小程序在渲染视图的时候还要伴随着解析对应的样式布局等,必然对性能有一些影响。
6、选择器
另外对于css中的选择器,wxss基本都支持了,比如类、ID、组件等,看看下面官方给的图
而且类似于last-child等css的高级属性,在wxss你也可以愉快的使用。
7、全局样式与局部样式
原则上一个在小程序中一个wxss负责一个wxml视图文件,但是对于一个应用来说总会有一些公用的属性,因此小程序为应用自身提供了一个wxss,那就是app.wxss,当然你无需人工引入,它会自动的加载到每一个视图上,这点要记住。
一点总结
关于wxss到底对css支持了哪些,微信官方并没有给出相应的文档,更多细节我们要慢慢挖掘,毕竟腾讯不是百度,会把文档写的那么好。
小北微信小程序之小白教程系列之 -- 样式(WXSS)的更多相关文章
- 全栈项目|小书架|微信小程序-登录及token鉴权
小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- 全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...
- 全栈项目|小书架|微信小程序-项目结构设计分包
前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9 ...
- 全栈项目|小书架|微信小程序-实现搜索功能
效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
- 百度小程序转换微信小程序
Python脚本,一键转换Github地址:https://github.com/DWmelon/py-transfer-BdToWx 运行条件 具备Python环境,可在命令行中使用Python命令 ...
- 全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
- 全栈项目|小书架|微信小程序-书籍详情功能实现
效果图 实现分析 从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- 多线程系列八:线程安全、Java内存模型(JMM)、底层实现原理
一.线程安全 1. 怎样让多线程下的类安全起来 无状态.加锁.让类不可变.栈封闭.安全的发布对象 2. 死锁 2.1 死锁概念及解决死锁的原则 一定发生在多个线程争夺多个资源里的情况下,发生的原因是 ...
- unity提高----------射线使用【unity3d 怎样获得当前鼠标点击的对象】
unity3d 怎样获得当前鼠标点击的对象 最佳答案 var ray = Camera.main.ScreenPointToRay (Input.mousePosition);var hit : ...
- c# 阿拉伯数字转成中文
调用方法: public string ConvertToChineseNumber(string old) { Chinese ch = new Chinese(); long num = Conv ...
- MySQL查看某库表大小及锁表情况
查询所有数据库占用磁盘空间大小的SQL语句: 语句如下: select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' MB ...
- Bioperl 解析blast的输出结果
用bioperl 解析blast的默认输出结果, 整理成-m8格式的输出 #!/usr/bin/perl use Bio::SearchIO; my ($blast) = @ARGV; my $sea ...
- php中对象(object)与数组(array)之间的相互转换
/** * 数组 转 对象 * * @param array $arr 数组 * @return object */ function array_to_object($arr) { if (gett ...
- Unity3D Shader基础教程
原文地址:http://bbs.9ria.com/thread-212557-1-1.html 此教程将指引你如何建立自己的Shaders,让你的游戏场景看起来更好.Unity配备了强大的阴影和材料的 ...
- android 静默安装 卸载 资料汇总
1. android + eclipse + 后台静默安装(一看就会) 2. 适用于android1.5以下版本apk静默安装 3. error: INSTALL_FAILED_SHARED_USER ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- jsTree 插件
html代码 <div id="jstree1"></div> js代码: <script src="__STATIC__/h5/js/jq ...