小程序接口

1. 全局接口（app.js）

app.js是小程序的核心逻辑文件，该文件完成小程序实例的注册和全局功能的定义

• 通过调用 App(object) 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等
• 在app.js中，App()必须且只能调用一次，否则会出现无法预期的后果
• 整个小程序只有一个 App实例，所有页面共享。通过方法 getApp() 获取全局唯一的 App 实例

App({
  onLaunch:function(options){
    console.log('小程序初始化启动......',options)
  },
  onShow:function(options){
    console.log('小程序展示在前台，从后台运行进入前台运行',options)
    // 判断小程序进入的场景
    switch (options.scene){
      case 1001:
        console.log('小程序主入口......');
        break;
      case 1034:
        console.log('支付完成进入....')
        break;
      case 1011:
        console.log('扫描二维码进入......')
        break;
    }
  },
  onHide:function(options){
    console.log('小程序隐藏在后台，从前台运行进入后台运行',options)
  },
  onError:function(){
    console.log('小程序出错......')
  },
  onPageNotFound:function(){
    console.log('页面不存在......')
  },
  onUnhandledRejection:function(){
    console.log('未处理的Promise拒绝异常......')
  },
  //自定义的全局变量或函数，可以通过App实例来调用
  user:{
    name:'rick',
    age:27
  },
  show(){
    console.log('全局的show方法')
  }
})

2. 页面接口（page.js）

page.js是具体页面的逻辑文件，该文件完成当前页面的注册和功能的定义

• 通过调用Page(Object)方法注册当前页面，指定页面的初始数据、生命周期回调、事件处理函数等
• this表示当前页面实例对象，可通过this访问当前页面的数据和方法
• this.setData(object)可修改页面data中的数据，并同步更新到页面中

//获取小程序App实例
const app = getApp();
console.log(app);
console.log(app.user.name);
app.show();

Page({
  // 页面初始数据，称为数据仓库data
  data:{
    msg:'hello',
    arr:[1,2,3,4],
    user:{
      id:1001,
      name:'dog'
    }
  },
  /**
   * 生命周期回调函数-监听页面加载
   * 1.该函数只执行一次
   * 2.已加载的页面会被缓存，不会重复加载，提高性能
   */
  onLoad:function(options){ // 参数options中包含了跳转到当前页面时，所携带的参数信息
    console.log('关于页面加载......',options)
  },
  /**
   * 生命周期回调函数-监听页面初次渲染完成
   * 该函数只执行一次
   */
  onReady:function(){
    console.log('关于页面初次渲染完成.....')
  },
  /**
   * 生命周期回调函数-监听页面显示
   * 该函数可以多次执行，第一次执行时早于onReady
   */
  onShow:function(){
    console.log('关于页面显示......')
  },
  /**
   * 生命周期回调函数-监听页面隐藏
   * 该函数可以多次执行
   */
  onHide:function(){
    console.log('关于页面隐藏......')
  },
  /**
   * 生命周期回调函数-监听页面卸载
   */
  onUnload:function(){
    console.log('关于页面卸载......')
  },
  /**
   * 监听用户下拉刷新事件
   */
  onPullDownRefresh:function(){
    console.log('关于页面执行下拉刷新......')
  },
  /**
   * 监听用户上拉触底事件
   */
  onReachBottom:function(){
    console.log('关于页面上拉触底事件发生......')
  },
  /**
   * 监听用户点击右上脚的转发
   * 只有监听了该事件后，点击右上脚的转发才能分享
   * 转发的标题、显示的图片和转发的具体页面都可以指定
   */
  onShareAppMessage:function(options){
    console.log('关于页面执行了转发......',options);
    return {
      title:'分享标题',
      path:'/pages/about/about',
      imageUrl:'../../images/主页2.png'
    }
  },
  /**
   * 监听当前页面对应的tab点击操作
   */
  onTabItemTap:function(item){
    console.log('关于页面的tab被点击了......',item)

    // this代表当前页面实例
    console.log(this);
    // 获取自定义的数据和方法
    console.log(this.user.name);
    this.show();
    // 获取数据仓库data中的数据
    console.log(this.data.msg);
    // 修改数据仓库data中的数据，使用this.data的方式修改是不会重新渲染页面的，即页面不会同步更新，会造成数据不一致
    // 应使用 this.setData 修改就会同步渲染页面，使数据同步，
    // this.data.msg = '您好'
    this.setData({
      msg:'您好', // 如果已存在，则修改
      info:'信息' // 如果不存在，则新增
    });
  },
  /**
   * 其他：自定义的变量和函数
   */
  user:{
    name:'leo',
    sex:'男'
  },
  show(){
    console.log('执行了关于页面的show方法......')
  }
})

3. 小程序生命周期

• onLaunch：当小程序初始化完成时会触发一次 onLaunch（全局只触发1次）（app.js）。
• onLoad：页面加载，加载页面时触发，一个页面只会调用一次。
• onShow：页面显示，页面载入后触发，每次打开页面都会触发，比如小程序由后台进入前台运行或重新进入页面时。
• onReady：首次显示页面，页面初次渲染完成时触发，一个页面只会调用一次。
• onHide：页面隐藏
• onUnload：页面卸载，当返回上一页时都会被调用（这里的坑有点深），基本上可以说执行顺序为：onLaunch -> onLoad -> onShow -> onReady -> onHide