上一节，我们学会了支付宝小程序全局配置。这一节，我们学习支付宝小程序页面配置Page。
三、 支付宝小程序——框架（二）
1. 打开支付宝小程序开发工具，打开Pages文件夹中的index文件夹
pages文件夹
小程序的页面文件，每个页面文件都必须包含axml和js文件，json文件如果没有将使用全局的配置app.json文件。
Page 代表应用的一个页面，负责页面展示和交互。每个页面对应一个子目录，一般有多少个页面，就有多少个子目录。
index文件夹就是一个子目录。
一个页面需要有axml文件和js文件。
index.axml
<view>
Hello Alipay APP！
</view>
我们打开index.js文件
Page({
onLoad(query) {
// 页面加载
console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
},
onReady() {
// 页面加载完成
},
onShow() {
// 页面显示
},
onHide() {
// 页面隐藏
},
onUnload() {
// 页面被关闭
},
onTitleClick() {
// 标题被点击
},
onPullDownRefresh() {
// 页面被下拉
},
onReachBottom() {
// 页面被拉到底部
},
onShareAppMessage() {
// 返回自定义分享信息
return {
title: 'My App',
desc: 'My App description',
path: 'pages/index/index',
};
},
});
页面生命周期方法：
onLoad:页面加载时触发
onShow:页面显示时触发
onReady:页面初次渲染完成时触发
onHide:页面隐藏时触发
onUnload:页面卸载时触发
在开发工具中运行就可以看到如下效果：
页面效果
小程序的页面生命周期图：
小程序页面生命周期
详细内容可查看小程序开发文档：支付宝小程序开发文档
至此，我们已经学学习了小程序的应用逻辑和应用配置。下一节，我们将学习小程序页面配置page
上一节：三、 支付宝小程序——框架（一）
下一节：五、支付宝小程序——框架（三）
原文作者：Anting全栈开发
技术博客：https://www.jianshu.com/u/259b7db6cc20
90后，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的全栈开发一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。
