当前位置 : 主页 > 手机开发 > 其它 >

混合开发(Hybrid App)之 Ionic【一】-- 认识Ionic,搭建开发环境,创建项目

来源:互联网 收集:自由互联 发布时间:2021-06-12
写在前面 目前市面存在的移动开发方式有原生应用、混合应用、原生应用三种,对于这种方式可以做以下对比。 认识 ionic ionic 是一个用来开发混合手机应用的,开源的,免费的代码库

写在前面

目前市面存在的移动开发方式有原生应用、混合应用、原生应用三种,对于这种方式可以做以下对比。

    

认识ionic

ionic 是一个用来开发混合手机应用的,开源的,免费的代码库,具有以下特点。

1.ionic 基于Angular语法,简单易学。
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代码易维护。
4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生,让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。

7.ionic 性能优越,运行速度快。

安装 ionic 

step1.安装node.js 

建议安装最新版本,下载地址:https://nodejs.org/en/  ,下载安装完成后,会默认包含 npm 包,可使用终端命令

node -v
npm -v
查看 node 和 npm 的版本

step2.安装 ionic 前的准备

由于墙的原因,在之前的基础上直接安装 ionic ,一般会报错,可以采用下面的其中一个方法解决。

1.使用淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org
2.使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

以后所有的npm可用cnpm代替,如: cnpm install ionic

step3. 安装 ionic 和 cordova

如果step2中使用的淘宝镜像。

npm install -g ionic cordova

如果step2中使用的cnpm。

cnpm install -g ionic cordova
安装好可以用 命令  “ionic -v” 查看 ionic 版本(截止现在的版本为 2.1.13)

新建项目

1.进入要存放新建项目的目录

cd desktop
2.新建项目

使用命令 ionic start<project-name> <optional-template>
<project-name>:项目名,<optional-template>:可选模板(sidemenu:侧滑、tabs:底部tab切换、blank :空白。不写默认为 tabs 默认

ionic start myApp --v2

注意:如果不使用--v2,那么将按照ionic1的版本创建使用,同时也使用Angular1

3.进入项目

cd myApp

4.增加平台支持

iOS:

ionic platform add ios 
android:
ionic platform add android

运行项目

1.在浏览器中预览

ionic serve -l

2.创建好的文件目录

进入 platforms/iOS  就能找到熟悉的运行文件了,用xcode打开运行即可。


参考文章: 

https://yanxiaodi.gitbooks.io/ionic2-guide/content/

http://www.voidcn.com/article/p-bxopffkz-ry.html

http://www.cnblogs.com/greyzeng/p/5529153.html

http://bbs.phonegap100.com/thread-2622-1-1.html

http://www.cnblogs.com/zsl123/p/5985620.html

http://www.jianshu.com/p/7a7abfa9f435

网友评论