1. 数据绑定
1.1 普通写法
// WXML中
<view> {{ message}} </view>
// js中
Page({
data: {
message: 'Hello word!'
}
})
花括号和引号之间如果有空格,将最终被解析成为字符串
1.2 组件属性
// WXML中
<view id="item-{{index}}"> </view>
// js中
Page({
data: {
index: 0
}
})
1.3 boolean类型
<checkbox checked="{{false}}"> </checkbox>
直接写 checked= false ,其计算结果是⼀个字符串
2. 运算
2.1 三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
2.2 算数运算
// wxml文件中
<view> {{a + b}} + {{c}} </view>
// js文件中
Page({
data: {
a: 2,
b: 5,
c: 1
}
})
2.3 逻辑判断
<view wx:if="{{length > 8}}"></view>
2.4 字符串运算
// wxml文件中
<view>{{"张" + name}}</view>
// js文件中
Page({
data:{
name: '三'
}
})
3. 列表渲染
3.1 wx:for
循环项的变量名默认为 item
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择
// 1. string 类型,表⽰ 循环项中的唯⼀属性 如
list:[{id:0, name:"张三"},{id:1, name:"李四"}]
wx:key="id"
// 2. 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5,6,7,8]
wx:key="*this"
3.1.1 完整的循环代码
// wxml文件中的内容
<view wx:for="{{array}}" wx:for-item="data" wx:key="id">
{{index}}: {{data.message}}
</view>
// js文件内容
Page({
data: {
array: [{
id:0,
message: 'zhangsan',
}, {
id:1,
message: 'lisi'
}]
}
})
3.2 block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[4, 8, 12]}}" wx:key="*this" >
<view> {{item}}: -- </view>
<view> {{index}} </view>
</block>
4. 条件渲染
4.1 wx:if
使⽤ wx:if="{{ 条件 }}" 根据条件来判断是否需要渲染该代码块
有 wx:if / wx:elif / wx:else 写法
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
4.2 hidden
<view hidden="{{flag}}"> True </view> // flag为true则隐藏,否则展示
频繁切换 ⽤ hidden, 不常使⽤ ⽤ wx:if
5. 事件的绑定
⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等 不同的组件⽀持不同的事件。
// wxml文件中,给input绑定了输入事件
<input bindinput="handleInput" />
// js文件中
Page({
// 绑定input事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})
5.1 事件传递参数
由于绑定事件时不能带括号, 以下为错误写法
<input bindinput="handleInput(200)" />
事件需要传递参数时,我们可以通过给标签⾃定义属性的⽅式 和 value来给方法传递参数
<input bindinput="handleInput" data-item="200" />
事件触发时获取数据
handleInput: function(e) {
// {item:200}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
}
6. 样式 WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。 与 CSS 相⽐,WXSS 扩展的特性有:
- 响应式⻓度单位
- rpx 样式导⼊
6.1 尺⼨单位
rpx (responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有750个物理像素
则 750rpx = 375px = 750物理像 750rpx = 375px = 750物理像素 , 1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 。
使⽤步骤:
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
- 在less⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。
6.2 样式导⼊
wxss中直接就⽀持,样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径
示例代码
/** common.wxss **/
.small {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle {
padding:15px;
}
6.3 选择器
⼩程序 不⽀持通配符 * 因此以下代码⽆效!
⽬前⽀持的选择器有: