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

🦖我是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

支付宝小程序的 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 结构还未销毁。就像是演员已经表演完毕，准备离开舞台。在这个阶段，我们可以进行一些页面隐藏前的操作，例如保存用户数据、清除定时器等，确保演员顺利收场。