支付宝小程序代码结构及组成 (一)

简介: 本节以 IDE 内的 Todo App 模板小程序为例,介绍支付宝小程序的文件结构,以及每种文件类型在小程序中的作用。

本章内容出自《小程序开发不求人》电子书,点击下载完整版

支付宝小程序代码结构及组成

了解小程序文件结构

本节以 IDE 内的 Todo App 模板小程序为例,介绍支付宝小程序的文件结构,以及每种文件类型在小程序中的作用。
Todo App 是一个简单的待办事项管理小程序,实现了用户登录、新增自定义待办事项、划除或恢复待办事项的功能。

app.json

app.json 是小程序的全局配置,用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。更多配置请参见 文档配置
app.acss 定义了全局样式,作用于当前小程序的所有页面。
上例中的 page 为框架支持的特殊选择器,会匹配框架提供的页面根节点容器。

app.js

app.js 用于注册小程序应用,可配置小程序的生命周期,声明全局数据,调用丰富的 API,如以下获取用户授权及获取用户信息 API 等,更多 API 信息请参见API 文档
可以看到,全局的逻辑代码放在 App({})中,声明了全局数据 todos 、userInfo ,以及全局方法 getUserInfo()。
todos 全局数据中已经存储了一些数据,即 Todo App 小程序中已有的一些待办事项。
全局方法 getUserInfo() 调用了授权 API my.getAuthCode,以及获取用户信息API my.getAuthUserInfo ,并将获取到的用户信息存储在 userInfo 中。

小程序页面

此示例中有两个页面,Todo List 页面和 Add Todo 页面,都位于 pages 目录下。小程序的所有页面路径必须在 app.json 中申明,路径从项目根目录开始且不能包括后缀名,pages 的第一个页面就是小程序的首页。
每一个页面 由同路径下的四种类型文件组成,即 .json 后缀的配置文件,.axml后缀的模板文件,.acss 后缀的样式文件,.js 后缀的逻辑脚本文件。

todo List 页面

todos.json 用于配置当前页面的窗口表现。此处定义了使用一个自定义组件add-button ,指定它的组件名称及对应的路径。自定义组件的具体使用后面会讲述。
页面配置文件不是必须的。当存在页面配置文件时,各个页面配置项会优先于app.json 中 window 的同名配置项。当不存在页面配置文件,则直接使用app.json 中的默认配置。因此,Todo List 页面的标题为 app.json 中指定的defaultTitle ,即 Todo App。
todos.axml 为页面结构模板文件。使用<view/>,<image/>,<text/>,<button/>,<label/>,<checkbox/>,来搭建页面结构以及通过 Mustache 语法两对大括号({{}})绑定 todos 数据。

todos.js 是页面的逻辑脚本文件,小程序页面的逻辑代码必需包含在 Page({})中。在这个文件中可实现:

  • 监听并处理页面的生命周期函数 onShow onLoad
  • 获取小程序实例以及其他页面实例 getApp getCurrentPages
  • 声明并处理数据 data
  • 响应页面交互事件,调用 API 等
  • 这里需要注意的是 app.todos 是来自 app.js 中全局的变量定义

todos.acss 定义页面局部样式。指定 todos.axml 中不同元素的样式,包括位置、背景颜色、字体、字体颜色等。 ACSS 语法参见 样式 文档。页面的 .acss文件不是必须的,但对于相同选择器,页面局部样式会覆盖 app.acss 全局样式。

Add Todo 页面

add-todo.json 声明自定义组件名称和路径。
add-todo.axml 为页面结构模板文件。
此页面的两个核心功能为:

  1. 使用<input/> 组件接收用户输入。
  2. <add-button>是一个自定义组件,可将一些功能完整的代码封装为自定义组件,便于在其他地方复用。

add-todo.js 为页面逻辑代码。add-todo.acss 同 todos.acss 用法一致,不再赘述。

相关文章
|
3月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
141 0
|
4月前
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
260 8
|
12月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
180 1
|
JavaScript Java 测试技术
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
114 0
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
12月前
|
开发框架 小程序 JavaScript
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
426 0
小程序代码丢失!反编译找回
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
419 2
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
428 0
微信小程序开发必备前置知识:基本代码构成与语法
|
小程序 JavaScript 安全
微信小程序实现云闪付支付(代码和注释很详细)
微信小程序实现云闪付支付(代码和注释很详细)

热门文章

最新文章