微信小程序:其中wxml和wxss的样式说明
微信小程序:其中wxml和wxss的样式说明
一、简介
对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。
二、wxml
界面结构wxmL比较容易理解,主要是由八大类基础组件构成:
关于这八大类的属性和具体用法可参考以下参考文献链接:
http://www.w3cschool.cn/weixinapp/itz51q8o.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
三、wxss
wxml理解起来容易,但光搭好了框架,并不能达到我们想要的界面效果,这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示,并在css的基础上做了一些功能扩展,主要包括:
1.尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下:
2.样式导入
可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。
例如:
/** other.wxss **/ .appText{ margin:10px; } /** app.wxss **/ @import “other.wxss“; .content_text:{ margin:15px; }
app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。
对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:
wxss样式属性
(1)wxss display(显示)
flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml
(2)wxss position(定位)
(3)wxss float(浮动)
(4)wxss backgrounp(背景)
(5)wxss border(边框)
(6)wxss outline(轮廓)
(7)wxss text(文件属性)
(8)wxss font(字体属性)
(9)wxss margin(外边距)
(10)wxss padding(填充)
(11)wxss 选择器
有一些属性值太多且实际应用的比较少 可以参考w3cschool的css文档:
http://www.w3cschool.cn/css/css-tutorial.html
对于微信小程序的文档手册可参考以下链接:
http://www.w3cschool.cn/weixinapp/9wou1q8j.html
微信小程序:其中wxml和wxss的样式说明的更多相关文章
- 微信小程序:WXML 模板
微信小程序:WXML 模板 一.WXML 模板 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来 ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 实现微信小程序的wxml文件和wxss文件在phpstrom的支持
最近下载了微信小程序准备好好看看,但是发现微信小程序用的后缀名是不一样的,.wxml代表的就是平时用的.html,.wxss代码的就是平时用的.css.但是phpstorm无法识别,为了更方便的码代码 ...
- 小北微信小程序之小白教程系列之 -- 样式(WXSS)
为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性.同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改.与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入. ...
- 小程序02 wxml和wxss
微信小程序的排版就跟wxml和wxss有关,它们两者相当于HTML和CSS,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式. 一.wxml 界面结构wxmL比较容易理解, ...
- 微信小程序 text属性设置 WXSS样式
>微信小程序的布局css样式 参考自 珺L 文字 width: fit-content;font-size:20px; /*设置文字字号*/color:red; ...
- 微信小程序——动态修改页面数据(和样式)及参数传递
1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...
- 微信小程序之使用weui.wxss(八)
[未经作者本人同意,请勿以任何形式转载] 什么是WeUI? WeUI是在遵守微信视觉设计规范下,由官方设计团队为小程序量身定制的基础样式库. 这里把WeUI放到基础篇里,是因为WeUI是官方出品,并且 ...
- 微信小程序radio组件 - 如何改变默认样式大小?
今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...
随机推荐
- django数据库读写分离,分库
读写分离 在settings中配置不同名称的数据库连接参数,并配置一条数据库选择路由 DATABASES = { 'default': { 'ENGINE': 'django.db.backends. ...
- Django Admin后台管理模块的使用
Admin后台管理模块的使用 Django的管理员模块是Django的标准库django.contrib的一部分.这个包还包括其它一些实用的模块: django.contrib.auth django ...
- Lisp语言简介
摘自维基百科,原链接为:http://zh.wikipedia.org/zh/LISP 因为Clojure是Lisp的一种的方言,所以我们可以先来了解一下Lisp这个比较小众的编程到底是什么~ --- ...
- 【BZOJ2055】80人环游世界 有上下界费用流
[BZOJ2055]80人环游世界 Description 想必大家都看过成龙大哥的<80天环游世界>,里面的紧张刺激的打斗场面一定给你留下了深刻的印象.现在就有这么 一个 ...
- pc端和移动端的区别
以下都是自己的个人理解,说错了希望大家多交流交流.1,普通pc端开发与移动端开发区别.普通pc端开发,我理解就是你拿电脑打开的网页都算[这相信大部分人都知道].那么移动端开发工程师,说白了就很好理解了 ...
- PAT 1016 Phone Bills(模拟)
1016. Phone Bills (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A long-di ...
- Java基础系列(八)序列化与反序列化
先来看两个例子 示例一:将对象保存成字节数组,再把对象的字节数组还原为对象 示例中用到的Bean package com.huawei.beans; import java.io.Serializab ...
- Idea之Tomcat
安装配置 启动 三种方式,run,debug,coverage 面板说明 上面一排 Debugger:debug模式的时候显示方法,调用关系,参数值等, Server:打印日志 ...
- runtime(二)
前言 上一篇中我们大致的了解了runtime的一些基本概念,这一篇我们一起来看看如何使用它. 3.如何使用runtime. 3.1 方法交换 举一个老生常谈的例子.当你接手一个新的项目,需要查看这个程 ...
- <2014 03 18> Term BreakPoint