三、 支付宝小程序——框架（一）

上一节，我们学会了如何创建一个支付宝小程序。这一节，我们学习支付宝小程序配置App。

三、 支付宝小程序——框架（一）

1. 打开支付宝小程序开发工具，查看项目框架结构

demo项目结构

其实本身的项目结构最精简的还不现在这个结构，一个小程序必要的文件有app.json,app.js，这两个文件必须存在且放在项目的根目录中，当然我们创建一个小程序，我们肯定需要有页面page，如index文件夹中的文件就是一个page页面，一个页面的必要文件也只有axml和js文件。

2. app.js 小程序应用逻辑（必须有且存在项目根目录下）

App({
  onLaunch(options) {},  // 小程序启动
  onShow(options) {},   // 小程序切换到前台
  onHide() {},          // 小程序切换到后台
  onError(msg) {       // 小程序出错
    console.log(msg)
  }
})

App 代表顶层应用，管理所有页面和全局数据，以及提供生命周期方法。它也是一个构造方法，生成 App 实例。一个小程序就是一个 App 实例。
小程序的四个钩子事件：
onLaunch: 监听小程序初始化，当小程序初始化完成时触发，全局只触发一次
onShow: 监听小程序显示，当小程序启动，或从后台进入前台显示时触发
onHide: 监听小程序隐藏，当小程序从前台进入后台时触发
onError: 监听小程序错误，当小程序发生 js 错误时触发

3. app.json 小程序应用配置

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "defaultTitle": "我的第一个支付宝小程序"
  },
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/index/index",
        "name": "日志"
      }
    ]
  }
}

pages:数组结构，必填，设置小程序页面路由
window:对象结构，选填，设置小程序默认页面的窗口表现
tabBar:对象结构，选填，设置小程序底部tab的表现

运行上述配置文件，出现如下效果。
具体参数的设置可查看小程序开发文档：支付宝小程序开发文档

效果图

至此，我们已经学学习了小程序的应用逻辑和应用配置。下一节，我们将做个小案例

上一节：二、 开启我的第一个支付宝小程序

下一节：四、支付宝小程序——框架（二）

原文作者：Anting全栈开发
技术博客：https://www.jianshu.com/u/259b7db6cc20
90后，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的全栈开发一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。