本文详细介绍了如何配置Ionic和Cordova的开发环境，包括Node.js、Cordova、Ionic的安装，以及针对Android和iOS的环境搭建。在Android环境中涉及了JDK、ANT、SDK的安装和配置，解决网络问题，添加目标Android版本。对于iOS环境，介绍了ios-sim的安装以及使用。最后，讲解了如何创建项目、安装插件、真机调试及打包发布。
单刀直入>>>>>>>>>>>>>>
一，配置开发环境：
1、首先需要安装Node.js，确认电脑已安装了node.js，否则请下载安装node.js;
检查安装是否成功打开命令行输入一下两个命令(输出版本号就是成功)
node -v
npm -v
下载node.js：https://nodejs.org/download/ 并双击安装
2、安装cordova和ionic
Cordova and Ionic command-line tools 的安装，直接在终端使用命令
windows：npm install -g cordova ionic
mac或linux: sudo npminstall -g cordova ionic
ionic emulate ios 或者 ionic run ios
安装注意操作系统用户要有密码哦，不然安装过程中提示你输入密码，直接回车是通过不了的
更新：npm update -g cordova
卸载：npmuninstall cordova -g
输入如下命令测试是否安装成功
cordova -v
ionic -v
这一步的主要问题是cordova安装包的镜像问题，由于镜像在国外国内网络不行，如果出现安装失败的情况，这就要使用代理，在命令行输入一下两个命令进行尝试
npm config set registry http://registry.cnpmjs.org
sudo npm install -g cordova
第一个命令式配置代理
第二行全局安装cordova -g代表全局，需要root权限所以要sudo，需要管理员密码
好了，这时候该安装的都安装，下面来建一个ionic工程吧
二、IONIC安卓环境搭建：
1，安装jdk
先搞清楚自己是否已经安装，在命令行下：java -version，
如果有版本信息输出，则已经安装了;否则请到下面地址处下载：Java Downloads | Oracle
2、下载ant： HYPERLINK
http://ant.apache.org/bindownload.cgi
增加环境变量 “/etc/profile”
(环境变量在当前用户根目录下的.bash_profile里，如果之前没有设置过默认是没有.bash_profile文件的，可以手工创建一个。）
export ANT_HOME=/Users/zhangkui/Documents/ionic/Android/apache-ant-1.9.7
export PATH=${PATH}:${ANT_HOME}/bin
相关命令：
sudo -i (root)
vi filename
a、修改//输入i 进入编辑模式进行修改
b、保存//:q! 退出不保存 :wq! 退出保存
3、下载安卓sdk，并添加环境变量
export ANDROID_HOME=/Users/zhangkui/Documents/ionic/Android/android-sdk-macosx
export ANDROID_TOOLS=$ANDROID_HOME/tools
export ANDROID_PLATFORM_TOOLS=$ANDROID_HOME/platform-tools
PATH=$PATH:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLSone
4、安装对应的sdk版本
点击android-sdk-macosx/tools下面的android可以打开android sdkmanager，在这里选择我们要安装的sdk版本，
注意:由于国2内2网2络2问2题，列表打开会很慢，"ssl-google"。。。连不上，显示不了我要装的sdk版本，以至于我去找v2p2n2翻2墙，但是最后不发现不需要的，过了连不上的那一步，最终还是能把所有的版本刷出来的，但是要耐心等待很久，真的很久很久。。。
添加安卓模拟器：
android sdkmanager—tools—Manager…
5、给项目添加安卓
ionic platformadd android
查看android版本信息：android listtargets
一开始我下载的安卓sdk没有安装21这个版本，因此报错了
[Error: Pleaseinstall Android target: "android-21".
Hint: Open the SDK manager by running: /Users/apple/Documents/work/adt-bundle-mac-x86_64-20131030/sdk/tools/android
You will require:
1. "SDK Platform" for android-21
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
参考上一步进行相应版本的安装即可
根据本地SDK环境配置android版本！！！
First of all,sorry for my dummy english. I just had the same problem and I fix it changingthe target:
# Projecttarget. target=android-22 (I had setthis to android-23)
This should bedone in two files:
yourApp/platforms/android/project.properties yourApp/platforms/android/CordovaLib/project.properties
Also themanifest should be updated:
<uses-sdkandroid:minSdkVersion="16" android:targetSdkVersion="23"/>
过程还还出现了下面的错误
Error:ANDROID_HOME is not set and "android" command not in your PATH. You mustfulfill at least one of these conditions.
给目录设置写权限既可以解决 chmod -R 777android-sdk-macosx
4、编译
ionic build android
中间发生错误：
ERROR : No emulatorimages () found.
添加安卓模拟器：
android sdkmanager———tools———Manager…
编译成功后会在platforms/android/ant-build目录下生成apk文件，直接传到手机上就可以安装运行啦
5、模拟器运行
ionic emulate android
这个很慢，其实最后开发中基本都不用模拟器运行，直接在浏览器进行调试就ok了
三、IONIC IOS环境搭建：
因为是在mac系统下进行配置，所以容易多了
1、安装ios模拟器
sudo npminstall -g ios-sim
2、ionic 插件安装与卸载
ionic plugin list //列出所有已安装插件
ionic pluginremove 插件名 //卸载插件
ionic plugin add 插件地址 //安装插件
3，添加ios平台、编译、模拟器运行
ionic platform add ios
ionic build ios
选择模拟器型号：ionic run ios _target iPad-Air
四，项目构建
在合适的位置执行命令创建工程 ionicstart myApp，要稍微等待一会完成工程创建，默认会创建一个有tab页的模板工程，如果工程创建成功，我们cd myApp目录下，执行命令ionic serve,会自动打开浏览器显示页面，详细如下：
1、执行接下来的命名，创建一个新项目
ionic start myFirstApp sidemenu
其中“myFirstApp”是我们的项目的名称，"sidemenu"是项目模板，其中可用的模板还有:
blank ................ A blank starter project for Ionic
complex-list ......... A complex list starter template
maps ................. An Ionic starter project using Google Maps and a side menu
salesforce ........... A starter project for Ionic and Salesforce
sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area
tabs ................. A starting project for Ionic using a simple tabbed interface
tests ................ A test of different kinds of page navigation
2、cd到项目的根目录下，安装各个插件（视项目定）
3、执行接下来的命令来添加平台：
----ionic platform add ios
<移除平台：ionic platform remove ios>
这样执行完毕后就已经将iOS平台添加到项目中了，即可完成iOS原生代码的添加；
ionic是跨平台的开发框架，当然也可以执行如下命令添加Android平台，只是配置环境时的命令不需要sudo；
ionic platform add android
4、将刚刚创建的项目安装到iPhone中
ionic build ios
然后再输入：
ionic run --emulate ios / ionic run iOS
就会自动打开iPhone模拟器并进行安装。
或者在项目的根目录下运行模拟器任务
ionic run ios --target iPhone-6
5、若是android项目安装到Android设备或模拟器上，同样类似的方法：
ionic build android
然后输入：
ionic run --device android
或者输入：
ionic run --emulate android
这样会安装到android自带模拟器上。
6、若要在网页中预览刚才的项目，执行
ionic serve
即可预览项目。
在终端中输入q会停止服务。
五、常用插件
cordova plugin add com.ionic.keyboard &&
cordova plugin addorg.apache.cordova.console &&
cordova plugin add org.apache.cordova.device &&
cordova plugin add org.apache.cordova.device-motion&& cordova plugin add org.apache.cordova.file &&
cordova plugin add org.apache.cordova.file-transfer&&
cordova plugin add org.apache.cordova.geolocation&&
cordova plugin add org.apache.cordova.inappbrowser &&
cordova plugin addorg.apache.cordova.network-information &&
cordova plugin add org.apache.cordova.splashscreen&&
cordova plugin addorg.apache.cordova.camera &&
cordova plugin add com.google.cordova.admob
六，mac 下真机调试 android 手机
第一步： 查看usb设备信息
在终端输入：system_profilerSPUSBDataType
可以查看连接的usb设备的信息
比如我的usb信息如下（部分内容）：
Spreadtrumphone:
ProductID: 0x5d04
Vendor ID: 0x1782
Version: 2.29
SerialNumber: 19761202
Speed: Upto 480 Mb/sec
Manufacturer: Spreadtrum
LocationID: 0xfa120000 / 6
CurrentAvailable (mA): 500
CurrentRequired (mA): 500
查看到我的android手机的VendorID: 0x1782，记住这个id
第二步： 创建、修改adb_usb.ini文件
输入： vi ~/.android/adb_usb.ini命令，在打开的 adb_usb.ini文件 中添加0x1782， 然后保存退出或者使用其他的文本编辑器去进行修改都可以的（注：请保证ini里面没有空行，否则会有错误 ADB server didn't ack）
注意：第一次添加时，adb_usb.ini文件并没有，需要自己创建一个，输入内容后保存就好了,对应的路径如下：
/Users/你的用户/.android/adb_usb.ini
备注：
.android目录是隐藏的，需要开启隐藏目录显示。
命令行输入显示Mac隐藏文件的命令：defaults write com.apple.finderAppleShowAllFiles -bool true
(隐藏Mac隐藏文件的命令：defaults write com.apple.finderAppleShowAllFiles -bool false)
输完单击Enter键，退出终端，重新启动Finder就可以了
重启Finder：鼠标单击窗口左上角的苹果标志-->强制退出-->Finder-->重新启动
第三步：重启adb ,找到adb这个命令,
adb kill-server
adb start-server
adb devices //查看已连接的设备
就可以看到列表了！
第四步：进入DDMS，已经可以找到的我的android手机了，开始调试吧！
有时 adb devices不能显示连接设备，需要拔掉数据线，多插几次，并且退出终端，然后重新打开，再输入命令就能发现连接的设备
然后就可以通过：ionic run android-device 进行真机调试了
七、 ionic android打包
App用ionic开发完成后，就可以打包发布市场啦。发布一个App可以上传市场的包，关键要做两样东西：
一是打一个release包；
二是给包签名。
命令不多，但命令比较长，记录一下。
1，打包
首先生成 release包
cordova build--release android # 记得加上--release 参数，打包正式包；不然会打出debug包，ionic bulidandroid //打包测试包
执行完这条命令后，cordova会根据你的config.xml生成一个未签名的apk包。在platform文件夹可以找到apk包（platforms/android/ant-build），接下来就可以签名了。
2，生成安全钥匙
App签名需要用到安全钥匙，你可以用JDK的keytool工具生成，执行下面命令：
把my-release-key和alias_name换成你的名字
keytool-genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA-keysize 2048 -validity 10000
执行后需要回答一些问题，正常填写就好了
Enterkeystore password:
Re-enternew password:
What isyour first and last name?
[Unknown]: test
What is thename of your organizational unit?
[Unknown]: test
What is thename of your organization?
[Unknown]: test
What is thename of your City or Locality?
之后会生成一个your_name.keystore文件，这就是你的安全秘钥，记得要好好保管，下次更新应用要用到，丢失就大事了，你以后就甭想更新市场上的应用了。
3，签名
使用JDK中的jarsigner工具为apk签名，命令如下：
my-release-key和alias_name换成你的名字
jarsigner-verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystoreHelloWorld-release-unsigned.apk alias_name
执行后会生成一个已签名成功的apk，你可以用这个包发布市场。
4，优化（可选）
使用Zipalign优化，Zipalign是一个android平台上整理APK文件的工具，它首次被引入是在Android 1.6版本的SDK软件开发工具包中。它能够对打包的Android应用程序进行优化， 以使Android操作系统与应用程序之间的交互作用更有效率，这能够让应用程序和整个系统运行得更快。
命令如下：
zipalign-v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
Done Done Done
扫一扫
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
