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
