【支付宝小程序】开发基础--文件结构教程

🦖我是Sam9029，一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍

概述

• 本文将介绍支付宝小程序开发中文件结构的相关知识

支付宝小程序的文件结构主要包括以下几个部分：
app.json：应用的入口文件，用于配置小程序的基本信息，如小程序名称、版本号等。
pages：页面文件夹，用于存放小程序的各个页面，每个页面对应一个**.json**文件。

- pages- index- 	index.js-   index.axml-   index.acss-   index.jsonindex.js：JS业务逻辑文件，用于处理小程序的业务逻辑和生命周期函数。它包含了小程序的页面逻辑、数据处理、API 调用等内容。
index.axml：页面结构文件，用于描述小程序的页面布局和元素。它包含了页面的 XML 代码，用于生成页面的 DOM 树。
index.acss：页面样式文件，用于定义页面的样式和布局。它包含了 CSS 代码，用于控制页面的样式和展示效果。
index.json：页面配置文件，用于描述小程序的基本信息和配置。它包含了小程序的页面路径、窗口参数、权限设置等内容

utils：工具文件夹，用于存放小程序的工具函数，如数据请求、本地存储等。
components：组件文件夹，用于存放小程序的自定义组件，每个组件对应一个**.json**文件。
app.js：应用的主进程文件，用于处理小程序的生命周期事件、页面路由等。
mini.project.json 中配置项目编译、打包策略。推荐使用新版 项目配置。

主要结构示例

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

文件详解

关于 axml，js，acss 都是基础的，不在赘述, 对重要的json配置文件结构进行介绍，主要是app.json 和个页面的 json配置

app.json

• eg

支付宝小程序的 app.json 文件是小程序的配置文件，它包含了小程序的基本信息和设置。以下是一些主要的配置项：

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "示例小程序","navigationBarTextStyle": "black"
}

这段配置定义了小程序的窗口样式，包括背景颜色、导航栏背景颜色、标题文本和文本颜色。

"pages": ["pages/index/index","pages/logs/logs"
]

这段配置定义了小程序的页面路径，其中 “pages/index/index” 是小程序的首页，“pages/logs/logs” 是日志页面。

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于获取周边信息"},"scope.userInfo": {"desc": "你的个人信息将用于注册和登录"}
}

这段配置定义了小程序所需的权限，包括获取用户位置信息和用户个人信息。同时，还需要为用户提供相应的权限描述。

下面是完整示意app.json

{"version": "1.0.0",  "title": "支付宝小程序示例",  "description": "一个简单的支付宝小程序",  "app_status": "online",  "background_color": "#ffffff",  "theme_color": "#000000",  "display": "standalone",  " orientation": "portrait",  " shortcut_path": "./index.html",  "window": {  "backgroundTextStyle": "light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "支付宝小程序示例",  "navigationBarTextStyle": "black",  "tabBar": {  "selectedColor": "#000000",  "list": [  {  "pagePath": "pages/index/index",  "text": "首页",  "iconPath": "assets/images/tabbar/home.png",  "selectedIconPath": "assets/images/tabbar/home-active.png"  },  ]  }  },  "pages": [  "pages/index/index",  "pages/logs/logs"  ],  "components": {  "date-picker": {  "usingComponents": {  " anger-rate": "./components/anger-rate/anger-rate"  }  }  }  
}

pages/index/index.json

以下就是一个 页面中基本的

{"defaultTitle": "","allowsBounceVertical": "NO","transparentTitle": "auto","titleBarColor": "#262833","optionMenu": {"icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"},"titlePenetrate": "YES","barButtonTheme": "light"
}

下面是json 配置的详细文档
json——基础配置
json——页面配置

---

page/index/index.js

另外一个重要的就是 页面的js业务逻辑文件

{"page": {  "title": "首页",  "path": "pages/index/index",  "style": {  "navigationBarTitleText": "首页"  },  "script": {  "usingComponents": {  "date-picker": "../../components/date-picker/date-picker"  },  "beforeLoad": function () {  // 页面加载前执行的函数  },  "onLoad": function () {  // 页面加载后执行的函数  },  "onUnload": function () {  // 页面卸载前执行的函数  },  "onShow": function () {  // 页面显示前执行的函数  },  "onHide": function () {  // 页面隐藏前执行的函数  }  }  }  
}

支付宝小程序页面生命周期函数：一个戏精的诞生
beforeLoad
在预热阶段，页面的 DOM 结构和组件还没准备好。这就像一个演员还在后台化妆，我们趁这个机会去请求一些数据，做做准备工作。
onLoad
正式登场！这个时候页面的 DOM 结构和组件已经加载完成，可以开始渲染和初始化了。就像是演员终于化好妆，可以登台表演了。在这个阶段，我们可以进行数据绑定、事件监听等操作，让页面展现出它的魅力。
onUnload
谢幕时刻。这个时候页面的组件已经卸载，但页面的 DOM 结构还没完全销毁。就像是演员已经下台，但舞台还没拆完。我们可以在这个阶段进行一些清理工作，例如清除定时器、解绑事件等，确保舞台干净整洁。
onShow
亮相前夕！这个时候页面的 DOM 结构已经加载完成，但页面的显示状态还未改变。就像是演员已经站在舞台边，准备登场。在这个阶段，我们可以进行一些页面显示前的操作，例如修改页面的样式、状态等，让演员以最佳形象亮相。
onHide
完美收场！这个时候页面的显示状态已经改变，但页面的 DOM 结构还未销毁。就像是演员已经表演完毕，准备离开舞台。在这个阶段，我们可以进行一些页面隐藏前的操作，例如保存用户数据、清除定时器等，确保演员顺利收场。

了解这些生命周期函数就像是了解一个戏精的表演过程，可以帮助我们更好地管理页面的加载、显示、隐藏等状态，确保页面的顺利运行。

---

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧

[Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主](