小程序开发语法基础
一、数据绑定
和vue用法类似
1.在jsdata里定义数据
Page({
data:{
info:你好'
}
})
2.在wxml里使用数据
Mustache语法,也可以叫插值表达式
<view>{{info}}</view>
二、动态绑定属性
和vue有所不同
vue是
<img :src="src">
小程序是
<image src={{src}}"></image>
没有v-bind,而且变量要使用插值表达式
三、调试
APPData可以查看js里data的数据。
四、事件
事件是渲染成到逻辑层的通讯方式,通过事件可以让渲染层产生的行为,反馈到逻辑层进行业务处理。
1.常用事件
事件类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap或bind:tap | 手指触摸后马上离开,类似于html的click事件 |
input | bindinput或bind:input | 文本框的输入事件 |
change | bindchange或bind:change | 状态改变时触发 |
2.事件对象
事件对象的属性:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性的集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组,几个手指 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 ,手指的变化 |
3.bindtap事件绑定语法
<button type='primary' bindtap='demo'>按钮</button>
//demo就是bindTap事件,即触摸事件绑定的函数
Page({
demo(e){
console.log(e)
}
})
4.事件获取data里的数据
Page({
data:{
count :0
},
demo(e){
//获取数据,也能通过这种方式修改值
//但这不会重新刷新页面的值,所以需要setData方法修改,这样才能同时刷新页面的值
console.log(this.data.count)
this.data.count = this.data.count + 1
}
})
5.事件动态修改data里的数据
需要使用this.setData()方法,这种修改能修改逻辑层和渲染层,
而this.data只会修改逻辑层,虽然数据变了,但不会修改页面的值。
this.setData()是将数据从逻辑层发到渲染层,是异步的。
Page({
data:{
count :0
},
demo(e){
this.setData({
//给哪个值修改就写那个值
//e.detail.value是输入框里的值
count:this.data.count + 1
})
}
})
6.事件传参
不能和vue一样,在绑定事件的同时把参数传过去。
<button type='primary' bindtap='demo(10)'>按钮</button>
不能这么做,这相当于调用了一个demo(10)名字的函数。而是demo函数,传递参数。
要写成
<button type='primary' bindtap='demo' data-params="{{2}}">按钮</button>
//直接写2表示是字符串,写{{2}}表示是数字
data-*的形式,*代表参数的名字。
然后事件要拿取这个参数的值
Page({
data:{
count :0
},
demo(e){
e.target.dataset
//dataset是一个对象,包含了所有通过data-*形式传递过来的参数
e.target.dataset.params
//这种形式可以得到具体传过来的值,根据上面的按钮,可以知道params的值是2
})
}
})
7.bindinput的语法格式
在小程序种,bindinput事件是来响应文本框的输入事件
<input bindinput="inpuHandler"></input>
Page({
inpuHandler(e){
console.log( e.detail.value)
// e.detail.value文本框最新输入的值
}
})
8.文本框和data直接的数据同步
<input bindinput="inpuHandler" value="{{msg}}"></input>
Page({
data:{
msg:"请输入"
},
inpuHandler(e){
console.log( e.detail.value)
this.setData({
msg: e.detail.values
})
// e.detail.value文本框最新输入的值
}
})
9.target和currentTarget的区别
target是触发该事件的源头,而currentTarget则是当前事件所绑定的组件。
<view bindtap="fn">
<button type='primary'> 按钮</button>
</view>
点击了按钮时,点击事件会以冒泡的形式向外扩散,也会触发外层view的tap事件处理函数。
而对于view来说,e.target指向的是触发事件的源头,即按钮
而currentTarget则是view自己,因为是它绑定的事件。
五、小程序语句
1.if语句
<view wx:if="{{cond == 1}}"></view>
<view wx:elif="{{cond2}}"></view>
<view wx:else></view>
根据绑定的值为rue来确定是否渲染这个组件。
2.结合block标签使用if
一次性控制多个组件的展示和隐藏, 可以使用标签将多个组件包裹起来,并在block标签上使用wx:if来控制
<block wx:if="{{bool}}">
<view></view>
<view></view>
</block>
block不会渲染成任何组件,只是起包裹作用。
不用view包裹,是因为最外层的view也会渲染出来,能在元素里找到。
3.hidden属性
也能进行元素的隐藏和显示
<view hidden="{{boolea}}"> </view>
值为true为隐藏,false就显示和if相反。
4.if和hidden的区别
if是动态创建和移除元素
hidden是切换样式的display:none/block来显示和隐藏元素的。
频繁切换用hidden
较少切换用wx:if
5.wx:for循环语句
<view wx:for="{{arr}}" wx:key="id" wx:for-index="id" wx:for-item="item">
索引是:{{item.id}},当前项是{{item.name}}
</view>
Page({
data:{
arr:[{
id:1,
name:12
},
{
id:2,
name:13
}
]
},
})
绑定key直接写数字元素的唯一属性即可,不要加上{{}},绑定之后可以提高渲染效率。
wx:for-index可以为索引重新绑定指定的变量,不写默认index变量表示所有,用也只能用index
wx:for-item可以为默认的item绑定指定的变量,不重新指定,默认是item是数组元素。用只能用item