一个小程序就是一个全局的app函数，函数在初始化时加载各个页面page，页面加载各个组件component。
小程序分为app和page两层。
一、App() 全局函数
管理所有页面和全局数据，以及提供生命周期回调函数。是一个构造方法，构成App实例，一个小程序就是一个App实例。
包含三个文件：
1、app.json：应用配置
设置页面文件的路径、窗口表现、多Tab、分包、插件等。
示例：
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"defaultTitle": "Demo"
}
}
2、app.js：应用逻辑
// 小程序首次启动时会调用（第一次打开），只会调用一次
onLaunch(options){
console.log(options.query);
console.log(options.path);
}
// 小程序启动，从后台进入前台
onShow(options){
console.log(options.query);
console.log(options.path);
}
// 注意1：不要在onShow()中进行 my.redirectTo或my.navigateTo 等操作页面栈的行为。
// 注意1：不要在 onLaunch() 里调用 getCurrentPages 方法，因为此时 page 还未生成。
// 小程序从前台进入后台会触发
onHide(){
}
// 小程序发生错误脚本或API调用出错时触发
onError(err){
console.log(err)
}
// 全局分享配置。返回自定义分享信息
onShareAppMessage() {
},
// 当Promise被reject且没有reject处理器时触发。也可使用 my.onUnhandledRejection绑定监听。
onUnhandledRejection(res) {
console.log(res.reason, res.promise);
// res.reason 是reject原因，res.promise 是被reject的Promise对象
},
// 小程序要打开的页面不存在时触发。也可以使用 my.onPageNotFound 绑定监听。
onPageNotFound(res) {
my.redirectTo({
url: '/pages/...'
})
// 如果是 tabbar 页面，请使用 my.switchTab
}
// 设置全局数据
globalData:1
无法在app.js关掉小程序。关闭小程序的方法仅支持小程序页面点击右上角的关闭按钮。
3、app.acss：应用样式
作为全局样式，作用于当前小程序的所有页面
二、Page() 页面函数
代表应用的一个页面，负责页面展示和交互。是一个构造方法，构成页面实例。
包含四个文件：
1、[pageName].js：页面内逻辑
Page({
data: {
title: "Alipay",
},
onLoad(query) {
// 页面加载
},
onShow() {
// 页面显示
},
onReady() {
// 页面加载完成
},
onHide() {
// 页面隐藏
},
onUnload() {
// 页面被关闭
},
onTitleClick() {
// 标题被点击
},
onPullDownRefresh() {
// 页面被下拉
},
onReachBottom() {
// 页面被拉到底部
},
onShareAppMessage() {
// 返回自定义分享信息
},
// 事件处理函数对象
events: {
onBack() {
console.log('onBack');
},
},
// 自定义事件处理函数
viewTap() {
this.setData({
text: 'Set data for update.',
});
},
// 自定义事件处理函数
go() {
// 带参数的跳转，从 page/ui/index 的 onLoad 函数的 query 中读取 type
my.navigateTo({
url:'/page/ui/index?type=mini'});
},
// 自定义数据对象
customData: {
name: 'alipay',
},
});
2、[pageName].axml：页面结构
3、[pageName].acss：页面样式(可选)
4、[pageName].json：页面配置(可选)
用于配置当前页面的窗口表现。只能设置 window 相关配置项，但无需写 window 这个键。页面配置项会优先于全局配置项。
示例：
{
// 设置导航栏额外图标
"optionMenu": {
"icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
},
// 设置导航栏点击穿透，取值（"YES"，"NO"）
"titlePenetrate": "YES",
// 设置导航栏图标主题，仅支持真机预览。“default”为蓝色图标，“light”为白色图标
"barButtonTheme": "light",
"usingComponents": {
"other":"../other/index" // 依赖的组件
},
// 避免页面的样式影响到外部
"styleIsolation": "apply-shared"
}
三、Component() 组件函数
1、[componentName].js：组件内逻辑
Component({
mixins: [], // mixins 方便复用代码
data: {
x: 1 }, // 组件内部数据
props: {
y: 1 }, // 可给外部传入的属性添加默认值
didMount(){
}, // 生命周期函数
didUpdate(prevProps,prevData){
}, // 用于监听data跟props里的数据变化
didUnmount(){
},
methods: {
// 自定义方法
handleTap() {
this.setData({
x: this.data.x + 1}); // 可使用 setData 改变内部属性
},
},
})
2、[componentName].axml：组件结构
3、[componentName].acss：组件样式
4、[componentName].json：组件配置
声明自定义组件。如果该自定义组件还依赖了其它组件，则还需要额外声明依赖哪些自定义组件。
示例：
{
"component": true, // 必选，自定义组件的值必须是 true
"usingComponents": {
"other":"../other/index" // 依赖的组件
},
// 组件样式隔离
"styleIsolation": "apply-shared"
}