微信小程序快速入门(二)——页面配置文件

一、.json文件 页面配置

只含有window属性，控制当前页面的窗口表现

{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的页面",
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "light"
}

二、.js 页面逻辑文件
主要功能：设置初始化数据、注册当前页面的生命周期函数、注册事件处理函数

所有.js（包括app.js）都将会打包成一个js文件

// 获取app实例
var app = getApp();
Page( {
  data : {     // 页面初始化数据
    count : 0
  },
  onLoad : function() {
    // 页面加载时执行
  },
  onShow : function() {
       // 页面打开时执行
       console.log( app.globalData );
  },
  onReady : function() {
       // 页面初次渲染完成执行，一个页面只会调用一次
 },
  onHide : function() {
       // 页面隐藏时执行
  },
  onUnload : function() {
       // 页面卸载时执行
  },
  onPullDownRefresh : function() {
       // 下拉刷新时执行
  },
  onReachBottom : function() {
       // 下拉触底时执行
  },
  // 自定义函数，可与渲染层中的组件进行事件绑定
  countClick : function() {
    // 触发视图层重新渲染
    this.setData( {
      count : this.data.count + 1
    } );
  },
  // 自定义数据
  customData : {
    name : '微信'
  }
} );

页面栈和生命周期函数的关系(了解)
·小程序初始化：默认页面入栈，依次触发默认页面onLoad、onShow、onReady方法。
·打开新页面：新页面入栈，依次触发新页面onLoad、onShow、onReady方法。
·页面重定向：当前页面出栈并卸载，触发当前页面onUnload方法，新页面入栈，触发新页面onLoad、onShow、onReady方法。
·页面返回：页面不断出栈并卸载，触发当前弹出页面onUnload方法，直到返回目标页面，新页面入栈，触发新页面onShow方法。
·Tab切换：当前页面出栈但不卸载，仅触发onHide方法，新页面入栈，如果当前页面是新加载的，触发onLoad、onShow、onReady方法，如果当前页面已加载过，仅触发onShow方法。
·程序从前台到后台：触发当前页面onHide方法，触发App onHide方法。 ·程序从后台到前台：触发小程序onShow方法，触发页面onShow方法。

总结：
页面生命周期：onLoad、onShow
加载和卸载：onLoad、onReady、onUnload