H5APP即是一种框架型APP开发模式(HTML5APP框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。
原生APP又称NativeApp,该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。
1、开发方面的区别(这个地方太专业啦,请教了团队的开发小伙伴)
目前ReactNative开发越来越火,微信小程序是基于ReactNative开发的,体验接近原生APP,发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件,也能顺利发布到苹果APPstore。
移动WebApp
1、因为运行在移动设备的浏览器上,所以只需要一个开发项目
2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,RubyonRails,Python)
3、这里可没有标准的SDK,基本任意选择别忘了有一些跨平台的开发工具,比如PhoneGap,SenchaTouch2以及AppceleratorTitanium等等。
原生App
1、每一种移动操作系统都需要独立的开发项目
2、每种平台都需要独立的开发语言。Java(Android),Objective-C(iOS)以及VisualC++(Windowsphone)等等
3、需要使用各自的软件开发包,开发工具以及各自的控件
2、能力方面的区别
移动WebApp
只能使用有限的移动硬件设备功能。
原生App
能够与移动硬件设备的底层功能,比如个人信息,摄像头以及重力加速器等等。对于这一点感触很深刻,2016年做新年H5营销小活动的时候,就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。
3、获取方法的区别
移动WebApp
1、从移动设备上的浏览器访问
2、不需要安装额外的软件
3、软件更新只需要服务器就够了
4、因为现在没有什么商品或卖场提供这种App,不过一般都是嵌套在系统内部,或者内部系 统中使用
5、跨平台开发,用户不需要去卖场来下载安装App
6、需要过度依赖网络,没有任何缓存数据
7、任何时候都可以发布App,因为根本不需要官方卖场的审核
8、如果你已经有了一个WebApp,你可以使用responsivewebdesign来辅助改进(这也是优势?)
9、所有的用户都是用同样的版本
原生App
1、直接下载到设备
2、以独立的应用程序运行(并不需要浏览器)
3、用户必须手动去下载并安装这些原生App
4、有一些商店与卖场来帮助用户寻找你的App,appstore里面应有尽有。
5、原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架
6、手机用户无法上网也可访问APP应用中以前下载的数据。
7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)
8、APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。
9、用户可以自由地选择是否更新软件版本,所以会出现不同用户同时使用不同版本的情况
即使两者之间有很大的区别,即使H5有一大堆的坑和问题,但是仍旧不妨碍移动WEB无所不在,移动web是目前唯一的支持各种设备访问的平台,也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与PC系统任务有效的结合在一起。而原生nativeapp可以充分利用设备的特性,这一点是它得天独厚的优势。
正式因为它有复杂多变的CSS样式消耗了大量性能,它才有一个更有竞争力的优势——它带来了多样性的排版,能够细致到每一个字宽行高和风格的像素级处理,能够给你带来不一样的图文汇合的排版。
手机 App 的技术栈可以分成三类
原生技术栈指的是,只能用于特定手机平台的开发技术。比如,安卓平台的 Java 技术栈,iOS 平台的 Object-C 技术栈或 Swift 技术栈。
混合技术栈指的是开发混合 App 的技术,也就是把 Web 网页放到特定的容器中,然后再打包成各个平台的原生 App。所以,混合技术栈其实是 Web 技术栈 + 容器技术栈,典型代表是 PhoneGap、Cordova、Ionic 等框架。
跨平台技术栈指的是使用一种技术,同时支持多个手机平台。它与混合技术栈的区别是,不使用 Web 技术,即它的页面不是 HTML5 页面,而是使用自己的语法写的 UI 层,然后编译成各平台的原生 App。
这个技术栈就是纯粹的容器技术栈,React Native、Xamarin、Flutter 都属于这一类。学习时,除了学习容器的 API Bridge,还要学习容器提供的 UI 层,即怎么写页面
总结:H5 开发主要用在混合技术栈。但是,跨平台技术栈的某些容器也会用到(比如 React Native),因为它们的 UI 层借鉴了 Web 模型。
另外,混合技术栈和跨平台技术栈的基础,都是原生技术栈,因为最终都要编译成原生App。所以,不管使用哪一种技术栈,多多少少要了解一些各平台的原生技术。
不管什么技术,最终在 App 里面显示网页,一定需要一个网页引擎,这样才能解析网页。通常情况下,App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件,专门用来显示网页。应用程序的界面,只要放上 WebView,就好像内嵌了浏览器窗口,可以显示网页。不同的 App 技术栈要显示网页,区别仅仅在于怎么处理 WebView 这个原生控件。
不同系统的 WebView 控件名称不一样,安卓系统就叫 WebView,iOS 系统有较老的 UIWebView,也有较新的 WKWebView,作用都是一样的,差异在于功能的强弱。
html5+javascript,可以借助appscan、apicloud这种跨平台开发工具,可以同时开发多端。使用HTML5+开发的移动App并非mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上,而移动App的文件存放在手机本地,编写移动App的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。
用个更形象的列子,web app仍然是b/s结构,而移动App是c/s结构甚至是完全脱线的单机应用。
这或许有点超过一些人的想象,他们认为HTML就是web、就是b/s,事实上javascript早已可通过nodejs等技术运行在服务器侧,而在HBuilder的移动App里,HTML、JS等文件也可以被打包成原生安装包。
当然这些移动App里某些页面也可以继续从服务器端以网页方式下行,就像任何原生应用(如微信)都可以内嵌网页一样。
所以mobile web,在HBuilder里新建项目时,属于web项目。不要放置到移动App项目下。mobile web项目也不能真机联调和打包。
智游教育:举几个例子说明mobile web和移动App的区别。
例1:把一个mobile web项目,打包成移动App。
1. 在HBuilder里新建一个web项目,把mobile web代码放进去。
2. 在HBuilder里新建移动App
3. 在新建的移动App下找到manifest.json,将其中的入口页面配置为mobile web的网络地址。
4. 然后点发行打包,就得到一个移动App的安装包。除了有个安装包和桌面有个快捷方式外,与浏览器的体验不会有其他区别。
5. 不过注意,这样的移动App体验很差,它在页面跳转时会像浏览器那样切换并且白屏,它完全无法脱线使用,没有网络时点开这个app只能看到一片白板。这样的app在Apple的Appstore审核时是无法通过的,其他大的安卓市场也不会允许发行。
例子2:正规的移动App
1. 在HBuilder里新建移动App项目
2. 在移动App里编写html、Js、css文件,本地js通过ajax方式请求服务器数据,通过plus.net对象避开跨域限制
3. 移动App里的js可以通过plus对象调用手机原生能力
4. 编写好的移动App点打包变成安装包,这才是一个体验良好的、可上线的移动App。