一个小程序就是一个全局的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"
}