微信小程序学习笔记（3)

摘要：本篇主要讲WXML模板语法渲染页面结构

一、数据绑定的基本原则

①在data中定义数据

②在WXML使用数据

二、在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中

Page({
  data:{
    //字符串类型的数据
    info:'init data',
    //数组类型的数据
    msgList:[{msg:'hello'},{msg:'world'}]
  }
})

三、Mustache语法

1、绑定内容

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来

<view>{{要绑定的数据名称}}</view>

2、绑定属性

Page({
data:{
imgSrc:"/images/1.png"}
})

<image src="{{imgSrc}}"></image>

3、运算

三元运算、算术运算等

randomNum:Math.random()*10
<view>{{randomNumber>=5?'随机数字大于或等于5':'随机数字小于5'}}</view>

randomNum:Math.random().toFixed(2)//生成一个带两位小数的随机数
<view>生成100以内的随机数:{{randomNum*100}}</view>

四、事件渲染

小程序框架 / 视图层 / 事件系统 / 介绍 (qq.com)

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

渲染层(Webview)—①描述交互事件②用户交互触发事件—>微信客户端（Native)—③逻辑层收到回调—>逻辑层（JsCore)

类型	绑定方式	事件描述
tap	bindtap或bind:tap	手指触摸后马上离开，类似于HTML中的click事件
input	bindinput或bind:input	文本框的输入事件
change	bindchange或bind:change	状态改变时触发

1、事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event,它的详细属性如下表所示：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

2、target和currentTarget的区别

<view class=“outer-view”bindtap=“outerHandler”>
<button type="primary">按钮</button>
</view>

点击内部按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数

此时，对外层view来说，e.target指向触发事件的源头组件，因此，e.target是内部的按钮组件

e.currentTarget指向当前正在触发事件的那个组件，e.currentTarget是当前的view组件

3、bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

①通过bindtap，可以为组件绑定tap触摸事件

<button type="primary"bindtap="btnTapHandler">按钮</button>

②js.中定义对应的事件处理函数，事件参数通过形参event(一般写成e)来接收：

Page({
  btnTapHandler(e){//按钮tap事件处理函数
    console.log(e)//事件参数对象e
  }
})

4、在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值

<button type="primary"bindtap="CountChange">+1</button>

Page({
  data:{count:0},
  vtnTapHandler(e){//按钮tap事件处理函数
    console.log(e)//事件参数对象e
  },
  CountChange(){
    this.setData({
      count:this.data.count+1
    })
  }
})

5、事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

在事件处理函数中，通过event.target.dataset.参数名即可获得具体参数的值

btnHandler(event){
    //dataset是一个对象，包括了所有通过data-*传递过来的参数项
    console.log(event.target.dataset)
    //通过dataser可以访问到具体参数的值
    console.log(event.target.dataser.info)

<button type="primary"bindtap="btnTap2"data-info="{{2}}">+2</button>

btnTap2(e){//按钮tap事件处理函数
    console.log(e)//事件参数对象e
  },

btnTap2(e){//按钮tap事件处理函数
    this.setData({count:this.data.count+e.target.dataset.info})
  },

6、bindinput的语法格式

通过input事件来响应文本框的输入事件

①通过bindinput可以为文本框绑定输入事件

<input bindinput="inputHandler"></input>

②在页面.js文件中定义事件处理函数

inputHandler(e){
    //e.detail.value是变化过后，文本库最新的值
    console.log(e.detail.value)
  }

7、实现文本框和data之间的数据同步

①定义数据

②渲染结构

<input value="{{msg}}"bindinput="iptHandler"></input>

③美化样式

input{
  border:1px solid #eee;
  padding:5px;
  margin:5px;
  border-radius:3px;
}

④绑定input事件处理函数

data:{msg:'你好，'},
  //文本框内容改变事件
  iptHandler(e){
    this.setData({
      //通过e.detail.value获取到文本框最新的值
      msg:e.detail.value
    })
  }