小程序全局结构是什么？

概述 App() 代表顶层应用，管理所有页面和全局数据，以及提供生命周期回调等。它 也是一个构造方法，生成 App 实例。 一个小程序就是一个 App 实例。 每个小程序顶层一般包含三个文件。  app.json：应用配置  app.js：应用逻辑  app.acss：应用样式（可选） 简单示例 一个简单的 app.json 代码如下：

 "pages": [
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window": {
 "defaultTitle": "Demo"
 } }

这段代码配置指定小程序包含两个页面（index 和 logs），以及应用窗口的默认 标题设置为 “Demo”。 一个简单的 app.js 代码如下：

 onLaunch(options) {
 // 第一次打开
 },
 onShow(options) {
 // 小程序启动，或从后台被重新打开
 },
 onHide() {
 // 小程序从前台进入后台
 },

onError(msg) { // 小程序发生脚本错误或 API 调用出现报错 console.log(msg); }, globalData: { // 全局数据 name: 'alipay', }, }); 26 app.json 全局配置 app.json 用于对小程序进行全局配置，设置页面文件的路径、窗口表现、多 tab 等。 以下是一个基本配置示例：

 "pages": [
 "pages/index/index",
 "pages/logs/index"
 ],
 "window": {
 "defaultTitle": "Demo"
 } }

完整配置项如下： 属性 类型 是否必填 描述 pages Array 是 设置页面路径 window Object 否 设置默认页面的窗 口表现 tabBar Object 否 设置底部 tabbar 的表现 pages app.json 中的 pages 为数组属性，数组中每一项都是字符串，用于指定小程序 的页面。在小程序中新增或删除页面，都需要对 pages 数组进行修改。 pages 数组的每一项代表对应页面的路径信息，其中，第一项代表小程序的首 页。 页面路径不需要写任何后缀，框架会自动去加载同名的 .json、.js、.axml、.acss 文件。举例来说，如果开发目录为：

│ ├──index
│ │ ├── index.json
│ │ ├── index.js
│ │ ├── index.axml
│ │ └── index.acss
│ ├──logs
│ │ ├── logs.json
│ │ ├── logs.js
│ │ └── logs.axml
├── app.json
├── app.js
└── app.acss

app.json 中应当如下配置： { "pages":[ "pages/index/index", "pages/logs/logs" ] } window window 用于设置小程序的状态栏、导航条、标题、窗口背景色等。 示例代码： { "window":{ "defaultTitle": "支付宝接口功能演示" } } 属性 类型 是否必 填 描述 最低版本 defaultTitle String 否 页面默认标题 - pullRefresh String 否 是否允许下拉刷新。默认 NO, 备注：下拉刷新生效的 前提是 allowsBounceVertical 值 为 YES

allowsBounceV ertical String 否 是否允许向下拉拽。默认 YES, 支持 YES / NO

28 transparentTitl e String 否 导航栏透明设置。默认 none，支持 always 一直透 明 / auto 滑动自适应 / none 不透明

titlePenetrate String 否 是否允许导航栏点击穿透。 默认 NO，支持 YES / NO

showTitleLoadi ng String 否 是否进入时显示导航栏的 loading。默认 NO，支持 YES / NO

titleImage String 否 导航栏图片地址 - titleBarColor HexCol or 否 导航栏背景色，十六进制颜 色值（0-255） - backgroundCol or HexCol or 否 页面的背景色，十六进制颜 色值（0-255） - backgroundIm ageColor HexCol or 否 下拉露出显示的背景图底 色，十六进制颜色值（0- 255） - backgroundIm ageUrl String 否 下拉露出显示的背景图链接 - gestureBack String 否 iOS 用，是否支持手势返 回。默认 NO，支持 YES / NO

enableScrollBa r Boolea n 否 Android 用，是否显示 WebView 滚动条。默认 YES，支持 YES / NO

onReachBotto mDistance Number 否 页面上拉触底时触发时距离 页面底部的距离，单位为 px。相关文档页面事件处理 函数 1.19.0 ，目前 iOS 在 page.json 下设 置无效，只能全 局设置。 29 tabBar 如果你的小程序是一个多 tab 应用（客户端窗口的底部栏可以切换页面），那么 可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页 面。 注意：  通过页面跳转（my.navigateTo）或者页面重定向（my.redirectTo）所到达的页面，即使 它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。  tabBar 的第一个页面必须是首页。 tabBar 配置项有以下： 属性 类型 是否必填 描述 textColor HexColor 否 文字颜色 selectedColor HexColor 否 选中文字颜色 backgroundColor HexColor 否 背景色 items Array 是 每个 tab 配置 每个 item 配置： 属性 类型 是否必填 描述 pagePath String 是 设置页面路径 name String 是 名称 icon String 否 平常图标路径 activeIcon String 否 高亮图标路径 icon 图标推荐大小为 60×60 px 大小，系统会对传入的非推荐尺寸的图片进行非 等比拉伸或缩放。 示例代码：

 "tabBar": {
30
 "textColor": "#dddddd",
 "selectedColor": "#49a9ee",
 "backgroundColor": "#ffffff",
 "items": [
 {
 "pagePath": "pages/index/index",
 "name": "首页"
 },
 {
 "pagePath": "pages/logs/logs",
 "name": "日志"
 }
 ]
 } }

app.acss 全局样式 app.acss 作为全局样式，作用于当前小程序的所有页面。 ACSS 是一套样式语言，用于描述 AXML 的组件样式，决定 AXML 的组件的显 示效果。 为适应广大前端开发者，ACSS 和 CSS 规则完全一致，100% 可以用。同时为更 适合开发小程序，对 CSS 进行了扩充。 ACSS 支持 px，rpx，vh，vw 等单位。 rpx rpx（responsive pixel）可以根据屏幕宽度进行自适应，规定屏幕宽为 750rpx。以 Apple iPhone6 为例，屏幕宽度为 375px，共有 750 个物理像 素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。 设备 rpx 换算 px（屏幕宽度 / 750） px 换算 rpx（750 / 屏幕宽 度） iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 样式导入 使用 @import 语句可以导入外联样式表，@import 后需要加上外联样式表相对 路径，用;表示结束。 示例代码：

.sm-button {
 padding: 5px; }
/** app.acss **/
@import "./button.acss";
.md-button {
 padding: 15px; }

导入路径支持从 node_modules 目录载入第三方模块，例如 page.acss: @import "./button.acss"; /相对路径/ 32 @import "/button.acss"; /项目绝对路径/ @import "third-party/page.acss"; /第三方 npm 包路径/ 内联样式 组件上支持使用 style、class 属性来控制样式。 style 属性 用于接收动态样式，样式在运行时会进行解析。行内样式不支持!important 优先 级规则。 class 属性 用于接收静态样式，属性值是样式规则中类选择器名（样式类名）的集合，样式类 名不需要带上.，多个类名间以空格分隔。请静态样式写进 class 中，避免将静态 样式写进 style 中，以免影响渲染速度。 选择器 同 CSS3 保持一致。 注意：  .a-, .am- 开头的类选择器为系统组件占用，不可使用。  不支持属性选择器。 全局样式与局部样式  app.acss 中的样式为全局样式，作用于每一个页面。  页面文件夹内的 .acss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.acss 中相同的选择器。 本地资源引用 ACSS 文件里的本地资源引用请使用绝对路径的方式，不支持相对路径引用。例 如： /* 支持 / background-image: url('/images/ant.png'); / 不支持 */ background-image: url('./images/ant.png'); 33 app.js 注册小程序 App(object: Object) App() 用于注册小程序，接受一个 Object 作为属性，用来配置小程序的生命周 期等。 App() 必须在 app.js 中调用，必须调用且只能调用一次。 object 属性说明 属性 类型 描述 触发时机 onLaunch Function 生命周期回调：监 听小程序初始化 当小程序初始化完 成时触发，全局只 触发一次 onShow Function 生命周期回调：监 听小程序显示 当小程序启动，或 从后台进入前台显 示时触发 onHide Function 生命周期回调：监 听小程序隐藏 当当前页面被隐藏 时触发，例如跳 转、按下设备 Home 键离开 onError Function 监听小程序错误 当小程序发生 js 错误时触发 onShareAppMessage Function 全局分享配置 - 前台/后台定义：  小程序用户点击右上角关闭，或者按下设备 Home 键离开支付宝时，小程序并不会直接销 毁，而是进入后台。  当用户再次进入支付宝或再次打开小程序时，小程序会从后台进入前台。  只有当小程序进入后台 5 分钟后，或占用系统资源过高，才会被真正销毁。 onLaunch(object: Object) 及 onShow(object: Object) object 属性说明： 属性 类型 描述 34 query Object 当前小程序的 query，从启动参数的 query 字段解析而来 scene number 启动小程序的 场景值 path string 当前小程序的页面地址，从启动参数 page 字段解析而来，page 忽略时默认为首页 referrerInfo Object 来源信息 比如，启动小程序的 schema url 如下: alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2 Fz  小程序首次启动时，onLaunch 方法可获取 query、path 属性值。  小程序在后台被用 schema 打开，也可从 onShow 方法中获取 query、path 属性值。 App({ onLaunch(options) { // 第一次打开 console.log(options.query); // {number:1} console.log(options.path); // x/y/z }, onShow(options) { // 从后台被 schema 重新打开 console.log(options.query); // {number:1} console.log(options.path); // x/y/z }, }); referrerInfo 子属性说明： 属性 类型 描述 最低版本 appId string 来源小程序 - sourceServiceId string 来源插件，当处于插件运行模式时可见 1.11.0 35 extraData Object 来源小程序传过来的数据。 - 注意：  不要在 onShow 中进行 redirectTo 或 navigateTo 等操作页面栈的行为。  不要在 onLaunch 里调用 getCurrentPages()，因为此时 page 还未生成。 onHide() 小程序从前台进入后台时触发 onHide() 。 示例代码： App({ onHide() { // 进入后台时 console.log('app hide'); }, }); onError(error: String) 小程序发生脚本错误时触发。 示例代码： App({ onError(error) { // 小程序执行出错时 console.log(error); }, }); onShareAppMessage(object: Object) 全局分享配置。当页面未设置 page.onShareAppMessage 时，调用分享会执行 全局的分享设置，具体见 分享 。 globalData 全局数据 App() 中可以设置全局数据 globalData。 示例代码： // app.js App({ globalData: 1 }); getApp 方法 小程序提供了全局的 getApp() 方法，可获取当前小程序实例，一般用于在子页 面中获取顶层应用。 var app = getApp(); console.log(app.globalData); // 获取 globalData 使用过程中，请注意以下几点：  App() 函数中不可以调用 getApp()，可使用 this 可以获取当前小程序实例。  通过 getApp() 获取实例后，请勿私自调用生命周期回调函数。  请区分全局变量及页面局部变量，比如： // app.js App({ //定义全局变量 globalData，在整个 App 中有效 globalData: 1 }); // a.js // 定义页面局部变量 localValue，只在 a.js 有效 var localValue = 'a'; // 获取 app 实例 var app = getApp(); // 拿到全局数据，并改变它 app.globalData++; // b.js // 定义页面局部变量 localValue，只在 b.js 有效 var localValue = 'b'; // 如果 a.js 先运行，globalData 会返回 2 console.log(getApp().globalData); a.js 和 b.js 两个文件中都声明了变量 localValue，但并不会互相影响，因为各 个文件声明的局部变量和函数只在当前文件下有效。

内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library