项目前端使用了 avm.js 多端开发技术 ,可同时编译为 Android & iOS App 以及微信小程序; 后端使用 APICloud 数据云3.0 云函数自定义接口。
技术要点本项目在开发过程中,在“能拆就拆”的思想下,对项目进行细粒度的组件化拆解。 可以从中了解到组件拆分逻辑和一些操作技巧,对自定义组件进行巩固。
效果图
如果之前没接触过APICloud多端开发的,可以先看下新手文档:APICloud - 低代码开发平台
源码目录结构介绍项目源码在本仓库的 widget 目录下。其中该目录下的文件结构如下:

┌─component/ // 项目公共组件目录│ ├─img/ // 组件公用素材│ ├─a-card.stml // [基础组件]卡片组件│ ├─a-cell.stml // [基础组件]单元格组件│ ├─a-cell-group.stml // [基础组件]单元格容器组件│ ├─a-header.stml // [基础组件]头部导航组件│ ├─a-section.stml // [基础组件]章节组件│ ├─a-tab.stml // [基础组件]选项卡组件│ ├─a-tabs.stml // [基础组件]选项卡容器组件│ ├─b-course.stml // [业务组件]课程详情组件│ ├─b-notice.stml // [业务组件]提醒面板组件│ ├─c-course-list.stml // [组合组件]课程列表页├─images/ // 图片素材图标资源目录├─pages/ // 新版的AVM页面目录│ ├─course-detail/│ │ └─course-detail.stml // 课程详情页│ ├─course-list/│ │ └─course-list.stml // 课程列表页│ ├─course-pay/│ │ └─course-pay.stml // 购买课程页│ ├─course-preorder/│ │ └─course-preorder.stml // 预约课程页│ ├─order-detail/│ │ └─order-detail.stml // 用户订单详情页│ ├─order-list/│ │ └─order-list.stml // 用户订单列表页│ ├─pay-result/│ │ └─pay-result.stml // 下单(支付)结果页│ ├─play-video/│ │ └─play-video.stml // 视频播放页│ ├─preorder-detail/│ │ └─preorder-detail.stml // 用户预约详情页│ ├─preorder-list/│ │ └─preorder-list.stml // 用户预约列表页│ ├─tab-home/│ │ └─tab-home.stml // tab页-0 入口主页│ ├─tab-course/│ │ └─tab-course.stml // tab页-1 课程分类列表│ ├─tab-user/│ │ └─tab-user.stml // tab页-2 用户主页├─script/ // JavaScript脚本目录│ ├─UserManager.js // 用户数据管理类│ └─req.js // 项目请求交互文件└─config.xml // 应用配置文件
源码链接:https://github.com/apicloudcom/education-training/tree/main/docs