【文档说明】HTML5移动前端开发基础与实战第8章课件.pptx，共(13)页，5.648 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2947.html

以下为本文档部分文字说明：

第8章移动App开发基于HTML5的混合式移动App开发可跨平台部署、大幅降低开发成本。本章简要介绍使用HBuilder开发移动App的流程，并在Android模拟器（海马玩）上迚行测试，希望读者借此打开通向混合式移动App开发的道路。HTML5移动前端开发基础不实战（微课版）1掌握H

builder安装及使用。2掌握海马玩模拟器安装及使用。学习目标3掌握在Hbuilder下开发移动App的流程。HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。配合其M

UI前端框架和5+Runtime产品，可以快速地开发移动App（Android和iOS）。8.1Hbuilder8.1.1Hbuilder特点HBuilder本身主体由Java编写，基于Eclipse，兼容Eclipse插件。HBuilder通过完整的诧法提示、代

码输入法、代码块等大幅提升HTML、JavaScript、CSS的编写效率。可在HBuilder官网下载最新版的HBuilder。HBuilder目前有两个版本，一个是Windows版，一个是Mac版。下载的时候根据自己的电脑选择合适

的版本。8.1.2Hbuilder安装Hbuilder下载安装。演练8.1海马玩模拟器（Droid4X）是一款安卓模拟器软件。该模拟器支持在电脑上安装运行安卓手机应用。8.2海马玩模拟器8.2.1海马玩模拟器特点海马玩模拟器同时支持Windows和MacOS两大平

台。海马玩模拟器支持多点触控，只需简单设置快捷键，就可以充分体验游戏过程中键盘操作的快感。海马玩支持虚拟多核，能兼容市面上绝大多数安卓游戏和应用。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的galle

ry（图片轮播）组件，新闻列表使用的是MUI的medialist（图文列表）组件。因为本书丌讲述后端代码，新闻列表只是从自定义变量中组合数据显示。实际开发中一般通过后台从数据库动态获取数据并显示。使用HBuilder创建一个带底部导航、轮播图和新闻列表的移动A

pp项目。演练8.4本章思考喜欢Hbuilder吗？如果喜欢，那就深入了解并学习。类似Hbuilder这样的开发工具还有哪些呢？自行搜索下，有你喜欢的吗？喜欢就深入了解并学习。12学习进步！HTML5移动前端开发基础不实战（微课版）