小程序框架

逻辑层--js

具备App和Page方法，进行程序注册和页面注册具备getApp和getCurrentPages方法，用来获取App实例和当前页面栈丰富的API
模块化，每个页面有独立作用域

注册小程序

每个小程序都需要在app.js中调用App方法注册小程序实例
整个小程序有且只有一个App实例，全部页面共享。每个子页面可通过getApp方法获取到全局唯一的App实例，获取App上的数据或调用开发者注册在 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'
})

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注册页面-Page

每个页面都需要在xx.js中调用Page或Component构造器进行页面或组件的注册整个小程序有且只有一个App实例，全部页面共享。每个子页面可通过getApp方法获取到全局唯一的App实例，获取App上的数据或调用开发者注册在 App 上的函数。
Behavior方法可以将公共数据和方法作为模块导出，各个子页面均可引入

// myBehavior.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {  //
    // 页面创建时执行
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})  
module.exports = Behavior({
  data: {
    common: 'common'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'common'
    }
  }
})
// a.js
var myBehavior = require('./myBehavior.js')
Page({
  behaviors: [myBehavior],
  data: {
    local: 'local'
  },
  onLoad: function() {
    console.log(this.data.common,this.data.local); //common local
  }
})

注册页面-使用 Component 构造器

Component构造器的主要区别是：方法需要放在 methods: { } 里面

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

页面生命周期

视图层初始化组件 -> 逻辑层onLoad(此时可以定义赋值视图层渲染所需要的参数) -> onShow -> 传递逻辑层的数据到视图层进行渲染 -> 视图层首次渲染完成 -> 逻辑层onReady(期间传递什么数据？？) -> onHide/onShow ->页面销毁onUnload

页面生命周期中常用参数:

onShow:页面出现在前台时执行;

onReady:页面首次渲染完毕时执行;

onHide:页面从前台变为后台时执行;

onUnload:页面销毁时执行;

onPullDownRefresh:触发下拉刷新时执行;

onReachBottom:页面触底时执行;

onShareAppMessage:页面被用户分享时执行;

onPageScroll:页面滚动时执行;

onResize:页面尺寸变化时执行;

onTabItemTap:tab 点击时执行;

页面路由

路由切换和页面栈以及逻辑层调用的对应关系:

路由方式	触发时机	页面栈	路由前	路由后
初始化	对应调用onLoad, onShow	新页面入栈		onLoad, onShow
打开新页面	调用 API `wx.navigateTo`/n使用组件 `<navigator open-type="navigateTo"/>`	新页面入栈	onHide	onLoad, onShow
页面重定向	调用 API `wx.redirectTo`/n使用组件 `<navigator open-type="redirectTo"/>`	当前页面出栈，新页面入栈	onUnload	onLoad, onShow
页面返回	调用 API `wx.navigateBack`/n使用组件 `<navigator open-type="navigateBack"/>`	页面不断出栈，直到目标返回页	onUnload	onShow
Tab 切换	调用 API `wx.switchTab`/n使用组件 `<navigator open-type="switchTab"/>`	switchTab只针对tabbar页面	onHide	onShow
重启动	调用 API `wx.reLaunch`/n使用组件 `<navigator open-type="reLaunch"/>`	页面全部出栈，只留下新的页面	onUnload	onLoad, onShow

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

疑问：Tab切换只针对tabBar页面。为何还存在各种tab切换情况

个人学习笔记 - 【微信小程序】框架_逻辑层