1.页面数据声明

页面数据定义在当前页面的js文件中，通过配置data属性为当前页面添加数据

页面数据定义 home.js

Page({
  data:{
    msg:"页面数据"
  }
})

2.全局数据

数据绑定只对当前页面有效，如果某些数据要在多个页面共享，就需要写到全局配置对象里面。

全局数据定义在app.js中，通过配置globalData属性添加全局数据，这里定义的数据所有的页面都能访问。

访问方式:获取当前app实例，通过访问实例的globalData属性就能访问全局变量。

注意：如果想将全局数据绑定到页面标签中，则先要将全局数据在页面的data中进行声明，才能使用

全局数据定义

//app.js
App({
  globalData:{
    globalTitle:"我是全局标题"
  }
})

页面获取全局数据

//home.js

//获取当前实例
const app = getApp()

Page({
  data:{
    msg:"页面数据",
    globalTitle:app.globalData.globalTitle
  }
})

3.数据绑定

微信小程序的数据绑定使用双花括号语法 {{}} ，可以为标签绑定数据，还可以为标签的属性绑定数据，类似于ES6的${}，渲染标签时，会将{{}}内的数据或者表达式替换成相应的数据

绑定标签内容和属性值

<view id="item-{{id}}"> {{ message }} </view>

表达式

<view> {{ 1+5 }} </view>

布尔值

<view wx:if="{{false}}">双括号,当前标签不被渲染</view>
<view wx:if="false">没括号，false当初字符串处理，即true</view>

4.列表渲染

类似于vue中的v-for指令，微信小程序也可以通过遍历某个数组来循环创建标签

语法：wx:for="{{list}}",在循环体内，当前数组成员的位置序号（从0开始）绑定变量index，成员的值绑定变量item。
需要为每个循环项添加一个wx:key属性，作为它的唯一的标识符。值是字符串，（当item 本身是一个唯一的字符串或者数字时，可以使用*this来代替当前item）

<view wx:for="{{list}}" wx:key="*this">
  {{index}}、 {{item}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名

使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{list}}" wx:key="*this" wx:for-index="i" wx:for-item="val">
  {{i}}、 {{val}}
</view>

block标签：类似于vue的template标签，他不会渲染成真实的标签

<block wx:for="{{list}}" wx:key="*this">
  <text>{{index}}</text> - <text>{{item}}</text>
</block>

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

相当于

<view wx:for="{{[\'a\',\'r\',\'r\',\'a\',\'y\']}}">
  {{item}}
</view>

5.条件渲染

通过wx:if为某个标签绑定一个布尔值，根据这个值为true/false来决定是否渲染此标签

<view wx:if="{{num>6}}">大于6</view>
<view wx:elif="{{num>3}}">大于3</view>
<view wx:else>不大于3</view>

渲染结果

<view>不大于3</view>

还可以为其包裹一个block标签，将多个元素包括到其中，但是block标签本身不会被渲染成真实的标签

hidden属性：所有的小程序标签都支持hidden属性，他类似于v-show指令，通过判断值是true还是false还确认元素是显示还是隐藏，操作的是display属性

data:{
    flag:true
  }

<view hidden="{{flag}}">hidden属性</view>

渲染结果：

view[hidden] {
    display: none;
}

6.事件

(1)小程序的常见事件：

tap：触摸后马上离开。
longpress：触摸后，超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件，tap事件将不被触发。
touchstart：触摸开始。
touchmove：触摸后移动。
touchcancel：触摸动作被打断，如来电提醒，弹窗等。
touchend：触摸结束。

(2)事件绑定
bind：冒泡阶段触发。
catch：冒泡阶段触发，并取消事件进一步向上冒泡。
capture-bind：捕获阶段触发。
capture-catch：捕获阶段触发，并中断事件，不再向下传播，即中断捕获阶段，并取消随后的冒泡阶段。

(3)事件函数注册
事件触发时的回调函数直接在Pages()的配置项中进行声明，回调函数的参数就是事件对象

与vue不同的是，在函数中访问data中的数据时，不能跳过data属性

//获取当前实例
const app = getApp()

Page({
  data:{
    msg:"页面数据",
    globalTitle:app.globalData.globalTitle
  },
  test(event){
    console.log(this.data.msg)
    console.log(\'点击了\')
  }
})

(4)简单的实例：

<button bind:tap="test">点我</button>
<button bindtap="test">简写成bindtap</button>

点击任何一个按钮，控制台都会打印 \'点击了\'

(5)事件对象
currentTarget：事件绑定的当前组件。同H5的自定义属性一样，可以通过dataset访问该标签的自定义属性
target：触发事件的源组件，同H5的自定义属性一样，可以通过dataset访问标签的自定义属性
type：事件类型
touches/changedTouches：触点信息，包含坐标等信息
detail：自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

7.数据更新

要修改页面数据的值，使用this.setData()方法。第一个参数为对象，表示要修改的键值对，第二个数据是成功的回调（这个回调是异步的）,这个回调的this指向当前页面
修改全局数据的值，直接赋值即可。但是绑定了全局数据的页面，相关数据要重新取值，不然新的值不会同步过去

  test(event){
    //修改当前页面的数据
    this.setData({
      msg:"已被修改"
    },function(){
      console.log(\'msg修改成功\')
      console.log(this.data.msg)
    })
    //修改全局数据
    app.globalData.globalTitle = "全局数据已被修改"
    console.log(app.globalData.globalTitle)
  }

执行结果：

上面的例子全局数据更新没有同步至页面中，需要手动更新，代码如下：

test(event){
    //修改全局数据
    app.globalData.globalTitle = "全局数据已被修改"
    console.log(app.globalData.globalTitle)
    //修改当前页面的数据,并重新获取全局数据
    this.setData({
      msg:"已被修改",
      globalTitle:app.globalData.globalTitle
    },function(){
      console.log(\'msg修改成功\')
    })
  }