ionic的安装及简单的应用

Ionic是一款基于HTML5的移动应用开发框架,支持使用Web技术开发类似原生的应用。本文介绍了Ionic的安装步骤、环境配置方法及基本操作流程,包括创建项目、运行应用等内容。

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

ionic是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript  MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。官方网站:http://ionicframework.com/     中文版的教程:http://www.ionic.wang/

安装ionic1前先要准备好下载安装好Node.jsAndroid SDK及环境变量配置

Android SDK,目前无法通过google直接下载,可以通过设置Http Proxy Server来获取;打包apk只需要sdk,模拟运行则需要system images

mirrors.neusoft.edu.cn 80
//勾选 other - Force https//... sources to be fetched using http://...

Android SDK 环境变量配置


ANDROID_HOME    D:\android\sdk                              
path     %ANDROID_HOME%\platform-tools;  
path     %ANDROID_HOME%\tools;  

安装ionic 及 cordova
安装命令
npm install -g cordova ionic


更新命令
npm update -g cordova ionic


安装特定版本
npm install -g ionic cordova@5.0.0
npm install -g ionic@1.6.5


删除命令
npm uninstall cordova -g
npm uninstall ionic -g

npm 淘宝镜像(GFW,导致很多插件下载失败)

npm install -g cnpm --registry=https://registry.npm.taobao.org
// 安装完成后,以后所有的插件都使用cnpm这个命令来进行安装
cnpm install -g ionic cordova
创建应用

创建ionic 项目,可选模板:sidemenu(侧滑菜单),tabs(底部tab),blank 空白

ionic start myapp blank
ionic start myapp tabs
ionic start myapp sidemenu
如果是github上下载的项目,里面的插件、依赖项一般通过下面命令下载:

bower install
npm install
如果是老ionic 项目,如果需要更新项目里面的ionic文件(如js类库)


ionic lib update
浏览器端运行

ionic serve
ionic serve --lab
真机模拟、打包、运行

ionic platform add android  //[ios]
ionic build android
ionic run android
ionic emulate android
如何用xcode 打包IONIC 项目(IPK)

将项目文件copy到MAC底下。运行终端,cd到项目所在文件夹,运行

ionic platform add ios
然后finder,在 platforms->ios->xxx.xcodeproj 打开项目

然后,将xcode的模拟器类型选成iOS Device

然后在XCODE 的菜单栏 选择 Product -- Archive ,会生成 xxx的Archive文件。


在窗口右侧的Submit to AppStore 按钮的下方,点击 Export...

有三个选项

Save to IOS App Store Deployment
Save to Ad Hoc Deployment
Save for Enterprise Deployment
选第二个Save to Ad Hoc Deployment 打包成.ipk

选择证书等等,选择导出文件夹,导出

转载于:https://www.cnblogs.com/james-zhan/p/6534021.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值