小程序学习(四)之逻辑层(主要说的是对应的js文件)

小程序学习(四)之逻辑层(主要说的是对应的js文件)

本节知识点:

• 注册小程序

• 场景值

• 注册页面

• 路由

• 模块化

• API

---

App()

App()函数用来注册一个小程序，接受一个object参数，其指定小程序的生命周期函数等。

object参数说明:

• onLaunch

  类型是function 作用监听小程序初始化，触发时机就是当小程序初始化加载，会触发onLaunch(全局只触发一次)

• onReady

  类型function 作用监听小程序加载。触发时机当小程序初次渲染完成。

• onShow

类型是Function 作用是监听小程序显示。触发时机当小程序启动后，或者从后台进入前台显示，会触发onShow

• onHide

类型是Function 作用是监听小程序隐藏，触发时机当小程序从前台进入后台时候，会触发onHide

• OnError

类型function 作用错误监听函数 , 当小程序发生脚本错误，或者api调用失败。会触发onError并带上错误信息

• 其他

类型Any 开发者可以添加任意的函数或者数据到object参数中，用this可以访问

前台，后台定义。当用户点击左上角关闭，或者来电话的时候，小程序并没有直接销毁，而是进入了后台。当再次进入小程序就又会从后台进入前台。
特别注意：只有当小程序进入后台一定的时间，或者系统资源占用过高，才会被真正的销毁。

getApp()

我们提供了全局的getApp()函数，可以获取到小程序实例

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

特别注意:App()必须在app.js中注册，且不能是多个
不要在定义于App()内的函数调用getApp()使用this 就可以拿到app实例
不要在onlauch的时候调用getCurrentPages(),此时page还没有生成
通过getApp() 获取到实例后，不要私自调用或者启用生命周期函数

Page

Page()函数用来注册一个页面，接受一个object参数，其指定的页面的初始数据，生命周期函数，事件处理函数等等

Object参数说明:

• data 类型object 作用页面的初始数据

• onLoad 类型Function 作用监听页面加载(只执行一次)

• onReady 类型Function 作用监听页面初次渲染完成

• onShow 类型Function 作用监听页面显示

• onHide 类型Function 作用监听页面隐藏

• onUnload 类型Function 作用监听页面卸载

• onPullDownRefresh 类型Function 作用监听用户下拉动作

• onReachBottom 类型Function 作用页面上拉触底事件的处理函数

• onShareAppMessage 类型Function 作用用户点击右上角转发

• onPageScroll 类型Function 作用页面滚动触发事件的处理函数

• 其他 类型 Any 作用开发者可以添加任意的函数或者数据到object参数中。在页面的函数中用this可以访问

示例代码:

//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
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化数据

初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传输到渲染层。所以数据必须是可以转成JSON格式的。字符串，数字，布尔值，对象，数组

{{text}}
{{array[0].msg}}

对应的在JS里面的data数据应该写成

Page({
 data:{
  text:"今天",
  array:[{msg:'1'},{msg:'2'}]
 }
})

生命周期函数

• onLoad :页面加载

  一个页面只会调用一次，可以在onLoad中获取打开当前页面所调用的query参数

• onShow:页面显示

  每次打开页面都会调用一次

• onReady: 页面初次渲染完成

  一个页面只会调用一次，代码页面已经准备妥当，可以和视图层交互
  对界面的设置如:wx.setNavigationBarTitle请在onReady之后设置

• onHide 页面隐藏

  当navigateTo或者底部tab切换的时候调用

• onUnload: 页面卸载

  当redirectTo或者navigateBack的时候调用

页面相关事件处理函数

• onPullDownRefresh :下拉刷新

  （1）监听用户下拉刷新事件。
  （2）必须需要在app.json的window选项中，或者在页面配置中开启enablePullDownRefresh
  （3）当处理完数据刷新后。wx.stopPullDownRefresh可以停止当前页面的刷新

• onReachBottom:上拉触底

  (1)监听用户上拉触底事件。
  (2)可以在app.json里面的window选项中或者页面配置中设置触发距离onReachBottomDistance
  (3)在触发距离内滑动期间，本事件只会触发一次.

• onPageScroll：页面滚动

  (1)监听用户滑动页面事件
  (2)参数为object包含以下字段.
  scrollTop 类型Num 页面在垂直方向已滚动的距离(单位Px)
  (3)代码如下:

onPageScroll:function(options){
    console.log(options.scrollTop);
    }

• onShareAppMessage : 用户转发

  (1)只有定义了此事件处理函数，右上角菜单才会显示转发按钮.
  (2)用户点击转发按钮的时候就会调用
  (3)此事件需要return一个object用户自定义转发内容

  onShareAppMessage: function () {
  return {
    title: '页面的主标题',
    desc: '页面的描述',
    path: '/pages/index/index?id=123'
        }
      }

事件处理函数

(1)除了初始化数据和生命周期函数，我们还可以自定义事件处理函数，在组件中加入事件绑定，当达到触发事件就会执行Page中定义的事件处理函数.

示例代码:

点击我

在逻辑层(js)

Page({
  clickme:function(){
  console.log('Hello world!')
  }
})

this.setData()

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

setData()参数格式

• data

类型object 必填:是 描述需要改变的数据

• callback 类型function 必填:否 描述回调函数

object以key,value的形式表示将this.data中的key对应的值变成value！callback是一个回调函数，在这次setData对界面渲染完毕后使用。
其中key可以非常灵活，以数据路径的形式给出。如arr[2].message,a.b.c.d并且不需要再this.data中预先定义.

注意:
直接修改this.data而不调用this.setData 是无法改变页面的状态的。还会造成数据不一致。
单次设置的数据不能超过1024KB，避免一次设置过多的数据.

示例代码:

{{text}}
 Change normal data 
{{num}}
 Change normal num 
{{array[0].text}}
 Change Array data 
{{object.text}}
 Change Object data 
{{newField.text}}
 Add new data 

在index.js文件里面

Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

页面路由

在小程序中所有的页面的路由全部由框架进行管理

getCurrentPages()

getCurrentPages()函数用于获取到当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页。

重要的事情说三遍。千万不要修改页面栈。千万不要修改页面栈。千万不要修改页面栈。

路由方式

• 打开新页面:

  调用API wx.navigateTo
  或者组件

• 页面重定向

  调用API wx.redirecTo
  或者使用组件

• 页面返回

  调用API wx.navigateBack
  或者使用组件

• Tab切换

  调用API wx.switchTab
  或者使用组件

• 重启动

  调用API wx.reLaunch
  或者使用组件

这几种路由跳转方式。对于前页面来说:
wx.navigateTo 对应的 onHide
wx.redirecTo 对应的 onUnload
wx.navigateBack 对应的onUnload

特别注意

• navigateTo,redirectTo只能打开不是底部导航指定的页面
• SwitchTab 只能打开tabBar页面
• reLaunch 可以打开任意页面
• 页面底部的tabBar由页面决定，即只要是定义了tabbar的页面，底部就有tabBar
• 调用页面路由带的参数可以在目标页面的onLoad中获取