数据、事件、通信

数据

页面的数据来自.js文件。这些数据在wxml中使用双花括号引用。

// index.js
Page({
  data:{
    name: 'page',
    imgUrl: '../../public/123.jpg'
  }
})

// wxml里
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    {{ name }}
    <image src="{{imgUrl}}" mode="widthFix"/>
  </view>
</scroll-view>

事件

• tap, bindtap或bind:tap, 手指触摸后马上离开
• input, bindinput或bind:input, 文本框的输入事件
• change, bindchange或bind:change, 状态改变时触发

事件回调

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

target是事件源头，currentTarget是事件触发的最外层。例如外层B和内层A，A上面有事件触发，会冒泡到外层B。此时A是事件源，即target;B是currentTarget。

如果层数更多，则currentTarget也可能会更靠向外层

事件与data是同级声明的。如下所示：

Page({
  data:{
    name: 'page',
    imgUrl: '../../public/123.jpg'
  },
  btnTaped(e){
    this.setData({
      name: 'taped'
    })
  }
})

// wxml里
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    {{ name }}
    <button type="primary" bind:tap="btnTaped">点击改变</button>
  </view>
</scroll-view>

事件传参

Page({
  data:{
    name: 'page',
    imgUrl: '../../public/123.jpg'
  },
  btnTaped(e){
    console.log(e)
    this.setData({
      // e.target.dataset里有参数.这里info是wxml里的关键词
      name: e.target.dataset.info
    })
  }
})

// wxml里
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    {{ name }}
    {/* 下面data\-\*，其中\*可以为任意值。在\.js文件中也是以它为关键词 */}
    <button type="primary" bind:tap="btnTaped" data-info="{{ 'change' }}">点击改变</button>
  </view>
</scroll-view>

数据请求

只能请求https类型接口; 必须将接口域名添加到信任列表

wx.request({
  url: 'url',
  method: 'GET',
  data: {
    key: value
  },
  success: (res) => {
    console.log(res)
  }
})