上一节，我们学会了支付宝小程序全局配置。这一节，我们学习支付宝小程序页面配置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。