多端开发教程 | 点餐项目源码解析：项目介绍和Tabbar结构（一）原创

多端案例之点餐项目源码的视频讲解。点餐项目呢是一个餐饮商户的单商家堂食下单应用，主要功能包括浏览商家主页信息。查看推荐菜品、下单、商品、取餐、等号等功能。模板包括前后端。其中前端代码使用的是am.GS多端技术开发，同时可以编译为安卓、iOS以及微信小程序，后端使用了API cloud数据云3.0云函数自定义接口。当然也可以使用自建后端服务实现。可以通过API cloud官网文档了解a.GS多端开发技术。也可以通过文档了解数据云的一些相关操作。

下面是应用的一些截图展示。为了让大家更好的了解项目，我使用一个模拟器打开应用体验一下。打开应用，可以看到应用底部有一个底部导航栏。上面有四个板块，分别是首页菜单、购物车和我的。首页呢是商家的主要的基本信息，包括商家的背景图，商家名称，商家的地址以及营业时间等。还有一些限时折扣，推荐菜品的栏目。点击一个商品详情，进入商品详情页。商品详情页包括了商品的图片、商品的名称和描述以及价格。价格右边还有一个计数器，可以用来增加和减少商品的数量。

点击加入购物车，或者是点击结算，直接开始下单。点击菜单进入菜单页面，菜单是左右两栏分栏的结构。左边是展示了菜品分类。右边呢是该分类下的一些菜品信息。菜品右边也有一个加号按钮，可以打开一个加购页面。点击加入购物车或结算。可以对商品进行操作。点击购物车，进入购物车页面。购物车是展示的，我们选购的商品可以点击选择或多选。以及增加或减少数量。还可以做一些编辑移除等操作。

点击结算进入下单页面，可以输入一些备注信息。点击立即支付订单，下单完成。点击查看订单，可以进入用户主页，显示用户信息和用户的一些订单列表。拖动订单列表，可以进行下拉刷新。点击用户昵称，可以管理用户信息，进行退出操作或者进行登录操作。项目的源码可以在API cloud github主页上面找到。可以通过G将源码检出。这里我已经将项目源码检出到本地，并且使用API cloud studio3打开。

我们看到源码目录结构项目的源码在本仓库的目录下。微正目录也是应用了根目录。我们刚才提到可以开发多端应用。同时也可以在小程序上面运行。我们点击应用根目录，选择编译为微信小程序。底部的控制台会显示编译过程。当提示我们编译完成之后，我们可以在右击项目根目录。点击在微信开发工具预览。这里需要填写一下微信的APPID也可以不填写。微信小程序打开之后呢，可以看到和APP端相差无异。

同时也可以做一些相应的操作。我们注意到项目底部有一个底部导航栏，在微信小程序开发中呢，需要使用APP连接上去配置。这样一个开。我们看到源码部分。目录下面有一个configu.XML文件。这个文件呢，是定义了应用的基本信息。包括。APPID以及。入口文件。Content字段代表了入口文件的位置。可以看到，这里的位置是APP连接。我们点击打开APP，点接。可以看到刚才提到的ta的一个信息配置。

这个文件中配置了首页四个页面的一些具体位置。可以看到他们都是在pages目录下面的文件。我们再次点开pages目录。Pages目录就是咱们应用编写页面的具体目录。为了对应微信小程序的结构。我们使用与文件同名的文件夹对它进行一个二次包装。例如goods，就会有一个goodsid的文件夹，把它包起来。点餐项目的首页是由一个可以同级切换的窗口组组成的，在APP原生端上面，我们可以借助frame group来实现这样的一个切换。小程序上面则是使用了一个app.js文件来配置和定义相关的一些属性。为了统一两端的一个差异问题，我们可以在VG的目录下面定义一个APP接。

具体的字段说明可以参考文档。如果只是需要APP端而不需要支持小程序的话，这个配置文件就可选的了，我们可以通过frame group来实现。在这个配置文件中，我们可以看到四个板块，分别是首页菜单、购物车和我的。我们可以在pages目录下面找到这几个文件。