所以自己手动下载安装 4.安装ionic,cordova npm install -g ionic cordova 查看是否安装成功 //查看ionic版本 ionic -v //查看cordova...版本 cordova -v 5.创建项目 ionic start 项目名 创建完成项目然后启动查看下项目是否创建成功,如果启动成功后执行下一步 6.安装android-sdk(建议用方法二,简单快捷方便...创建:touch .bash_profile 4.打开并编辑:open .bash_profile 5、在文件中写入以下内容: exportANDROID_HOME=/usr/local/opt/android-sdk...如果未显示command not found,说明此命令有效,环境变量设置完成。...8.打包 cordova platform add android cordova build android ---- 至此打包完成
你可能听说过 PhoneGap —— 这是 Adobe Cordova 的商业版本。...开始使用 Ionic 为了设置 Ionic 的开发环境,需要完成以下几步: 安装 Node.js 使用 npm 安装 Ionic 和 Cordova: npm install -g cordova ionic...另外,关于如何在后端的 Auth 服务中验证用户身份的文档也不多。...你需要使用 Okta OIDC 设置中的 Client ID 替换 "[client-id]" 以及你账户的当前 URI 替换 "[dev-id]"。...执行完这些步骤之后,你可以运行 ionic cordova emulate android 查看运行在 AVD 中的 app。
接下来介绍如何在 Windows 下搭建 Ionic 开发环境。...如存放在 C 盘 Program Files 目录下则 Path 中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;(添加方法和 java 配置 path 变量是一样的...注意:这里我下载的纯净版 SDK 之前并没有任何 Android 系统在内,所以同 Platform-tools 一样需要在这里勾选需要的版本然后安装。这里至少需要有一个系统,否则无法创建虚拟机。...nmp 安装 Ionic 和 Cordova 完成以上几步需要配置的环境就搭建完成了,接下来就只需要在控制台输入简单的几行命令就可以安装 Ionic 和 Cordova 啦。...ionic build android --release --prod 无论是 debug 版本还是 release 版本都适用。
常规ionic的环境搭建如下: 一、安装nvm——可选,中文意思是“node版本管理器” node是ionic必要的环境,而node个别版本差别有点大,如6.x和9.x,ionic...项目对node版本有要求,为了便于管理node,建议安装nvm,装完后就可以命令行调用命令,如nvm alias default 6.10.3 && nvm use default: $ nvm...3、直接用npm,但给它设置代理,如代理地址映射到淘宝的源,像下面这样: npm install ionic -g --registry=https://registry.npm.taobao.org...两者的版本并不是一致,有时候ionic-angular更新了多个版本,而ionic-cli不需要更新,而ionic-cli一般是bug修复、提高命令执行的性能,或调整ionic项目结构时才需要更新。...注意:现在ionic-cli涉及原生相关的命令都会带上cordova,如下面命令 ionic cordova build android 但是有人会省掉ionic,变成这样:
比较热门的Hybrid框架有Ionic、Cordova、DCloud: (1) Ionic Ionic: Ionic是一款开源的跨平台,可用于开发移动端的开发框架。...Ionic底层打包使用 Cordova,Ionic自带丰富的Ionic UI样式,Ionic使用的是AngularJS前端框架。...Cordova从PhoneGap中抽出的核心代码。Cordova是一个使用HTML,CSS和JS这些前端语言去构建移动应用的平台。...Cordova的文档从2010年10月就开始维护了,版本号为0.9.2。 cordova-cli在2012年11月发布第一个版本,版本号为0.1.13。...cordova-android这个从2009年12月就开始发布第一个版本0.9.0了。cordova-ios这个从2009年12月就开始发布第一个版本0.9.0了。
一、Cordova的基础点 在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能。...; pluginID:插件id, 如:org.demo.mytoast; version:版本号, 如:0.0.1; path:插件存放的绝对或相对路径; variable NAME=VALUE...:扩展参数,如说明或作者,如woodstream 于是命令行中敲入以下代码: plugman create --name MyToast --plugin_id org.demo.mytoast...: ionic cordova plugin add /Users/cordova/MyToast 在ionic2或以上使用时,打开任意一个ts文件,在头部声明如下: declare let cordova...ionic cordova plugin remove XXXXX(你的plugin_id) 查看已安装插件 ionic cordova plugin list
先打开plugin.xml(插件的基本信息和配置都在该文件,关于这文件,我会专门写一篇文章来说明)观察下文件,分别留意android和ios项下的配置: ? android项下的配置 ?...andriod在android/Library/res创建文件夹values-zh,其下创建文件multiimagechooser_strings_zh.xml, ios在ios/GMImagePicker...zh-Hans.lproj/GMImagePicker.strings 改完后,我们安装插件时指定安装位置为修改过的项目路径即可,如可以执行这样的命令,然后和官网一样地调用即可: ionic cordova...同理,当打包ios发布app store时,会询问关于图像、地理位置或者麦克风等相关描述内容,如果没有填写,会审核不通过,所以如果插件没有做处理,每次发布都要手动修改info.plist填写,于是,为了方便...plugin.xml配置 然后就可以类似下面那样在安装插件时使用variable变量设置参数: ionic cordova plugin add https://github.com/woodstream
直接播放.PNG 而这两种方式,可分别使用以下方式处理: 一、使用Cordova插件播放。...以官网推荐的cordova-plugin-streaming-media插件为例: 首先安装插件,并安装相应的native模块: ionic cordova plugin add cordova-plugin-streaming-media...npm install --save @ionic-native/streaming-media 其次在app.module.ts文件中的providers里添加StreamingMedia。...: 为了少摸索折腾,可以使用第三方js,如video.js和jplayer.js,对于ionic3,自然可以考虑...因为问题还存在着:当全屏时,尤其是android,会黑屏,可以开启GPU硬件加速来解决,但也并不是很好的方法,此时可以使用伪全屏——用样式模拟,这样又涉及到横竖屏切换的监听等等,这里不详细说明,有兴趣可以看看此文
3.安装安卓的SDK 打开Android Studio,File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可。 需要在Path环境变量中添加两个值。...分别是 Android SDK中tools目录的路径和platform-tools的路径。...然后执行命令cnpm install -g cordova ionic安装ionic和cordova 查看是否安装成功: 查看ionic版本 `ionic -v` 查看cordova版本 `cordova...查看ionic版本 ? 查看cordova版本 ionic 和 cordova默认安装在 C:\Users\hello(此目录为本机名)\AppData\Roaming\npm\目录。...(y/N) 意思是是否要把 iOS 和Android集成到刚刚用Cordova 创建的app中 ,我这里选择y 表示确定。然后就会自动安装缺失的或者更新某些工具版本。 然后就会看到一个提示?
侧滑栏 2.添加平台 创建成功后,cd 进入到项目的根目录下,运行命令 ionic cordova platform add android (ios版本的就是ionic cordova platform...add ios) 3.编译 运行命令 ionic cordova build android --release 编译成功后会在项目下的platforms/android/build/outputs.../apk里面生成生成默认名字为android-release-unsigned.apk的release版本apk文件 (要使用jarsigner签名必须用release版本) 解决ionic3打包后启动慢的问题...:ionic cordova build android --prod --release 4.生成keystore文件(签名的时候需要用到这个keystore文件) keytool是JDK自带的加密工具...10000天 5.使用jarsigner签名 jarsigner是JDK自带的签名工具,如果要将apk发布到android应用市场,就需要对release版本的apk文件使用keystore文件进行签名
) (3)在系统变量path中添加 ;E:\android-sdk-windows\tools;E:\android-sdk-windows\platform-tools 2、安装cordova ...npm install -g cordova@5.4.1 3、安装安卓平台 ionic platform add android, 会安装android 24 的平台,我是在Ionic Lab 中安装的...,是安装android 22 平台,因为我的SDK是下载的Android 5.1.1 (API22),在android SDK Manager 可以下载其它的版本 在安装的过程中可能会出现gradle...下载特别慢,或者根本下载不下来, 需要手动下载 gradle-2.14.1-all.zip(我的错误日志记录的是这个版本) 通过下面的直接下载gradle http://services.gradle.org...的maven的库,这个时候需要修改build.gradle文件的repositories库中,mavenCentral()修改成为阿里云的库 repositories { flatDir
1、启动前黑白屏 启动前黑白屏问题,仅存在于android,是android应用的通病,ionic表示这锅它不背。...所以解决方式有好几种,可以看这两篇文章: Android启动页优化,去黑屏实现秒启动 Android启动页黑屏及最优解决方案 具体应用在ionic上可以参照这个: 快速解决ionic安卓主题启动时短暂的黑屏或白屏问题...然后安装该插件: ionic cordova plugin add 本插件本地或远程路径 验证一下,会发现在platform目录android里的res/values里会多出styles.xml文件。...我们可以验证一下,执行命令运行看效果: ionic run android 2、启动后黑白屏 ionic启动页使用了cordova-plugin-splashscreen这个插件,插件配置在应用的config.xml...; SplashScreen——它是 platform / android / res / drawable - 文件夹中的图像的名称。
所谓的Anrdoid打包,就是将ionic项目打包成一个可以安装在Android系统上的apk文件,打包的时候,使用的是cordova工具,不过在此之前,需要一些准备工作:配置JDK、Android...SDk还有各个android版本包的下载,最重要的是需要成功的创建了一个Ionic项目,有关ionic项目创建的详细教程,请参考以下文章: Ionic3 Start 配置JDK 主要就是以下流程...添加IOS平台需要在MacOS上操作,本文也仅是介绍将ionic项目打包成Android应用,因此不涉及到打包IOS的内容。...添加平台通过cordova工具添加,新版本和老版本的命令会有一些区别,以新版本为准: ionic cordova platform add android 该命令用于向当前应用添加 android...执行该命令之后,可以在应用的根目录看到一个新建的文件夹:platform 这个过程中可能会遇到一些问题,不需要轻言放弃,仔细观察错误信息 打包 同样利用cordova工具进行打包。
1.1.1、创建项目 npm install -g ionic cordova 下载必要的ionic 组件与cordova打包依赖 ionic start demo --v3 创建3版本的ionic项目...F12进行真机模拟查看,并且默认为极速模式【特别注意,千万不要将自己的浏览器设置为IE兼容,不然看不出效果】 1.1.3、build与打包 ionic cordova platform add android.../ ios 这里老玩家得注意了,与原命令相比较ionic platform add android / ios新添加了带有cordova命令,这加完依赖后如果是Android可以直接进行build ionic...cordova build android了。...2、新增一个导航界面 在项目进行中要进行对底部导航栏目的修改,在项目中默认为三个导航,可是项目需求需要四个,我们需要ionic g page newPage//这里的newPage为我们开发人员自定义的名称自动生成页面
它可以与UI框架(如jQuery Mobile、angularjs或Sencha Touch)等相结合使用,这些UI框架可以使用HTML、CSS和JavaScript开发智能手机应用。...通过Cordova开发的应用,可以编译为android和ios版本的应用。...本文介绍Cordova+ionic+angularjs开发环境搭建 ionic是什么 ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。...第一步:安装nodejs 到nodejs官网下载4.2.1版本并安装,安装完成后在命令行输入: node -v结果:v4.2.1 说明安装正常 第二步:安装cordova 在命令行输入如下命令,安装cordova...如何创建项目 cordova命令创建原始cordova项目: cordova create MyApp ionic命令创建ionic格式项目: ionic start myApp tabs //创建带有
Apache Cordova:Ionic使用Apache Cordova编译为mobile App,并提供了ngCordova库--使用AngularJs扩展的Cordova API库。...+ 和 Android 4.1+版本,且有计划会支持Windows设备。...Git Node.js Bower Apache Cordova 在本教程中,我们使用Chrome用于开发、调试,同时,你也可以在Android和IOS设备上用其他浏览器来调试。...并未直接引用AngularJs文件,这个是因为Ionic(ionic.bundle.js文件)已经包含了AngularJs和其依赖,如UI-Router,故不需要直接引用了。...使用Wijmo 5 下面给Index.HTML文件中添加Wijmo 5控件,先需要在www/js/app.js文件中添加Wijmo的模块依赖——‘wj’。
Ionic这几个网站是需要经常看的,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网的组件和API文档。...开发环境配置 开发ionic项目,我们经常需要使用ionic-cli,其内置了很多命令,基本每个命令都带可选的参数,如参数--help,要想知道某个命令的详情,在敲入命令后面加上--help即可,如敲入以下命令...成功运行界面 如果你的是苹果系统,装了xcode,可以敲入以下命令直接在真机或模拟器中运行。...ionic cordova run ios 如果是window系统,配好了android环境,可以敲入: ionic cordova run android 其中,注意下cordova和ionic cordova...2)覆盖主题中个别样式 同样是在src/theme/variables.scss文件,如果你对默认的样式不太满意,可以覆写对应的Ionic变量,如基本的背景色、文字颜色、组件宽高等等,下面代码演示设置统一背景色和文字字体
/src/index.html => App主要入口,用来设置脚本和CSS ./src/app/app.module.ts => App入口 ./src/pages => 放置生成的页面 ....常用命令 打印出Ionic运行环境信息 ionic info 更新Ionic到最新版本 npm install -g ionic@latest 生成新的page、provider等 ionic generate...[] [] []: e.g. component, directive, page, pipe, provider, tabs 在浏览器中运行调试,可打开iOS、...Android、Windows3个界面 ionic serve --lab 生成一个平台图标、启动画面 ionic cordova resources ios ionic cordova resources...ionic cordova build ios --prod 添加、删除插件 ionic plugin add cordova-plugin-camera ionic plugin rm cordova-plugin-camera
将res中的所有文件夹复制到demo\platforms\android\res下,res里面的同名文件夹覆盖(注意:保留该文件夹下原本的values文件夹和xml文件夹)。...再ionic run android --prod试试是不是图标和启动画面换成你自己的了?...2017-4-5补充 原因是cordova版本过高,所以解决方式很简单,降低cordova版本,目前是6.4.0,降低到6.3.1: 卸载cordova npm uninstall -g cordova...重新安装cordova cnpm install -g cordova@6.3.1,这里使用cnpm,npm太慢了 使用cordova -v查看版本cordova版本是否降低为6.3.1了 ionic...platform rm android ionic platform add android 最后查看platform/android/res是否是期望的图标和启动画面或者build一个.apk在手机上看
领取专属 10元无门槛券
手把手带您无忧上云