微信小程序数据与模板配置
总述: 对应的语法格式与vue的语法格式类似
wxml数据绑定
WXML 模板语法 - 数据绑定。数据绑定的基本原则
- 在 data 中定义数据
- 在 WXML 中使用数据
在 data 中定义页面的数据:在页面对应的 .js 文件中,把数据定义到 data 对象中即可
Mustache 语法的格式(插值表达式)
把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为:
Mustache 语法的应用场景
- 绑定内容
- 绑定属性
- 运算(三元运算、算术运算等)
动态绑定数据
<!-- 数据绑定 -->
<!-- 动态绑定 -->
<view>{{info}}</view>
<text>{{info}}</text>
Page({
/**
* 页面的初始数据
*/
data: {
info:"hello world"
},
........
属性绑定
<!-- 数据绑定 -->
<!-- 动态绑定 -->
<view>{{info}}</view>
<text>{{info}}</text>
<!-- 属性绑定-->
<image src="{{src}}"></image>
data: {
info:"hello world",
src:"/images/8.jpg"
},
数据运算
data: {
info:"hello world",
src:"/images/8.jpg",
randomnum:Math.random() *10 //生成10以内的随机数
},
事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
小程序中常用的事件
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示
bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:
在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:
在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:
事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:
因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:
info 会被解析为参数的名字
数值 2 会被解析为参数的值
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:
之后实现一个案例来完成通过参数的传递来实现count值加2
<!--按钮绑定事件-->
<button type="primary" bindtap="btnTapHander">按钮</button>
<view>{{count}}</view>
<button type="warn" plain="true" bindtap="increase">自增</button>
<button bindtap="increase2" data-info="{{count}}">值加二</button>
increase(e){
this.setData({
count:this.data.count+1
})
},
increase2(e){
this.setData({
count: e.target.dataset.info+2
})
},
btnTapHander(e){
console.log(e);
},
数据同步
bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
通过 bindinput,可以为文本框绑定输入事件:
实现文本框和 data 之间的数据同步
实现步骤:
- 定义数据
- 渲染结构
- 美化样式
- 绑定 input 事件处理函数
类似与vue指令中的双向绑定
<text>{{msg}}</text>
<input bindinput="bind2" value="{{msg}}"></input>
data: {
count:1,
msg:'helloWorld',
},
bind2(e){
this.setData({
msg:e.detail.value
})
},
模板语法
条件渲染
条件渲染类似于vue中的v:if指令
wx:if
在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
也可以用 wx:elif 和 wx:else 来添加 else 判断:
如果要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来,并在 标签上使用 wx:if 控制属性,示例如下:
<!-- w:if测试 -->
<view wx:if="{{condition}}">True</view>
<!-- w:if else测试 -->
<view wx:if="{{type ===1}}">男</view>
<view wx:elif="{{type ===2}}">女</view>
<view wx:else>保密</view>
<block wx:if="true">
<view>view1</view>
<view>view2</view>
<view>view3</view>
</block>
注意: 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
在小程序中,直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏:
列表渲染
列表渲染 wx:for 通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
<!-- w:for指令测试 -->
<view wx:for="{{array}}" wx:for-index='idex' wx:for-item="itemname">
<text>索引是{{idex}}</text>
<text>当前项是{{itemname}}</text>
</view>
data: {
array:['苹果','华为','小米']
},
类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下:
<!-- w:for指令测试 -->
<view wx:for="{{array}}" wx:key="id">
{{item.id}} {{item.name}}
</view>
data: {
array:[
{id:1,name:'小旭'},
{id:2,name:'小明'},
{id:3,name:'小李'}
]
},
WXSS 模板样式
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
XSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
- rpx 尺寸单位
- @import 样式导入
什么是 rpx 尺寸单位?
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
在较小的设备上,1rpx 所代表的宽度较小
在较大的设备上,1rpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
rpx 与 px 之间的单位换算*
在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。则:
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素
样式导入
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
/*common.wxss*/
view{
color: red;
}
/* list.wxss*/
@import "common.wxss";
全局样式和局部样式
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
注意:
当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式.