微信小程序学习二(App、Page)

主要记录学习过程中使用次数较多的内容

官方文档-App

• APP(Object object)

注册小程序，接收一个Object参数。其指定小程序的生命周期回调等。
App()必须在app.js中调用，必须调用且只能调用一次。

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch(Object, object)
小程序初始化完成时触发，全局只触发一次。参数也可以使用wx.getLaunchOptionsSync获取。
参数： 与wx.getLaunchOptionsSync一致

onShow(Object, object)
小程序启动，或从后台进入前台显示时触发。也可以使用wx.onAppShow绑定监听。
参数： 与wx.onAppShow一致

onHide(Object, object)
小程序从前台进入后台时触发。也可以使用wx.onHide绑定监听。

onError(Object, object)
小程序发生脚本错误或API调用报错时触发。也可以使用wx.onError绑定监听。
参数： 与wx.onError一致

onPageNotFound(Object, object)
小程序要打开的页面不存在时触发。也可以调用wx.PageNotFound绑定监听。
参数： 与wx.onPageNotFound一致

onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }

• AppObject.getAPP(Object object)

  获取待小程序全局唯一的App实例。

  注意

• 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。

• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

Page(Object object)

注册小程序中的一个页面。接受一个object的参数，其指定页面的初始化数据、生命周期回调、事件处理函数等。

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

data
data是页面第一次渲染使用的初始数据。
页面加载时，data将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过WXML对数据进行绑定`

< !-- index.wxml -->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

//index.js
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期函数

• onLoad(Object query)
  页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。

• onShow()
  页面显示/切入前台时触发。

• onRead()
  页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
  注意： 对界面内容进行设置的API如wx.setNavigationBarTitle,请在onReady之后进行。

• onHide()
  页面隐藏/切入后台时触发。如wx.navigateTo或底部tab切换到其他页面，小程序切入后台等。

• onUnload()
  页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

页面事件处理函数

• onPullDownRefresh()
  监听用户上拉触底事件

  • 需要在app.json的window选项中或页面配置中开启enablePullDowRefresh。
  • 可以通过wx.startPullDownRefresh触发下拉刷新动画，效果与用户手动下拉刷新一致。

• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

• onReachBottom()
  监听用户上拉触底事件。

  • 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
  • 在 触发距离内滑动期间，本事件只会被触发一次。

• onPageScroll(Object object)
  监听用户滑动页面事件。
  注意： 请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。

• onShareAppMessage(Object object)
  监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }

• onResize(Object object)
  小程序屏幕旋转时触发。

• onTabItemTap(Object object)
  点击tab时触发
  参数：

  • index： 被点击tabItem的序号，从0开始
  • pagePath： 被点击tabItem的页面路径
  • text： 被点击tabItem的按钮文字

组件事件处理函数
page中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行page中定义的时间处理函数。如：

< !-- index.wxml -->
<view bindtap="viewTap"> click me </view>

 // index.js
 Page({
  viewTap: function() {
    console.log('view tap')
  }
})

Page.route
到当前页面的路径，类型为String。

Page({
  onShow: function() {
    console.log(this.route)
  }
})

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

this.setData({
      num: this.data.num
    })

getCurrentPages()

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
注意：

• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。