MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

  前  言

JRedu

　随着HTML5的不断发展，移动开发成为主流趋势！越来越多的公司开始选择使用HTML5开发手机APP，而随着手机硬件设备配置的不断提升，各种开发框架的不断优化，也使着H5开发的混合APP的体验越来越趋于原生！那么在本系列博客中，我们就来一探H5开发APP的神秘面纱吧~~

一、 移动APP项目搭建

 

由于我们的H5编写的都是一个个网页，需要使用浏览器打开才能使用，这显然不是APP的使用方式。 那么我们才能将一个手机网站，封装成一个APP呢？ 时下热门的Cordova、PhoneGap、appMobi、WeX5等…都是主流的构建APP工具！但是这些工具有一个共同的特点——使用麻烦！！

所以，我们介绍一种最简便的构建的方式，使用HBuilder一键打包！HBuilder是数字天堂旗下的一款前端开发IDE，其功能强大远超你想象，我们使用的MUI框架，HTML5+框架，都是数字天堂旗下产品，Hbuilder+MUI这对好基友，简直就是绝配！

HBuilder下载地址：http://www.dcloud.io/ ，下载完成后傻瓜式安装即可。

 

1使用HBuilder新建移动APP项目

HBuilder安装成功以后，就可以新建一个移动APP项目啦！点击“文件—>新建—>移动APP”,输入你的项目名称，就可以搭建完成一个移动APP项目啦！

项目的目录结构如下：

 

2manifest.json文件介绍

项目目录中的css/img/js/html等文件就不一一赘述了，建好项目后我们需要新增页面只需要新建HTML文件即可，与开发手机网站的操作一模一样。

而这里面最重要的应该就是manifest.json这个文件了，这个文件几乎包含了我们APP的所有设置，双击打开，可以看到这个界面：

底部的选项卡可以看到，这里面包含了我们APP的名称、版本号、首页文件、应用的图标、应用的启动图片以及我们需要的各种SDK。大家可以根据自己的需求自行设置，此处不再一一赘述。

 

二、APP程序的打包与调试

 

在上面的操作中，我们搭建了一款属于自己的移动APP项目，那么这个项目怎么运行调试，又是怎么打包成Android以及IOS能够安装的APP呢？

 

1将项目打包成APP

首先，我们来看一下如何和将项目打包成一个能够安装的应用程序，这是Hbuilder最便捷的一步，也是杰小瑞老师选择Hbuilder这款IDE的主要原因之一。

选中项目，点击Hbuilder顶部导航栏的“发行—>发行为原生安装包”，可以看到如下页面：

点击打包，就可以在不需要Xcode和 Android SDK的情况下，直接在云端打包。

 

打包完成后，就可以得到安卓的apk文件和苹果的ipa文件。

 

2直接运行调试

上面介绍的是将项目打包成应用程序，但是开发过程中，我们每个页面都要进行大量的调试测试，HBuilder也是支持的。常用的方式有多种，直接通过浏览器调试，通过手机运行调试，通过模拟器调试，都是可以。

点击运行，就可以选择调试模式啦~~此处不再赘述，如果需要可以评论留言哦！