【支付宝小程序】开发基础--文件结构教程
我是Sam9029，一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！
文章目录
-
- 概述
- 文件详解
-
- app.json
- pages/index/index.json
- page/index/index.js
概述
- 本文将介绍支付宝小程序开发中文件结构的相关知识
支付宝小程序的文件结构主要包括以下几个部分：
app.json：应用的入口文件，用于配置小程序的基本信息，如小程序名称、版本号等。
pages：页面文件夹，用于存放小程序的各个页面，每个页面对应一个**.json**文件。
- pages
- index
- index.js
- index.axml
- index.acss
- index.json
index.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领域博主](