单刀直入>>>>>>>>>>>>>>

一，配置开发环境：

    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，

    如果有版本信息输出，则已经安装了;否则请到下面地址处下载：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    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