小程序入门-2

响应的数据绑定

小程序框架的核心是一个响应的数据绑定系统。整个小程序框架系统分为两部分：视图层和逻辑层。框架可以让数据与视图非常简单地保持同步。当数据修改的时候，只需要在逻辑层修改数据，视图层就会做响应的更新。

<view> hello {{name}}</view>
<button bindtap="changeName">click me </button>

const helloData={
    name:'Wechat'
}
Page({
data:helloData,
changeName(e){
    this.setData({
    name:'echo'})
}
})

注册小程序

App()函数注册小程序。接受object参数，指定小程序的生命周期回调。App()只能在app.js中调用，必须调用且只能调用一次。Object参数说明：onLaunch(监听小程序初始化)、onShow（监听小程序显示）、onHide(监听小程序隐藏)、onError(错误监听函数)、onPageNotFound（页面不存在监听函数）,例如：

App({
onPageNotFound(res){
    wx.rediretTo({
    url:'pages/...'
    })
}
})

getApp()函数可以用来获取到小程序App实例。

const appInstance = getApp();
console.log(appInstance.globalData)

不要在定义于App()内的函数中调用getApp()，使用this就可以拿到app实例。通过getApp()获取实例之后，不要私自调用生命周期函数。

注册页面

page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、事件处理函数等。例如：

// index.js
Page({
  data: {
    text: 'This is page data.'
  },
  onLoad(options) {
    // Do some initialize when page load.
  },
  onReady() {
    // Do something when page ready.
  },
  onShow() {
    // Do something when page show.
  },
  onHide() {
    // Do something when page hide.
  },
  onUnload() {
    // Do something when page close.
  },
  onPullDownRefresh() {
    // Do something when pull down.
  },
  onReachBottom() {
    // Do something when page reach bottom.
  },
  onShareAppMessage() {
    // return custom share data when user share.
  },
  onPageScroll() {
    // Do something when page scroll
  },
  onResize() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function () {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

1. data是页面第一渲染使用的初始数据。页面加载时，data将会以json字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成json的类型：字符串、数字、布尔值、对象、数组。渲染层通过wxml对数据进行绑定。
2. 生命周期回调函数

• onLoad() 页面加载的时候触发，一个页面只能加载一次，可以在参数中获取当前页路径的参数。
• onShow() 页面显示时触发。
• onReady()页面初次渲染时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。wx.setNavigationBarTitle要在onReady之后使用。
• onHide() 页面切入后台时触发。如navigateTo或tab切换到其他页面，小程序切入后台。