使用ionic3开始自己的App开发之路

由于这次换工作的原因,我的技术路线也有了一些变化。我原本比较喜欢react,前端js框架方面一直偏向于react。我第一次来到这家公司面试的时候听到他们要开发一款APP,要是用跨平台的技术方案。于是我当时提议的是react native。不过讲实话呢我也不是很有信心做好react native。虽然自己又一些java的基础,还有比较熟悉react,但是react native就看着文档只造过小小的轮子,相比真正的投入生产还比较远。

但是呢我自己相信,这些东西扯来扯去我非就是造轮子,现阶段我又没必要一下子去研究这些框架的底层实现,这些到后来随着经验的加深在深入也来得及。既然不用看源码了,哪它的使用就是看着文档和前任的技术分享去造自己的轮子。当然了,缺乏经验的短处有些时候还是会体现出来的,这个之后再说。就这样,我带着慢慢的自信跟面试官聊了一些跨平台的方案,我相关的知识看的还是比较多。

后来没过多久,我接到了他们的offer,并给出了同意的答案。等我过去之后面试官跟我聊,说他准备使用ionic3+angular4这套技术栈。实话讲我对ionic的认识还停留在ionic1时代,angularjs的缺点对很多人都清楚。后来也听说过angular+typescript开发的强大之处,知识没有深入去理解。既然技术主管决定使用这套技术栈,而且很有自信的跟我讲这套技术栈,说明我上次面试的表现还是可以的,他还是肯定了我的技术水平。他选择这套我不熟悉的技术栈,还选择了我说明他认为我能快速学习并能投入到生产当中,这是对我学习能力的肯定。一边很高兴,一般有些担忧,毕竟这套技术栈我并不熟悉,有很多未知,我也有些慌。

既然已经定了,就没办法了,要来一波挑战了。于是,就开始了自己的cordova+ionic3+angular4+TypeScript的开发路线。现在,我们的app意境开发上线了,而且问题几乎没有,速度很好,用户体验也很不错。我自己对ionic3也有了一些研究,在这里跟大家分享一下。

首先提醒大家,在选择本技术栈之前要慎重考虑。因为ionic3跟ionic2基本特别像,但差别还是有的。angular4和angular2就更不用讲,最重要的是cordova plugin 这个很多之前的版本不能在新的ionic Cli中使用。因此遇到很多问题需要自己去折腾。国内几乎没有这套这技术栈的县官中文文档,需要道英文官网去查看相关文档。

好了,到这里我们可以开始我们的第一个ionic3 App了。

第一步上个干货

http://ionicframework.com/docs/

这是ionic3官方文档

https://github.com/nurdun/ionic3-App

这是我当时学习的时候写的一个demo

第一步需要全局安装ionic3

npm install -g cordova ionic

然后我们就可以开始我们的ionic3 App了

ionic start myApp tabs

就这样开始了我们的第一个带着底部选项卡的ionic3 App

等myApp项目创建完成之后,我们可以进入myApp目录下

ionic serve

或者

ionic serve --lab

来在浏览器中启动本项目。

添加平台(platform)

在添加android或者ios相关的平台到我们的项目之前我们得需要安装我们需要的相关平台的开发环境的我们的电脑。

安卓需要安装android sdk ,下载并安装完之后需要到系统环境变量中配置我们的android sdk路径到系统环境变量当中。如何添加android模拟器,可以到百度或者Bing上去搜有很多相关的很好的答案。

ios需要下载并安装xcode(当然ios平台需要在mac环境下进行开发),如何下载并安装并如何添加ios模拟器可以去搜索,有很多答案。

ionic cordova platform add android
ionic cordova platform add ios

删掉平台相关代码 

ionic cordova platform remove android
ionic cordova platform remove ios

在模拟器中启动项目

ionic cordova platform add android   //android
ionic cordova platform add ios     //ios

通常在开发当中我们需要用的时时刷新(livereload)

所以在模拟器中启动项目的时候需要添加 --livereload 命令

ionic cordova emulate run android --livereload
ionic cordova emulate run ios --livereload

除此之外我们在开发当中需要看到控制台输出(console.log之类的)

所以在模拟器中启动项目的时候需要添加-c命令(--console)

结合--livereload 命令可以把命令简化成 -lc

ionic cordova emulate run android -lc    //android
ionic cordova emulate run ios -lc //ios

真机调试

ionic cordova run android
ionic cordova run ios

//livereload

ionic cordova run android --livereload
ionic cordova run ios --livereload

//livereload and console

ionic cordova run android -lc
ionic cordova run ios -lc

上面这些是ionic3创建第一个app和不同平台上运行并看到效果的过程。

需要调用的UI组建可以到ionic3官网上去看,并选择自己喜欢的UI组建来使用。

时间: 2024-10-11 17:09:07

使用ionic3开始自己的App开发之路的相关文章

IOS中APP开发之路

现在移动APP正式急速上升的趋势,然而占据着主要地位的还是这2大巨无霸:谷歌的Android与苹果的ios系统.那么,作为 程序员了解一下APP的开发流程思路是有所必要的,特别是正流行火热的APP市场.开发IOS的APP学习思路,翻译 了一个很牛B的网 络文章,并且大致的总结了一些IOS开发APP的流程思路,它不仅仅是初学者的导航灯,还是ios开发热衷粉丝的垫脚石.iOS系统以 及iPhone的出来都要感谢ios鼻祖---乔布斯,一个完美主义者,从如此优秀的iOS系统和iPhone就可以看出来.

Google glass Mirror app开发之HTML布局之标签篇

$_[.=.]  原谅我不太会写标题.. 谷歌眼镜开发 之 Mirror api开发之 HTML布局之 css样式 之xxx... 好了,进入正题,在https://developers.google.com/glass/tools-downloads/playground中可以实时地预览效果 CSS样式文件:https://mirror-api-playground.appspot.com/assets/css/base_style.css Mirror API - Timeline:http

物联网的全栈开发之路

本文由嵌入式企鹅圈原创团队成员-华南师范大学物联网创新中心黄鑫执笔. 两年前我还一直专注在android系统定制领域的研究,对物联网关注比较少,尽管我个人对智能家居的概念和场景体验也比较熟悉.真正引起我注意的是有一次在车上,听到电视广播说打开蓝牙,用手机摇一摇就可以摇到红包,我就觉得这个场景很棒,然后就知道了ibeacon和微信摇一摇周边,知道了微信硬件平台和物联网的发展已经深入渗透到我们的生活了.尽管我觉得自己进入物联网不算早,但是考虑到传统电子行业都有升级到物联的需求,加上自身在嵌入式和AP

高效Web前端开发之路:YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

Hybrid App开发之Ajax在JQuery中的应用

前言: 今天学习一下如何通过Ajax与服务器进行交互,并且学习一下如何在JQuery中使用. 首先先了解一下什么是ajax? AJAX即"Asynchronous,Javascript+XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX=异步JavaScript和XML(标准通用标记语言的子集).AJAX是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情

直播APP开发之iOS开发中的列表优化思路

APP开发中,列表可能是平时我们打交道最多的UI控件之一,其重要性不言而喻,对其性能的优化同样至关重要.而对于iOS开发,列表就是我们常说的UITableView / UICollectionView.在进行直播APP开发时针对于列表的优化自然是必不可少的.这里以UITableView为例简略介绍一下列表优化思路.(1) cell复用.这是每一个iOS开发者都非常熟悉的一部分内容.我们经常在cellForRowAtIndexPath:中为每一个cell绑定数据,实际上在调用cellForRowA

APP开发之UI体验—Toolbar

1.新建的项目中,默认使用的是ActionBar,为了能够正常使用ToolBar,我们需要隐藏原来的ActionBar.(每个活动最顶部的标题栏) 在values/styles.xml中做出如下修改: <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <...> <...> </style> 2.修改activity_main.xml中

Web App、Hybrid App开发之chrome-devtools调试

今天我们来聊聊APP开发,现在呀,人手都一部手机以上,就连7.8岁的孩子都自带一台手机了,手机给我们的手机带上了多大的改变呀. 先扯点数据哈,2016年4月,在移动互联网上,平均每个用户每日花费时间为200分钟.中国有3个互联网巨头,腾讯.阿里巴巴.百度,而网民花在这3个公司产品上的时间,占总花费时长的71%,其中微信占35%,QQ占10%. 微信占35%,现在的微信呀,已经是比QQ时代占领的强度.广度都要大呀,整个家,除了奶奶没在用微信,哪个不是天天微信左扯一句,右扯一句的呀. 噢,扯远了,回

Hybrid App开发之jQuery基础

前言: 前面学习了JavaScript/Html/Css的基础知识,今天学习一下常用js框架jQuery的使用进行快速的开发. JQuery的基本功能: 方位和操作DOM元素 控制页面样式 对页面事件的处理 大量插件在页面中的运用 与ajax技术的完美结合 首先先编写一个jquery程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <