Ionic是一款HTML5手機應用開發框架,可以說是AngularJS移動端解決方案,基於PhoneGap的編譯平臺,可以實現編譯成各個平臺的應用程序。一次開發,處處運行
一、基礎環境
安裝nodejs或者Idea,jdk,Android sdk(這個可以通過Android studio安裝) 自行安裝,這裏不做詳細介紹了
二、Ionic環境搭建
(1)安裝ionic和cordova
npm install -g cordova ionic
安裝成功之後,可以查看版本號
windows:
ionic –v
cordova –v
mac:
ionic -version
cordova –version
注意:這裏安裝的ionic和cordova都是最新的版本,後面建項目的時候要注意
(2)創建ionic項目
提供了三種創建項目的模板
ionic start appdemo blank –type=ionic1 創建一個空白的app項目
ionic start appdemo tabs –type=ionic1 創建一個帶有tabs項目
ionic start appdemo sidemenu –type=ionic1 創建一個帶有滑動的項目
說明:這裏–type=ionic1這是因爲我要創建一個ionic1.X版本的項目,如果我直接不添加type,如:
ionic start appdemo blank
那麼我就會是基於最新的版本創建的項目,ionic1.X和2.X 3.X的整個目錄結構都是不一樣的,這個根據個人需要
(3)創建項目完成之後
- www就是開發的項目源碼
- platforms下面就是編譯後的項目,下面應該有2個子目錄android和ios,分別針對不同的平臺
- resources是放資源圖片的,例如圖標、啓動圖片
(4)打包APP
進入項目目錄下面
cd ionic-app
添加平臺
ionic platform add ios
ionic platform add android
編譯:
ionic build ios
ionic build android
瀏覽器中運行
ionic serve
模擬器中運行:
ionic emulate ios
ionic emulate android
生成apk(這裏生成的是未簽名的apk):
cordova build -release android
打包ios只能在mac上進行,需要安裝xcode。
未簽名的apk生成了
(5)配置應用簽名
當前項目目錄下運行命令:
keytool -genkey -v -keystore your_app.keystore -alias your_app -keyalg RSA -keysize 2048 -validity 10000
注意:使用你應用的名字來替代your_app,這個命令會生成一個新的文件,在本示例中爲your_app.keystore
也可以使用Android killer工具直接簽名也可以
(6)現在使用keystore文件來簽名應用。
(我們先把已經生成的apk文件移到項目根目錄下,不然可能會報錯”無法打開 jar 文件: android-release-unsigned.apk”)
終端執行命令:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore exr.keystore android-release-unsigned.apk exr
期間會提示輸入keystore的密碼密鑰,命令會修改apk文件並對其進行簽名。
可以使用命令來驗證應用是否簽名成功
jarsigner -verify -verbose -certs apk文件名
(7) 優化APK文件
優化APK文件,使其減少在設備上佔用的空間和內存。我們使用zipalign工具,它使用簽名後的APK文件生成一個優化後的APK版本,用於應用上傳。
在android-sdk目錄裏,我搜到zipalign的命令的地址是:./build-tools/25.0.2下面,從終端進入android-sdk目錄下,執行命令:
open -e .bash_profile
打開.bash_profile文件,添加zipalign環境變量:
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/build-tools/25.0.2
保存關閉文件
執行命令:
source .bash_profile
然後返回到應用項目文件夾目錄下,執行命令:
zipalign -v 4 android-release-unsigned.apk exrapp.apk
完成後會返回
打包項目問題彙總看這裏http://blog.csdn.net/qq_32378595/article/details/79510367
參考文檔:
https://www.cnblogs.com/huangc83/p/6692340.html
https://www.cnblogs.com/jiangtengteng/p/6680654.html