ionic framework跨平台开发,从环境搭建到项目开发

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

一,配置开发环境:

    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




猜你喜欢

转载自blog.csdn.net/zhangkui0418/article/details/79363628