APICloud 多端应用模板合集
本仓库中包含的项目都是基于APICloud多端技术开发的应用。 建议直接点击对应仓库检出单个项目作为学习研究。 如需在本仓库一并检出子模块,使用
clone
命令时请添加--recursive
参数。
hello-app ![](https://camo.githubusercontent.com/76e63e63192e253a487e6aaba89c187b586eb3d39992629d808dbeb53d5cd4f6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f68656c6c6f2d6170703f7374796c653d736f6369616c)
1. 《快速上手》源码地址
https://github.com/apicloudcom/hello-app
项目说明
该项目是为了向大家介绍多端技术 AVM.js 上手演示项目文档。 仓库重点关注 README.md 中的上手步骤文本。 可以通过该文档,从 0 到 1 搭建项目工具环境、创建项目、预览体验等基本操作。
另外还附带了提交打包等后续操作说明。推荐新手阅读使用。
avm-simple ![](https://camo.githubusercontent.com/26792c86fc5601552be2e2a829e5b9382dee09e8fe1fb1503860dc77be6d1203/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f61766d2d73696d706c653f7374796c653d736f6369616c)
2. 《组件合集》源码地址
https://github.com/apicloudcom/avm-simple
项目说明
该项目是一个组件 demo 、经典模板和生鲜电商完整案例的小合集。
在项目的 组件集合示例 中展示了基础组件的调用效果,可以体验和预览组件的样式和交互。
项目其他文件夹还包括了一些常用的页面模板,例如:仿朋友圈导航栏、仿淘宝首页和聊天界面等。
company-display ![](https://camo.githubusercontent.com/4445a3fc2e3ccca2e0a119c21cee854b35687499f7f4ce8dd21bb55a453a8240/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f636f6d70616e792d646973706c61793f7374796c653d736f6369616c)
3. 《企业展示》源码地址
https://github.com/apicloudcom/company-display
项目简介
此项目是一个企业展示类型的应用,主要功能包括企业信息展示、案例展示、加盟申请等。
技术要点
项目中前端采用 avm 多端开发技术进行开发,要点包括 TabLayout 布局、swiper 轮播图、rich-text 富文本、scroll-view 滚动视图、下拉刷新等。
截图展示
ordering-food ![](https://camo.githubusercontent.com/28d2374b3796a1aa558ad1cee4b1734d3ff7af1aa67b3d18c3a0875bd88d4826/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f6f72646572696e672d666f6f643f7374796c653d736f6369616c)
4. 《堂食点餐》源码地址
https://github.com/apicloudcom/ordering-food
项目说明
此项目是一个餐饮商户单商家堂食下单应用。 主要功能包括浏览商家主页信息、查看推荐菜品、下单商品、取餐等号等功能。 可以适用于小吃快餐餐饮商户的堂食点单管理,也可以进行稍微二开成为外卖、店铺或者是虚拟服务等电商小应用。
技术要点
项目中前端技术要点包括跨页面通信、全局购物车数据管理、自定义复用组件编写和辅助助手函数等等。 使用 APICloud 多端技术实现了一套代码,多端运行。 支持编译成 Android & iOS App 以及微信小程序。 项目后端使用的是
APICloud 数据云3.0 来构建的:
通过编写云函数自动管理维护接口和数据,详细可以参考数据云的文档。也可以自定义后端接口,通过自写服务器完成开发。
截图展示
online-dress ![](https://camo.githubusercontent.com/ee8964c6579cfc285ecd4d678a65fd7f393e3078583ba0cb2ae72edeadcf347a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f6f6e6c696e652d64726573733f7374796c653d736f6369616c)
5. 《服饰商城》源码地址
https://github.com/apicloudcom/online-dress
项目说明
此项目为在线服饰商城类应用,主要功能包括商品展示、商品搜索、购物车、订单管理等。适用于单商家电商类应用开发,快速构建自己的商城应用。
技术要点
项目中前端采用 avm 多端开发技术进行开发,要点包括 TabLayout 布局、swiper 轮播图、rich-text 富文本、scroll-view 滚动视图、下拉刷新、组件封装等。使用 APICloud
多端技术进行开发,实现一套代码多端运行,支持编译成 Android & iOS App 以及微信小程序。项目后端则是使用的 APICloud 数据云 3.0 自定义云函数来构建的。
截图展示
education-training ![](https://camo.githubusercontent.com/dcd8607bb0d7fa8dc863e0adbe8d1a55bf6ab59767554f696d9a2f01238b66a1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f656475636174696f6e2d747261696e696e673f7374796c653d736f6369616c)
6. 《教育培训》源码地址
https://github.com/apicloudcom/education-training
项目说明
此项目是一个教育培训的机构服务应用,包括了线上线下课的课程展示、师资力量的名师名片展示、在线预约、在线下单购买课程、用户订单预约管理等功能。
技术要点
本项目在开发过程中,在“能拆就拆”的**下,对项目进行细粒度的组件化拆解。 可以从中了解到组件拆分逻辑和一些操作技巧,对自定义组件进行巩固。
- 组件的高级使用方法:诸如使用条件渲染、引入自定义函数对模板节点进行处理和继承,以及特殊节点 children 等使用 。
- 组件的设计流程:例如实现 a-tabs ,对于复杂的组件可以先定义使用外观,然后反向填充细节逻辑。
- 组件的设计原则:多出重复的页面结构就需要考虑提炼和归纳。设计出来的组件需要易用、简洁。
截图展示
fresh-ec ![](https://camo.githubusercontent.com/ce200b9335e81e0101a1ff6144e979f2bad0cf99ce1bf8a0fa6112929e9da8f0/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f66726573682d65633f7374796c653d736f6369616c)
7. 《生鲜电商》源码地址
https://github.com/apicloudcom/fresh-ec
项目说明
此项目为生鲜电商类应用,主要功能包括商品列表、商品详情展示、购物车、登录注册、个人中心等。也是2.x版本的培训课程项目升级到3.x的一个典型案例。
技术要点
项目中前端采用 avm 多端开发技术进行开发,要点包括 scroll-view 滚动视图、下拉刷新、输入处理、swiper 轮播图、网络请求封装等。 使用 APICloud 多端技术进行开发,实现一套代码多端运行,支持编译成 Android
& iOS App 以及微信小程序。
截图展示
group-ec ![](https://camo.githubusercontent.com/464316de51706a7647b436007b41741050fe3dd37c54b960d7b5d28ea830a4cf/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f617069636c6f7564636f6d2f67726f75702d65633f7374796c653d736f6369616c)
8. 《拼团商城》源码地址
https://github.com/apicloudcom/group-ec
项目说明
此项目为拼团商城类型,主要功能包括商品分类、商品详情、商品搜索、拼团、订单管理等。
技术要点
项目中前端采用 avm 多端开发技术进行开发,要点包括 TabLayout 布局、swiper 轮播图、rich-text 富文本、scroll-view 滚动视图、下拉刷新、组件封装等。使用 APICloud 多端技术进行开发,实现一套代码多端运行,支持编译成 Android & iOS App 以及微信小程序。
截图展示