小程序学习二：小程序开发语法基础

一、数据绑定

和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