API、数据和事件的绑定 学习笔记

一、小程序API的概念

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

二、小程序API的三大分类

三、数据绑定

1、数据的渲染

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   //字符串类型的数据
   info: 'Hello World',
   imgSrc:  'http://www.itheima.com/images/logo.png',
   randomNum1: Math.random()*10,
   randomNum2: Math.random().toFixed(2)
  },
  /**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options){

 },
/**
 * 生命周期函数--监听页面初次渲染完成
*/ 
})

2、数据的绑定

<!--index.wxml-->
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>{{randomNum1 >=5 ? '数字大于或等于5' : '数字小于5'}}</view>
<view>{{randomNum2 * 100}}</view>

四、事件的绑定

1、小程序中常用的事件

2、事件对象的属性列表

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

3、target和currentTarget的区别

4、bindtap的语法格式

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

a.通过bindtap，可以为组件绑定tap触摸事件，语法如下：

<!--事件绑定-->
<button type="primary" bindtap="btnTapHandler">按钮</button>

b.在页面的.js文件中定义事件处理函数，事件参数通过形参event(一般简写成e)来接收：

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   //字符串类型的数据
   info: 'Hello World',
   imgSrc:  'http://www.itheima.com/images/logo.png',
   randomNum1: Math.random()*10,
   randomNum2: Math.random().toFixed(2)
  },
  //定义按钮的事件处理函数
  btnTapHandler(e) {
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options){

 },
/**
 * 生命周期函数--监听页面初次渲染完成
*/ 
})

点一下按钮，调试器打印的结果如下图所示：

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

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

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   //字符串类型的数据
   info: 'Hello World',
   imgSrc:  'http://www.itheima.com/images/logo.png',
   randomNum1: Math.random()*10,
   randomNum2: Math.random().toFixed(2),
   count:0
  },
  //定义按钮的事件处理函数
  btnTapHandler(e) {
    console.log(e)
  },
  //+1 按钮的点击事件处理函数
  CountChange() {
    this.setData({
      count: this.data.count+1
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options){

 },
/**
 * 生命周期函数--监听页面初次渲染完成
*/ 
})

index.wxml

<!--事件绑定-->
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="CountChange">+1</button>

6、事件传参

<!--事件绑定-->
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
     count:0
  },
btnTap2(e){
    this.setData({
      count: this.data.count+e.target.dataset.info
    })
  },
})

7、bindinput的语法格式

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

定义数据

Page({
  data: {
   msg:'你好,'
  }
})

渲染结构   index.wxml

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

美化样式

绑定input事件处理函数

运行结果：在文本框输入什么，调试器的APPData就打印什么