ionic简介


关于ionic框架

Ionic 是一个开源的 HTML5 移动框架,使用 HTML,JavaScript 和 CSS 来建立卓越的跨平台 Hybrid app(混合模式移动应用,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”)和手机移动版网页。Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic 是一个专注于用 WEB 开发技术,基于 HTML5 创建类似于手机平台原生应用的一个开发框架。Ionic 框架的目的是从 web 的角度开发手机应用,基于 PhoneGap 的编译平台,可以实现编译成各个平台的应用程序。

它具有以下几个优点:

  • Ionic 开发的 app 运行十分流畅

  • Ionic 应用于超过一百五十万 app 或者网页,应用广泛,潜力巨大

  • Ionic 以流行的原生移动开发 SDK 为蓝本,媲美于 native app

  • UI 组件丰富而优美,提供众多流行移动组件,结构,交互规范,以及华丽的(且可扩展)的主题

  • 利用强大的命令行提供操作

相关网页

ionic 开发环境配置安装


安装node.js

对于mac用户,点击进入node.js官方网站 ,如图所示,一定要选择 node.js 4 下载(!目前 node.js 5 不兼容)
Snip20160122_1
然后打开下载的Node.js安装器进行安装,一路点击继续就可以啦~
Snip20160122_2

测试node.js

安装结束后打开mac 的终端(terminal)输入:

按下回车,再输入:

回车,如果安装成功,系统将会显示node 与npm工具的版本号,如图所示:
Snip20160122_4

利用npm安装 ionic及其基本相关工具

NPM 是node程序包管理器。它是捆绑在 nodejs 的安装程序上的,所以一旦你已经安装了node,npm 也就安装好了。在终端(terminal)中输入

进行安装,这个命令会让计算机开始自动安装 ionic、cordova 以及 gulp。接下来将会出现一个不断旋转的 “-”符号,表示系统正在进行下载和安装,等一会儿就好啦。最后如图所示 ,表示已经安装完成。
Snip20160123_5
最后我们可以在 terminal 中输入

来查看inoic框架及其相关组建是否已安装,如图:
Snip20160123_16

第一个app


创建你的app

ionic 官网为开发者提供了多个开发模板,如默认的 Tab 模板,Sidemenu模板,blank 模版。我们的app使用这些模版可以大大简化过程。比如下面我们使用Tab模版(页面基于类似微信的Tab组织,使用了ionTab指令)
在 terminal 继续输入:

(注意,此处的 [APPNAME] 是你自己设定的app名字,例如此处我将使用 myproject 作为我的app名字。)

然后出现如下画面:
Snip20160123_6

Snip20160123_7

第一幅图红色的字表示建议你安装 ios-sim 和 ios-deploy ,这两个插件分别用于在 mac 上模拟 iOS 系统运行 app 和使用 iphone 设备运行你建立的app,现在我们只需要app在模拟器上运行就可以了,那么我们就在terminal 里输入:

来进行安装吧。

安装完成后如图:
Snip20160123_9
另外,第二幅图提供了一些基本语法介绍:

在其他时候我们也可以输入

来查看这些语法。

在模拟器中运行app

在终端输入:

来进入储存你的新工程的文件夹,然后输入:

其中第一步添加ios原生代码,其实就是调用了cordova platform add ios,当然这边要在mac上做了,并且需要安装了xcode(如果你还没安装的话,去app store慢慢下载吧 = 。=)在terminal飞快的跑了一会儿之后,模拟器就会运行并且打开刚刚我们创立的app啦:
Snip20160123_12
小小地操控了一下,导航栏的动态效果还是很接近 native app 的,当然,这个 app 只是使用了系统预置的模版,以后我们真正要学习的还是 app 的编写。

在浏览器中调试app

在开发初期的调试我们一般会使用浏览器作为我们的调试工具,Ionic提供了一个serve命令为我们的应用创建web站点可以非常方便的调试应用, 键入:

弹出了一下内容,如图 :
Snip20160123_13

表示你存在多个ip地址,需要你进行选择,我们选择localhost(127.0.0.1),输入2就可以了

执行完毕后 Ionic 会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面,当当当~你可以把浏览器缩放为手机屏幕的大小以便于更好的体验。
Snip20160123_15
浏览器打开页面时Ionic已经给我们开启了livereload模式,开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面,我们就不用每次修改完毕手动刷新页面了,又极大的提高了我们的工作效率。可以在主目录下的ionic.project文件的watchPatterns中配置要监视的文件夹。(不过目前还不需要啦)例如:

当处于livereload模式时,使用r重启客户端,使用 g your_url 跳转到指定url, 使用c启动或关闭console,使用s启动或关闭设备的console, 使用q退出。
我们需要在terminal输入

就可以退出ionic的livereload控制界面了。

使用Ionic Platform进行后端调试

Ionic Platform (http://ionic.io) 是一个基于网页的在线对工程进行一系列后端调试平台,利用它我们能快速地优化出高性能、优美的app。不过,目前 Ionic Platform 还处于比较初级的阶段,不是很成熟。我们需要进入网站 http://ionic.io 来用邮箱注册一个账户然后输入:

来登录 ionic.io账户,继续在 terminal 上输入你的账户邮箱和密码以登录
Snip20160123_10
接下来我们需要安装 bower(Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如 JavaScript、HTML、CSS 之类的网络资源。其他一些建立在Bower基础之上的开发工具)然后安装 ionic-platform-web-client,在 terminal 中输入:

然后我们需要将app 与这个平台连接起来,输入:

然后输入:

进行打包上传,结果喜闻乐见地出现了ERROR,连续3次显示的是这样:

Snip20160124_18

这样:

Snip20160124_19

以及这样:

Snip20160124_22
根据上面的提示估计应该是网络上的原因,于是进入官方论坛进行搜索,发现有一些人同样是打包上传出现ETIMEDOUT错误,但是都没有得到解决,一些截图如下:

Snip20160124_20

Snip20160124_21
看来这或许与代理服务器设置有关,本来中国就有 GFW 所以网络不好,目前官方已在 Github 上将此问题标记为 bug。尝试着在 terminal 上面ping了一下上面出现的服务器54.231.14.241 和54.231.10.145,果然ping不通。在我使用了 vpn 之后却依然连接不上,看来是服务器的问题了,只能等以后发布新版本修复了 bug 再解决吧,然后我再来完善文章的这个部分。不过好在这个功能也不是必须的,它只是提供一个 app 调试设置和发布的快捷平台,所以也不影响ionic的总体使用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注