从零开始第一次开发App经验（基于HBuilder开发的混合App+SSM框架的JAVA后台）【一】

前一段时间朋友有一个不错的创意，想和我合作开发一款app用于项目的实施，我听了之后觉得可以做一下，因为时间比较紧，算得上临危受命。但是我一直都是搞JAVA Web方向，对于手机App一窍不通，这时候着实犯难了。

想了好几个方案，按照性能来说肯定是原生App性能最好，如果说开发速度快效率高，可以选择web App，综合这两种的优点，还有一种混合App开发。
这里简单介绍一下目前主流的App开发的三种方式：

1. Native App 即 原生App开发：
   优点：性能稳定、用户体验佳、流畅、访问本地资源简单直接…总而言之就是要是追求性能和极度契合手机系统，原生的就没错了。
   缺点：开发周期长，难度大，针对不同的手机系统要开发不同版本的App（比如安卓版的和IOS版的），维护成本也高。
2. Web App 即 网页App开发
   优点：开发成本低，开发速度快，内容修改十分容易，很容易跨平台。 缺点：简单来说web app就是网页套了一个app的外壳，里面都是web页面，app体验受限于网络速度。当然我认为针对不同的使用场合，劣势也是优势，优势也是劣势，比方说用来展示内容的app，用web
   app就可以了，修改网页上的内容，app上直接改变，都不用发布新的app版本。但是功能较复杂的app，就不再适合用web app了。
3. Hybrid App 即 混合型App开发
   优点：半原生半web，所以优点也是一半一半，native +js或其他语言，而且是编译的时候js调用本地java代码，属于伪原生，但是性能又比web要好一些，程序员写一套代码可以编译成安卓和ios两个版本的app，开发速度快，效率高。
   缺点：优点里面也说了缺点，属于伪原生，距离真正的原生app用户体验肯定是要差一些的，毕竟是在原生代码上又封装了一层，开发者只需要js调用原生代码就可以了。
   结合当前的开发需求，再去学习开发原生App的成本太高，所以我最终选择了混合App开发的方式，主流的开发工具也有很多种，我选择了HBuilder，其他的还有API cloud等等。
   所用工具：Hbuilder、Eclipse

下载地址：

Hbuilder：https://www.dcloud.io/hbuilderx.html

首先说明：

就算再简单还是要有html、js、css基础的，如果不会需要先网上补充一下这些知识

接下来进入正文：
01

有HbuilderX和Hbuilder，我用的是Hbuilder，因为觉得语法提示更好一些。

打开Hbuilder，首先点击文件，新建一个移动App，填写完应用名称和存放位置，下面选择mui登录模板，点击完成，可以先创建一个带选项卡的页面看看效果。

这时候我们就获得了一个最原始的程序框架，结构如下：

关于文件夹就不再多讲，都是按名称分门别类存放所用文件，包含了登录页面、注册页面、登录成功页面、设置页面等等，如果新建应用时选择的是空模板，则这些文件夹里面都是空的，现在css、js、font等等这些文件夹下面的文件都是mui登录模板所用的文件，直接就可以真机运行看效果。

02

关于真机运行：
需要数据线连接上手机，然后点开login.html，点击运行->真机运行->正常情况下就能看到自己的手机在列表里了，不正常情况参照真机运行里面的故障排查指南。
点击列表里面自己的手机，第一次运行的时候会先在手机上安装一个基座，相当于app模拟运行的环境，可以看到控制台上会有进度的相关信息。一切安装完毕会自动打开手机上的app，这时候就可以看到一个基础的底部选项卡页面了。
当然还有更简单的办法，在暂时不调用手机原生功能的情况下，比如调用摄像头、GPS定位等功能的时候，只想看页面效果，可以在Hbuilder右侧上方，看到

把它改成边改边看模式，就可以看到：

这样直接就能看到页面的效果，我更习惯把上面地址栏的地址直接复制到谷歌浏览器打开，在里面调试：要选择红框内的手机模式

这时候其实一个简单的登录模板的app就做好了，看模板里面的js代码，后期还可以添加第三方登录，微信QQ之类的。

里面的界面样式用的是mui，

官方文档：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/91，

js里封装的是HTML5+引擎，可以让开发者用js直接调用原生功能，非常方便，官方文档：

http://www.html5plus.org/doc/h5p.html

基础就说这么多，接下来下一篇就直接上项目了。
另外如果有兴趣一起进步学习，请搜索名称关注我的公众号：IT成长日记
或扫码：