好的网站制作网站,app直链在线生成,空间设计网站大全,淘宝联盟建网站#x1f996;我是Sam9029#xff0c;一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 #x1f431;#x1f409;#x1f431;#x1f409;恭喜你#xff0c;若此文你认为写的不错#xff0c;不要吝啬你的赞扬#xff0c;求收…我是Sam9029一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 恭喜你若此文你认为写的不错不要吝啬你的赞扬求收藏求评论求一个大大的赞 文章目录 概述文件详解app.jsonpages/index/index.jsonpage/index/index.js 概述
本文将介绍支付宝小程序开发中文件结构的相关知识
支付宝小程序的文件结构主要包括以下几个部分 app.json应用的入口文件用于配置小程序的基本信息如小程序名称、版本号等。 pages页面文件夹用于存放小程序的各个页面每个页面对应一个**.json**文件。
- pages- index- index.js- index.axml- index.acss- index.jsonindex.jsJS业务逻辑文件用于处理小程序的业务逻辑和生命周期函数。它包含了小程序的页面逻辑、数据处理、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文件详解
关于 axmljsacss 都是基础的不在赘述, 对重要的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领域博主](
