搭建你的第一个Ionic应用(一)——入门

本文介绍Ionic混合应用开发框架,适合初学者快速上手。Ionic基于Angular和Cordova,提供接近原生的UI体验和丰富的组件库。文章涵盖Ionic的优势、安装步骤及基本命令,帮助读者轻松创建并运行首个Ionic应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上次写了一篇关于Ionic3的文章,但是对于从来没有接触过Ionic的开发者来说,可能不是太友好。为了让更多的人了解这个非常好的混合应用开发框架,今天这篇文章主要介绍如何从零用最快的时间做一个Ionic APP。
一)为什么是Ionic?
如果你以前从来没有接触过移动开发,但是现在想做一个APP,那么Ionic将是你的首选。
虽然React Native也是现在很好的混合开发框架,但是我认为React Native更适合有原生应用开发经验的人,更适合规模较大型的APP,更适合对性能要求极高的APP,反过来,如果你的需要是上面这样的APP,那么Ionic可能就不是你的首选了。React Native开发成本比Ionic高了很多。
至于除了React Native和Ionic之外的其他框架,暂时不用考虑了。
使用Ionic,你不需要有任何原生开发经验,而且Ionic提供了使用起来很简单的组件,最接近原生的UI,非常漂亮,还有基于Cordova的强大的原生插件(摄像头,通讯录,等等),基于Angular的丰富生态系统的库,所有Angular相关的github项目都可以在Ionic中使用。
总结起来可以用三个词语描述Ionic:简单,漂亮,快。
搭建一个Ionic app非常的简单,Ionic 已经把所有的项目结构帮你搭建好了,甚至代码文件目录也已经做好了,如果你已经搭建好了所需要的开发环境,并且对Angular已经比较熟悉,那么定制你的APP将变得前所未有的简单。

二)什么是Ionic?
Ionic是基于Cordova的使用Web技术开发混合应用的前台基于Angular的框架,Ionic1使用的是Angular1,Ionic2之后使用的都是Angular2技术栈,Ionic以后更多的新版本也都是在2的版本上迭代。Ionic2之后只支持android4.3以上的版本。
Ionic官方网站

三)搭建Ionic应用
1)安装Node

2)运行npm install -g cordova ionic,这个命令用来安装Ionic CLI,用来使用Ionic终端命令。

常用的命令有:

这里写图片描述

3)进入电脑的某个文件目录,运行 ionic start MyIonicProject tutorial --v2
这里start代表新建一个Ionic应用,MyIonicProject 是项目名称,tutorial是tutorial模板,还有其他几种模板:

  1. tabs : 底部3个tab模板
  2. sidemenu:侧边栏菜单模板
  3. blank:空模板
  4. super:带有十几个页面(比如登陆,谷歌地图,列表)的一个项目模板
  5. tutorial:项目目录比较完整的引导模板
  6. –v2:Ionic2项目,如果你想使用Angular1,–v1即可。本文默认都是Ionic2及以后的版本。

这个过程需要等待,因为会安装package.json里的所有引用的包。如果你使用的是super模板,start成功之后打开项目,可以看到这样的结构:

这里写图片描述

  • plugins目录是安装的cordova插件,cordova插件是使用原生组件的方式,默认的会装几个必须使用的,以后我们使用命令行(比如 ionic cordova plugin add cordova-plugin-camera)安装的插件会自动放到这个目录里。
  • resources是存放我们的项目经过cordova编译之后的android和ios的一切资源的,比如源代码,app的icon,资源图片等等,这里会生成原生的android或者ios项目,比如以后生成的apk文件也是放在这里android目录下面。
  • src是我们的项目代码目录,我们将在这里编写我们的APP。如果你对这里的代码结构感到陌生,你需要先花点时间了解Angular
  • www是我们的项目作为angular项目编译之后生成的文件。

4)运行 ionic serve 可以在浏览器查看效果

这样我们的ionic项目就搭建完成了。

1 简介 1、Native APP(原生) 2、Hybrid APP(混合) 3、React Native Hybrid App按网页语言与程序语言的混合,通常分为三种类型:多View混合型,单View混合型,Web主体型。 2 技术 2.1 技术选型 Ionic 2.1.1 Ionic介绍 Ionic款基于Angular、Cordova的强大的HTML5移动应用开发框架,可以快速创建个跨平台的移动医用。可以快速开发移动APP、移动WEB页面、微信公众平台应用,混合APP WEB页面。 2.1.2 Ionic和cordova、Angular关系 Ionic = cordova + Angular + ionic Css Ionic 是完全基于谷歌的 Angular 框架,在 Angular 基础上面做了些封装,让我们可以更快速和容易的开发移动的项目。Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1 概述 2.2.2 JDK 2.2.2.1 版本 jdk1.8 2.2.2.2 配置 JAVA_HOME PATH CLASSPATH 2.2.3 Apache ant 2.2.3.1 版本 1.9.12 2.2.3.2 解压 2.2.3.3 配置 ANT_HOME: D:\android\apache-ant-1.10.4 Path: %ANT_HOME%\bin 2.2.3.4 查看安装版本 ant –v 2.2.4 android SDK 2.2.4.1 版本 r24.4.1 2.2.4.2 配置 ANDROID_SDK_HOME: D:\Android\android-sdk-windows Path:%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools 2.2.4.3 SDK 通过SDK Manager下载相关的版本 2.2.4.4 查看信息 android -h 2.2.5 node.js 2.2.5.1 版本 8.11.3 2.2.5.2 安装 2.2.5.3 查看版本 node –v npm -v 2.2.6 npm/cnpm 2.2.6.1 安装npm nodejs已经集成了npm 2.2.6.2 安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2.2.7 cordova 2.2.7.1 版本 8.0.0 2.2.7.2 安装 npm install -g cordova 可以使用cnpm代替npm cnpm install -g cordova ionic 2.2.7.3 查看版本 cordova -v 2.2.8 ionic 2.2.8.1 版本 3.20.0 2.2.8.2 安装 npm install –g ionic 可以使用cnpm代替npm cnpm install -g cordova ionic 2.2.8.3 查看版本 ionic –v 2.2.8.4 查看信息 ionic info 3 项目 3.1 创建 3.1.1 新建 3.1.2 启动 3.1.3 打包 3.1.3.1 添加 3.1.3.2 生产release版apk(签名后安装) 3.1.3.3 生成debug版apk 3.1.4 签名 3.1.4.1 生成签名文件 keytool -genkey -v -keystore testapp.keystore -alias testapp.keystore -keyalg RSA -validity 20000 3.1.4.2 apk签名 jarsigner -verbose -keystore testapp.keystore -signedjar app-release-signed.apk app-release-unsigned.apk testapp.keystore 3.1.5 安装 安卓手机安装使用
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值