微信小程序视图层介绍及用法
一. 视图层
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
1.1. 数据绑定
1.1.1. 普通写法
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
1.1.2. 组件属性
简直和上面没区别啊
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
1.1.3. bool类型
不要直接写 checked="false",其计算结果是一个字符串
<checkbox checked="{{false}}"> </checkbox>
1.2. 运算
1.2.1. 三元运算
hidden 隐藏属性,true为隐藏标签
<view hidden="{{flag ? true : false}}"> Hidden </view>
1.2.2. 算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
1.2.3. if 逻辑判断
如果length大于5,标签显示,否则不显示
<view wx:if="{{length > 5}}"> </view>
1.2.4. 字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
1.2.5. 注意
花括号和引号之间如果有空格,将最终被解析成为字符串
1.3. 列表渲染(数组渲染)
1.3.1. wx:for
项的变量名默认为 item
wx:for-item
可以指定数组当前元素的变量名
下标变量名默认为 index
wx:for-index
可以指定数组当前下标的变量名
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
1.3.2. wx:for
渲染一个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
1.3.3. wx:key
一般for循环都会添加wx:key属性,提高效率使用的
<view wx:for="{{array}}" wx:key="index">
{{index}}:{{item.message}}
</view>
1.4. 条件渲染
1.4.1. wx:if
在框架中,使用 wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
1.4.2. hidden
<view hidden="{{condition}}"> True </view>
类似 wx:if
频繁切换 用 hidden
不常使用 用 wx:if
二、 WXSS样式文件
2. WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
与 CSS 相比,WXSS 扩展的特性有:
尺寸单位
样式导入
2.1. 尺寸单位
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
2.2. 样式导入
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
示例代码:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
2.3. 内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上
.
,样式类名之间用空格分隔。
<view class="normal_view" />
2.4. 选择器
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro |
选择所有拥有 class="intro" 的组件 |
#id | #firstname |
选择拥有 id="firstname" 的组件 |
element | view |
选择所有 view 组件 |
element, element | view, checkbox |
选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after |
在 view 组件后边插入内容 |
::before | view::before |
在 view 组件前边插入内容 |
2.5. 全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
微信小程序视图层介绍及用法的更多相关文章
- 微信小程序 - 视图层 | 基础语法
视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- 微信小程序-05-详解介绍.js 逻辑层文件
上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...
- 微信小程序-04-详解介绍.json 配置文件
致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持 ...
- 微信小程序管理后台介绍
微信小程序的管理后台,每次进入都需要扫码,还是特别不爽,现在微信小程序还没正式发布,很多人都还没看到管理后台,这里抢先发布出来 ------------------------------------ ...
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
- 微信小程序遮罩层覆盖input失效
问题:微信小程序中,我们常使用遮罩层,如点击按钮弹出下拉框.弹框等等.若在遮罩层下存在input.textarea.canvas.camera.map.video等标签时,会出现遮罩层覆盖失效的问题. ...
- 微信小程序音频播放 InnerAudioContext 的用法
今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该 ...
- 微信小程序 逻辑层
1. 注册程序小程序APP在小程序的根目录下有一个app.js文件.有App(Object),App() 函数用来注册一个小程序.接受一个 Object 参数,其内便是小程序的生命周期.App() 必 ...
随机推荐
- odoo12 修行基础篇之 添加明细字段 (二)
前一篇介绍了如何在视图和表单中添加字段.本节内容,我们讨论下如何在明细中加字段. 我想在销售页面明细中增加税额字段,这在表sale.order.line中已经存在,在此仅用来演示. odoo的明细一般 ...
- github上传文件让别人下载--xdd
一.可以下载的条件 仓库要为公开(public) 该文件不可预览或者是图片,如.rar .gif .png .doc .pdf 等格式 二.打开文件的预览界面,如下 三.将最上面的地址复制给别人即可 ...
- 【python测试开发栈】—python内存管理机制(二)—垃圾回收
在上一篇文章中(python 内存管理机制-引用计数)中,我们介绍了python内存管理机制中的引用计数,python正是通过它来有效的管理内存.今天来介绍python的垃圾回收,其主要策略是引用计数 ...
- 4sql
在 MySQL 中,有三种主要的类型:文本.数字和日期/时间类型. Text 类型:CHAR(size)VARCHAR(size)TINYTEXTTEXT 存放最大长度为 65,535 个字符的字符串 ...
- 单像空间后方交会(python实现)
原理:空间后方交会是以单幅影像为基础,从该影像所覆盖地面范围内若干控制点的已知地面坐标和相应点的像坐标量测值出发,根据共线条件方程,解求该影像在航空摄影时刻的外方位元素Xs,Ys,Zs,φ,ω,κ. ...
- 单核苷酸多态性SNP(single nucleotide polymorphism)
定义 主要指基因组水平上由单个核苷酸的变异所引起的 DNA 序列多态性. 在基因组水平上由单个核苷酸的变异所引起的DNA序列多态性.即:在不同个体的同一条染色体或同一位点的核苷酸序列中,绝大多数核苷酸 ...
- python_网络编程
网络ISO(国际标准化组织)--->网络体系结构标准(OSI模型)OSI: 网络信息传输比较复杂需要很多功能协同-->将功能分开,降低耦合度,让每个模块完成一定的功能-->将这些模块 ...
- 用launchscreen.storyboard适配启动图方法(二)
背景 之前有写一篇实现方式比较简单的随笔用launchscreen.storyboard适配启动图方法,顺便在评论区提了一下用autolayout适配启动图的思路,现把思路和流程记录下来. 思路 整体 ...
- 了解BootLoader——基于MPC5744P Bootloader例程
一.BootLoader的作用:BootLoader是固化在PFlash中的一个程序,其作用可以分为两部分:boot和load. (1)boot:MCU上电时首先会运行BootLoader程序(因为它 ...
- linux下docker安装部署项目(全)
一 .系统安装 基于CentOS-7-x86_64-Minimal-1708.iso安装系统 1.2. 配置系统 1.2.1 在线更新内核版本(建议更新,旧版内核会有docker BUG) 1.2 ...