AVM多终端开发|企业App开发案例分析

该项目的前端采用统软云多终端开发技术开发企业App，包括TabLayout布局、滑动木马、富文本、滚动视图、下拉刷新等。

项目的后端是使用API Cloud 3.0自定义云函数构建的。

使用统软云多终端技术开发企业App，实现一套代码的多终端运行，支持编译成Android&IOSApp和微信小程序。项目源代码位于https://github.com/统软云com/company-display仓库的小部件目录。

程序：

用作。

下载此项目的源代码。

在开发工具中创建一个新项目，并将源代码导入到新项目中。注意更新，config xml中的appid是项目的appid。

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

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

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

如果您之前没有接触过统软云开发，建议您首先了解简单项目的初始化、预览、调试、打包和其他操作。请参阅

统软云多终端开发快速入门教程。

网络请求接口封装

在utils/model-Js中，封装了每个网络请求接口的相应方法，例如企业App开发主页，以获得旋转木马图形接口模型GetbannersList，这些方法最终将调用model请求方法，在model中，请求方法统一管理整个项目的请求，包括处理传入的参数，组装请求url，设置请求头，最后调用api。ajax方法启动请求。

例子：

//导入

从“../../utils/Model.js”导入｛Model｝

//调用Model对象方法

模型getbannersList（{}，（res）=>{}）；

一

二

三

四

五

TabBar和导航栏的实现

主页使用TabLayout布局实现TabBar和导航栏。内容字段以xml配置。值是json文件路径。TabBar、导航栏和页面信息在json文件中配置。

//配置.xml

一

二

配置。json文件的内容如下。设置导航栏的背景色和标题文本颜色。设置tabBar的每个项目的图标和文本以及每个项目的相应页面。

{

“”；名称“：“root”，

“”；hideNavigationBar“：false，

“”；导航栏“：{

 quot；背景“：”#fff“，

 quot；颜色“：”#000“，

 quot；hideBackButton“：true

},

“”；选项卡栏“：{

 quot；scrollEnabled“：false，

 quot；背景“：”#fff“，

 quot；阴影“：”#f1f1f1“，

 quot；颜色“：”#5e5e5e“，

 quot；selectedColor“：”#333333“，

 quot；预加载“：0

 quot；框架”：[{

 nbsp；"；名称“：”page1“，

 nbsp；"；url“：“pages/index.stml”，

 nbsp；"；title“："；主页”

}，{

 nbsp；"；名称“：”page2“，

 nbsp；"；url“：“pages/case/case.stm”，

 nbsp；"；title“："；案例”

}，{

 nbsp；"；名称“：”page3“，

 nbsp；"；url“：“pages/join/join.stm”，

 nbsp；"；title“：”特许经营代理；

}]，

 quot；列表“：[{

 nbsp；"；iconPath“：”图像/工具栏/home@no_selected.png ",

 nbsp；"；selectedIconPath“：”images/toolbar/home@selected.png ",

 nbsp；"；文本“：“主页”

}，{

 nbsp；"；iconPath“：”图像/工具栏/case@no_selected.png ",

 nbsp；"；selectedIconPath“：”images/toolbar/case@selected.png ",

 nbsp；"；text“：”Case“”

}，{

&国家统计局