1、第8章 移动App开发基于HTML5的混合式移动App开发可跨平台部署、大幅降低开发成本。本章简要介绍使用HBuilder开发移动App的流程，并在Android模拟器（海马玩）上进行测试，希望读者借此打开通向混合式移动App开发的道路。HTML5移动前端开发基础与实战（微课版）1掌握Hbuilder安装及使用。2掌握海马玩模拟器安装及使用。学习目标3掌握在Hbuilder下开发移动App的流程。HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。配合其MUI前端框架和5+Runtime产品，可以快速地开发移动App（Android和iOS）。8.1 Hbui
2、lder8.1.1 Hbuilder特点HBuilder本身主体由Java编写，基于Eclipse，兼容Eclipse插件。HBuilder通过完整的语法提示、代码输入法、代码块等大幅提升HTML、JavaScript、CSS的编写效率。可在HBuilder官网下载最新版的HBuilder。HBuilder目前有两个版本，一个是Windows版，一个是Mac版。下载的时候根据自己的电脑选择合适的版本。8.1.2 Hbuilder安装Hbuilder下载安装。演练8.1海马玩模拟器（Droid4X）是一款安卓模拟器软件。该模拟器支持在电脑上安装运行安卓手机应用。8.2 海马玩模拟器8.2.1 海
3、马玩模拟器特点海马玩模拟器同时支持Windows和Mac OS两大平台。海马玩模拟器支持多点触控，只需简单设置快捷键，就可以充分体验游戏过程中键盘操作的快感。海马玩支持虚拟多核，能兼容市面上绝大多数安卓游戏和应用。8.2.2 海马玩模拟器安装海马玩模拟器下载安装。演练8.2本节简要介绍使用HBuilder开发移动App的流程，并部署在海马玩模拟器上进行测试。关于如何详细开发移动App，请关注编者后续图书。8.3 移动App开发流程8.3.1 创建移动App模板项目5G使用HBuilder创建移动App模板项目。演练8.38.3.2 带底部导航、轮播图和新闻列表的App本节创建一个带底部导航、轮播图和新闻列表的入门App。轮播图使用的是MUI的gallery（图片轮播）组件，新闻列表使用的是MUI的media list（图文列表）组件。因为本书不讲述后端代码，新闻列表只是从自定义变量中组合数据显示。实际开发中一般通过后台从数据库动态获取数据并显示。使用HBuilder创建一个带底部导航、轮播图和新闻列表的移动App项目。演练8.4本章思考喜欢Hbuilder吗？如果喜欢，那就深入了解并学习。类似Hbuilder这样的开发工具还有哪些呢？自行搜索下，有你喜欢的吗？喜欢就深入了解并学习。12学 习 进 步！HTML5移动前端开发基础与实战（微课版）
