【初探IONIC】不会Native可不可以开发APP?

前言

Hybrid技术流行已经有一段日子了,楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开,Hybrid已经是大大提升开发效率的开发方式了,但是仍然需要至少一个IOS与Andriod,那么可不可以只使用H5相关的知识就能做一个APP出来呢?答案是可以的。

什么是cordova?

cordova为一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员,其成本节约也是不可忽视的!

PS:很多时候一些朋友也会说到phoneGap,其实phoneGap就是指cordova

其实cordova与Hybrid是一致的,只不过Hybrid中的IOS和Andriod Webview容器是我们Native同事开发的,而cordova打包后的Webview容器是公司开发的,这里所谓跨平台,其实是有一个公司做出了这种平台性产品做出了支撑。

这里又会引出另一个问题,哪个好?

孰优孰劣得看应用场景,这个和是否使用外面提供的第三方的前端UI插件是一致的,外面的插件大而全,但是性能方面可能差点,自己做的话,定制化需要或者性能方面可能更好点,就目前情况来说,稍微有点实力的公司都会由自己的Native团队做Hybrid Webview容器壳,一些创业团队或者刚起步的移动团队会使用Cordova试水。

PS:Cordova最适合的场景是前端接外包!!!

整个架构的话依旧跳不出这张图,基础应用使用H5开发,Native提供接口,交互会有一个phone gap bridge层。

IONIC

Ionic是一个基于Cordova的移动开发框架,他的一大优势就是提供了很多UI,这样对于开发者来说就比较省心了,其次Ionic使用的angularJS作为配套框架(强依赖),所以对于前端来说是很不错的一个体验。

当然,Ionic在一些Andriod机上表现不是很好,因为是内嵌资源,作为APP来说加载速度较快还无所谓,但是同一套代码如果要用做H5站点的话,angularJS的尺寸就是很大一个制约。

这里做完了简单介绍,我们还是简单实践一把,体验下他的威力。

更多的学习教程:http://www.runoob.com/ionic/ionic-tutorial.html

简单实践

安装Ionic

我们去git上下载源文件(release中):https://github.com/driftyco/ionic/tree/master/release

我们在目录下新建一个demo文件夹,新增index.html:

 1 <!doctype html>
 2 <html  ng-app="ionicApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ionic demo</title>
 6     <link href="../css/ionic.min.css" rel="stylesheet" type="text/css" />
 7     <script src="../js/ionic.bundle.min.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         angular.module(‘ionicApp‘, [‘ionic‘]).controller(‘MyCtrl‘, function ($scope) {
10         });
11     </script>
12 </head>
13 <body ng-controller="MyCtrl">
14     <ion-header-bar class="bar-positive">
15     <h1 class="title">Hello World!</h1>
16     </ion-header-bar>
17     <ion-content>
18         <p>我的第一个 ionic 应用。</p>
19     </ion-content>
20 </body>
21 </html>

从这里可以看出Ionic几个特点:

① 强依赖angularJS(前面说过了)

② body部分依赖于IScroll,至于IScroll会有什么优势与劣势,我们在之前讨论过:

http://www.cnblogs.com/yexiaochai/p/3762338.html

http://www.cnblogs.com/yexiaochai/p/3764503.html

③ 有自己一套UI体系

第一眼的感觉是:

① 该框架比较完善,开发效率必然很高

② 不能肯定是否适合客户端产品,因为js与css尺寸皆很大

③ 视觉样式比较固定,如果一个公司有自己的规范可能不太适合

④ 因为angular与IScroll固有的特点,做出来的应用可能体验不会太好

Ionic安装

上面我们在浏览器简单感受了下Ionic,接下来我们需要将之放到移动设备上运行,这里的第一步是环境安装。

进行这个操作前,得保证电脑具有Node环境,然后执行命令行:

npm install -g cordova ionic

然后我们随便找一个目录,创建我们第一个项目myAPP:

ionic start myApp tabs

这里需要安装Andriod开发环境,不然的话,下面几个命令会报错,如果有Andriod环境的话,就能成功运行了:

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

如果正常的话,技能弹出模拟器:

如果有心做Ionic应用,IOS&Andriod环境都是需要安装的,可能还需要使用eclipse,这里各位看看文档吧,这里不多说。

结语

因为我这边想要对Hybrid做更深入的了解,所以今天花了时间来简单了解了下Ionic,也只是很简单的了解,如果真的要生产应用各位可以去上面的网址认真学习吧,以我的经验,有angular的基础的话,学习周期在一周左右便可入坑开发了!!!

后面我们将更加深入的研究各大公司Hybrid一些实现,有兴趣的朋友可以持续关注。

文中只是个人观点,有误的话请各位指正,不足请各位提出。

时间: 2024-10-06 18:02:03

【初探IONIC】不会Native可不可以开发APP?的相关文章

用React Native编写跨平台APP

用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时.原生组件渲染的应用程序的框架.它基于React,Facebook的JavaScript的库,为的是构建用户接口,而并不是以浏览器为目标,它是以手机平台为目的. 换句话说,假设你是一个web开发人员,你能够使用React Native去编写干净.高速的移动APP,而且能够体会到熟悉的框架和单个的JavaScript的代码库. 在这之前,我们已经听到用诸如Cordova或者是Titaniu

ionic react-native和native开发移动app那个好

ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家补充指正 一. 跨平台特性    ionic : write once, run anywhere ( 一次开发,随处运行,学习成本低 会html css js就可以学会) 不涉及到系统级的开发的话, 确实是一次开发 处处运行,如果涉及到系统级API调用以及项目配置(如 ios plist文件)则需

React Native 技术 开发跨平台 Native App 初探

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/64190798 我们已经了解像 Titanium 和 PhoneGap 等框架,它们能让开发者用 Web 技术构建移动应用.这是一个优势,支持开发者使用原先网络和移动开发的相关技术.仅如此,相同的代码库经过小幅度的修改便能适用多个平台--这就是著名的一次编写,到处运行.然而,当涉及到构建应用的性能时,这些框架的缺点显露无遗,尽管它们有一些吸引力,但却一直更适用于构建原生应用.Rea

如何评价ionic和react native?

Q:对于开发hybird app首选哪个好?是ionic还是react native?如何评价ionic和react native? A: 我看好React系,React系以正确地姿势,专注地做了正确的事情,未来前途光明,这里不多吹 我是Angular黑,Google是一家Java公司,Angular出生的姿势就是非常有问题的(让Java开发也能快速开发前端),Angular很好的达成了他的目的,让前端开发看上去像后端一样,但问题是前端开发终究是前端开发,不学前端开发永远做不好前端开发.后端开发

mui开发app之js将base64转图片文件

之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后图片是保存为base64格式的,这是h5 canvas建议使用的图片传输方式. 很多时候很多api,比如mui中第三方插件map中有一个setIcon传入的必须是本地的图片文件地址,目前的第三方地图系统任然不支持base64的标注图,所以折腾了一晚之后终于在native.js中找到了将base64转

react-native —— 在Mac上配置React Native Android开发环境排坑总结

配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Preferences/AndroidStudio* rm ~/Library/Preferences/com.google.android.studio.plist rm -Rf ~/Library/Application\ Support/A

Hybrid APP基础篇(二)-&gt;Native、Hybrid、React Native、Web App方案的分析比较

说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid App React Native App 分析 各大开发模式直观对比 如何选择开发模式 另类的app方案 微网页 微信小程序 其它 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app.web app与native app工具的初步比较与分析 H5.React Nati

基于phonegap开发app的实践

app开发告一段落,期间遇到不少问题,写篇文章记录一下. 为虾米要用phonegap 开发app,至少要考虑android和ios两个版本吧,android偶可以应付,ios表示完全木有接触过,于是时间成本.开发成本上去了.phonegap则解决了这个问题,而且对po主而言,用web开发的方式来搞app很爽啊有木有! 当然,用之前还是要调研下,基于phonegap的app有木有成功案例.大公司里腾讯的qq邮箱ios版,豆瓣的豆瓣音乐人都是基于phonegap.重点看了看豆瓣音乐人,很无耻的反编译

前端开发APP,从HBuilder开始~

内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃, native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃. 前端涉及app的两种方式 适应移动端的网页 大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表, 说的简单点就是对移动