统软云多终端开发教程-教育和培训APP开发

APP开发


浏览:730 次

本项目的。它提供在线浏览机构信息、杰出教师风采以及课程预订和订购等功能。

项目前端采用多终端开发技术,可编译成Android&IOS App和微信小程序;后端使用API Cloud 3.0云功能自定义接口。

技术要点在本项目的开发过程中,在“尽可能拆卸”的理念下,以细粒度的方式拆卸项目。您可以学习组件拆分的逻辑和一些操作技巧,以合并用户定义的组件。

设计草图

源代码目录结构描述了项目源代码位于该仓库的小部件目录中。该目录下的文件结构如下:

项目源代码位于该仓库的小部件目录中。该目录下的文件结构如下:

©-component////项目通用组件目录

│∑-img///组件的常用材料

│ ├─a卡。stml//[基本组件]卡组件

│ ├─a细胞。Stml//[基本成分]细胞成分

│ ├─a-细胞群。Stml//[基本组件]单元格容器组件

│ ├─a标题。Stml//[基本组件]头部导航组件

│ ├─a部分。Stml//[基本组件]章节组件

│ ├─a选项卡。Stml//[基本组件]选项卡组件

│ ├─a选项卡。Stml//[Basic Component]选项卡容器组件

│ ├─b课程。Stml//[业务组件]课程详细信息组件

│ ├─b-通知。Stml//[业务组件]提醒面板组件

│ ├─c课程列表。Stml//[复合组件]课程列表页

☆ - images///图像材质图标资源目录

☆ - pages////新建AVM页面目录

│ ├─课程详情/

│ │ └─课程详情。stml//课程详情页

│ ├─课程列表/

│ │ └─课程列表。Stml//课程列表页

│ ├─课程工资/

│ │ └─课程工资。Stml//购买课程页面

│ ├─课程预定/

│ │ └─课程预定。Stml//课程预约页面

│ ├─订单详细信息/

│ │ └─订单详情。Stml//用户订单详情页

│ ├─订单列表/

│ │ └─订单列表。Stml//用户订单列表页面

│ ├─支付结果/

│ │ └─支付结果。Stml//下单(付款)结果页面

│ ├─播放视频/

│ │ └─播放视频。Stml//视频播放页面

│ ├─预订单详情/

│ │ └─预购详情。Stml//用户预约详情页

│ ├─预订单列表/

│ │ └─预订单列表。Stml//用户预约列表页面

│ ├─选项卡主页/

│ │ └─选项卡主页。Stml//选项卡页-0条目主页

│ ├─翼片航线/

│ │ └─标签课程。Stml//tab-1课程分类列表

│ ├─选项卡用户/

│ │ └─选项卡用户。Stml//tab页-2用户主页

☆ - script//JavaScript脚本目录

│ ├─用户管理器。Js//用户数据管理类

│ └─要求。Js//项目请求交互文件

└─配置。Xml//App配置文件

使用以下过程将统软云 Studio 3用作开发工具。

下载源代码。

在开发工具中创建一个新项目,将源代码导入新项目,并更新配置。xml中的appid是项目的appid。

使用AppLoader预览实机同步调试。

或者提交项目源代码,并为当前项目云编译一个自定义加载器,以进行实时同步调试预览。

云编译生成Android和IOSApp和微信小程序源代码包。

开发详细信息选项卡组织

如果您已经注意到统软云官方github上最初几个模板项目的源代码,那么您已经熟悉TabBar的实现。

通过定义应用Json来创建Tabbar主页结构。在此文件中,您可以定义主页结构的一些特定参数。包括每个选项卡页的路径、名称和底部导航图标资源信息。

如果您需要调整小程序的本地Tabbar结构,这是最佳选择。如果项目没有小程序调整计划,您还可以使用原始FrameGroup进一步自定义相关的切换行为和逻辑。

网络请求req.js

通常,项目的数据是通过与服务器的通信获得的。通过本地请求库获取相关数据,处理并将其呈现到接口。统统软云促进请求(会话、缓存、异常等)。具体的打包方法和实现可以根据个人团队偏好或接口通信规则来开发。本项目的逻辑仅供参考。

表0入口主页

主页的结构非常简单,分为四个部分。

头部导航栏

头部转盘

中间类别滑块

下名师卡滑杆

关于富文本的底部

为了进一步了解技术细节和实现,您可以查看github上的源代码:https://github.com/统软云com/education-training/tree/main/docs

APICI的其他项目案例