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

我是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领域博主](

你可能感兴趣的:(支付宝小程序,小程序,javascript)