APICloud AVM多端开发 | 《外卖app开发》项目源码深度解析（上）

为了让开发者更加快速的学习和了解APICloud多端开发技术，APICloud平台特别推出一款多端源码-《餐饮点餐》，可以体验一套代码编译Android和iOS app+小程序。

AVM多端框架是在兼容和继承APICloud所有API、模块、技术栈以及用户体验的基础上，我们定义了一套新的代码编写标准(DSL)：基于标准Web Components组件化思想，兼容Vue / React语法特性，通过一次编码，分别编译为Android和iOSAPP、小程序代码，实现多端开发。

《点餐》项目是一个餐饮商户单商家堂食下单应用。 主要功能包括浏览商家主页信息、查看推荐菜品、下单商品、取餐等号等功能。 可以适用于小吃快餐餐饮商户的堂食点单管理，也可以进行稍微二开成为外卖、店铺或者是虚拟服务等电商小应用。

1. List item

商家主页 main_home 的编写

到主页效果图，然后大致分析一下页面结构。源代码在 /widget/pages/main_home/main_home.stml 。 页面主要部分是一个滚动效果，需要使用一个 scroll-view 来做滚动部分的容器。 头部有一个固定头部，并跟随上面提到的 scroll-view 的滚动高度来做透明度反馈。

布局结构使用系统推荐的 flex 布局。有一点需要注意的是， flex 布局的 flex-direction 默认是 column ， 也就是竖着排列的方向，这一点是和传统网页中不一定地方。另外，每一个组件默认会附带 display:flex;属性。

请求接口数据 （数据处理和请求库封装）

在页面的生命周期 apiready 中，有一个 this.getData()的方法，就是在请求数据。

function getData() {
    GET('shops/getInfo')
        .then(data => {
            this.data.shopInfo = data;
        })
}

这个函数主要使用一个 GET 方法实现的。这个方法来自于：

import {GET} from "../../script/req";

这个文件中，主要处理了应用的请求、会话和异常处理等逻辑。 相关业务代码可以只是作为参考，具体项目中根据实际的会话认证方式、服务接口模式以及个人偏好等方式去组织。

拿到数据以后，通过 this.data.shopInfo = data 将数据交给到页面的数据域中，以便于接下来的数据