从零开始第一次开发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登录模板,点击完成,可以先创建一个带选项卡的页面看看效果。

这时候我们就获得了一个最原始的程序框架,结构如下:
从零开始第一次开发App经验(基于HBuilder开发的混合App+SSM框架的JAVA后台)【一】_第1张图片

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

02

关于真机运行:
需要数据线连接上手机,然后点开login.html,点击运行->真机运行->正常情况下就能看到自己的手机在列表里了,不正常情况参照真机运行里面的故障排查指南。
点击列表里面自己的手机,第一次运行的时候会先在手机上安装一个基座,相当于app模拟运行的环境,可以看到控制台上会有进度的相关信息。一切安装完毕会自动打开手机上的app,这时候就可以看到一个基础的底部选项卡页面了。
当然还有更简单的办法,在暂时不调用手机原生功能的情况下,比如调用摄像头、GPS定位等功能的时候,只想看页面效果,可以在Hbuilder右侧上方,看到
从零开始第一次开发App经验(基于HBuilder开发的混合App+SSM框架的JAVA后台)【一】_第2张图片
把它改成边改边看模式,就可以看到:
从零开始第一次开发App经验(基于HBuilder开发的混合App+SSM框架的JAVA后台)【一】_第3张图片

这样直接就能看到页面的效果,我更习惯把上面地址栏的地址直接复制到谷歌浏览器打开,在里面调试:要选择红框内的手机模式
从零开始第一次开发App经验(基于HBuilder开发的混合App+SSM框架的JAVA后台)【一】_第4张图片

这时候其实一个简单的登录模板的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成长日记
或扫码:
从零开始第一次开发App经验(基于HBuilder开发的混合App+SSM框架的JAVA后台)【一】_第5张图片

你可能感兴趣的:(JAVA,APP,java,app,HBuilder)