ionic学习笔记(一)

时下混合式开发App很火的点子,Hybrid
App(混合形式移动采纳)是指介于web-app、native-app那两者之间的app,兼具“Native
App卓越用户交互体验的优势”和“Web App跨平台开发的优势”。

 最近最火的框架莫过于Ionic了,Ionic是现阶段最有潜力的一款 HTML5
手机使用开发框架。通过 SASS 构建应用程序,它提供了成千上万 UI
组件来协理开发者开发强大的运用。 它利用 JavaScript MVVM 框架和 AngularJS
来升高应用。提供数据的双向绑定,使用它变成 Web 和移动开发者的联手采取。

Ionic是一个留意于用WEB开发技术,基于HTML5开立类似于手机平台原生应用的一个开支框架。Ionic框架的目标是从web的角度开发手机使用,基于PhoneGap的编译平台,可以实现编译成各样平台的应用程序。现在我们就来做一下备选工作,搭建本地环境。系统环境为Mac
OS。

NO.1 安装Node以及npm

直白去 node官网下载对应版本的安装包即可,网上教程有成百上千,不再多说。

NO.2安装ionic。

AngularJS,分选设置版本。安装ionic。ionic有1.0版本和2.0版本,2.0版本相对1.0本子更有力更周全所以大家挑选2.0版本举办安装。

$ sudo npm install -g ionic@beta

若果想要安装1.0版本直接设置就行

$ sudo npm install -g ionic

在Mac下使用npm安装时偶尔会报错,提议前面加sudo使用管理员权限,

设置成功后会出一雨后春笋的目录结构。

NO.3 初步化一个项目

$ ionic start ionicdemo –v2

那里的—v2便是依照2.0版本的。在这几个过程里会设置一些node的依赖包以及Cordova的组件,如若将来还指示你安装Cordova的话,可以因而命令行来设置

$ sudo npm install -g cordova

这边大家采取的是默认模版,tabs,我们也可以动用任何模版来起先化:

$ ionic start ionicdemo blank –v2

至于ionic的更多模版的信息会在最终的材料里给出。

此处好有一个技能即使想要使用Typescript(TypeScript是一种由微软支付的随意和开源的编程语言。它是JavaScript的一个超集,而且精神上向那么些语言添加了可选的静态类型和遵照类的面向对象编程。)那么只需要在命令后边天假—ts参数即可。

NO.4运行品种

开端化项目成功后大家可以透过命令来运小说种

$ ionic serve

Mac环境下运作后或者会给你两个地点供你挑选,那时候只需输入地方前的编号即可。

用作初学者,ioni为之提供了一个可视化的工具,这一个工具叫做Ionic LAB.
下载地址:https://lab.ionic.io 其主题界面是这么的

咱俩得以平昔将已部分类别拖进来,也可以新建新的系列。
点击serve按钮,就会并发项目运作的界面,我们可以在地点接纳所需要的条件。

在品种开发过程中,在改动代码之后我们总是需要持续的去刷新界面,在这里大家可以设置界面的实时更新。点击右上角的安装按钮。如下图:
image description 大家只需将第一个选中即可直达目标。

ionic网站为大家提供了个人账户,大家只需注册即可,注册成功后我们可以通过点击这几个工具里的upload按钮把我们的档次上传到个体的账号里。 

当然关于这一个工具的别样用法也可以去其官网上举行更多的求学和询问。
上边分享多少个有关的素材站点: 

从此未来还会有有关组件的就学笔记,项目实战笔记。

Github博客地址:https://yanzxx.github.io

相关文章