『壹』 如何配置android studio環境實現ionic的編譯,運行與打包
1.配置android studio 環境;
1.1配置java環境
下載jdk,jre(jre好像是跟jdk一起的,jdk1.8.0_101,jre1.8.0_101)
參考文檔:如何配置jdk,jre的參考文檔
配置的環境變數:PATH(jre/bin以及bin目錄),ClASSPATH(lib以及lib/tools.jar目錄),JAVA_HOME(jdk的安裝目錄)
測試配置java變數是否成功的方法是:在dos命令行輸入:java -v,以及javac
1.2配置ant環境(同樣需要配置環境變數)
下載地址:ant下載地址
配置環境變數:系統變數PATH(ant的bin目錄環境);
測試ant安裝是否成功:在dos命令行輸入ant -v 如果顯示ant版本說明安裝成功。
1.3下載Android studio(目前安裝的是2.2版本的android studio;)
下載地址:android studio 下載地址
配置環境變數:系統變數:ANDEOID_HOME(SDK 目錄),PATH(SDK的tools以及platform-tools目錄);
測試android studio是否安裝成功:dos命令行輸入android -h,輸出option相關信息表示成功!
備註:Path:配置包或者二進制文件夾的路徑;
ClassPath:配置的是類的路徑;
『貳』 非原生App開發的基本步驟(以安卓端為例)
主要使用:
移動端:ionic、cordova
後端:CoreThink
一、安裝
1.安裝node.js
2.安裝git
3.安裝ionic & cordova:
命令行輸入:npminstall –g cordova ionic
註:-g表示全局安裝,也可以進入指定的目錄安裝,但這里推薦全局安裝,安裝後的目錄為C:/users/Administrator/AppData/Roaming/npm/node_moles
4.安裝Java JDK
5.安裝Apache Ant
6.安裝Android SDK(從這里開始後面基本以android為例,ios類似)
7.設置環境變數:
①打開計算機->系統屬性->高級系統設置->環境變數
②在系統變數中新建ANDROID_HOME變數,變數值為sdk所在目錄,如圖
③新建CLASSPATH變數,變數值為.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
④新建JAVA_HOME變數,變數值為jdk所在目錄
⑤編輯系統變數中的path變數,不要刪原來的變數值,在原值後面添加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\build-tools;%ANDROID_HOME%\platform-tools
註:這里是添加了jdk\bin、jdk\jre\bin、sdk\tools、sdk\build-tools、sdk\platform-tools的路徑,互相以英文分號隔開
8.創建項目:
命令行cd進入任何你喜歡的目錄,ionic startAnyNameYouLikeblank,如果一切順利,就會在你指定的目錄新建一個你喜歡的名字的文件夾,並在裡面初始化一個ionic項目。
9.添加平台
進入剛才新建的項目的目錄,命令行輸入ionic platform add android
二、在項目目錄中有一個www的文件夾,裡面的文件有html,js,css等,可隨意編寫,在platform中的www文件最好不要動它。
三、測試項目
1.進入項目目錄,ionic build android編譯項目
2.測試項目的方法:
桌面瀏覽器測試法:ionic serve
模擬器測試法:這個比較煩,而且運行慢,破機子卡到爆,一直沒成功,所以略
手機瀏覽測試法: http://ionicframework.com/docs/guide/testing.html 自己看吧,略
手機測試法:連上數據線,打開開發者選項,執行ionic run android
四、編寫項目
http://ionicframework.com/docs/guide/building.html 英文太多,翻譯不出來
五、發布app,前面的准備就是為了這一步了
1.執行cordova plugin rm cordova-plugin-console,這一步是Before we deploy, we should take care to adjust plugins needed ring development that should not be in proction mode.
2.執行cordova build --release android,在platforms/android/build/outputs/apk,中會出現***-release-unsigned.apk,最前面取決於取了什麼名字
3.使用keytool打包私有密鑰:執行keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
4.給沒有簽名的apk簽名:執行jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
5.最後一步,執行zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
六、基本步驟到此結束,可能會出現各種報錯的情況,只能具體問題具體分析了,
參考網址:
http://ionicframework.com/docs/guide/preface.html
https://cordova.apache.org/docs/en/latest/guide/cli/index.html#link-3
http://developer.android.com/sdk/installing/adding-packages.html
https://developer.apple.com/ios/download/
『叄』 怎麼編譯ionic demo的例子
沒有。 ionic是一個用來開發混合手機應用的,開源的,免費的代碼庫。可以優化html、css和js的性能,構建高效的應用程序,而且還可以用於構建Sass和AngularJS的優化。ionic會是一個可以信賴的框架。
『肆』 如何開發Ionic插件
1. Cordova Plugin基礎
1.1. 目錄結構層次
IONIC下的插件都是遵循CORDOVA插件([BIBAPACHECORDOVA])規范,同時提供與CORDOVA類似的PLUGIN子命令來管理插件(IONIC PLUGIN XXX)。
下面是插件管理命令中的添加、刪除及列舉等基本使用方法:
$ ionic plugin list
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-statusbar 1.0.1 "StatusBar"
cordova-plugin-whitelist 1.0.0 "Whitelist"
ionic-plugin-keyboard 1.0.7 "Keyboard"
plugin-mydemo 1.0.0 "MyDemo"
添加(add)一個插件的時候,若指定的是本地的路徑,則是將本地路徑下的目錄文件到plugins/下。若是插件名,則會自動連接到網上下載對應的插件。
由於插件是遵循Cordova插件規范,所以每個插件的代碼目錄層次結構都是高度類似的。每一個插件都是plugins/的一個子目錄,Figure-1描述了插件共同的基本目錄結構框架。
Figure 1. 插件的目錄結構
從圖中可以看出,插件框架中將不同平台的實現代碼都放在各自不同的目錄下(android/ios),通過ionic統一生成各自對應平台的應用程序。
為了方便管理plugins/下多個插件,通常在plugins/下會有一個總的管理文件,比如編譯android平台的時候,會有一個android.json文件,裡面放著當前插件的簡單信息。
當用戶使用ionic plugin add/remove命令來添加、刪除插件的時候,android.json也會自動的把相應插件定義條目添加或者刪除掉。
1.2. 插件工作原理分析
上一節我們已經清楚了一個插件的代碼目錄結構,那麼一個插件是如何正確地在IONIC框架下運行的呢? 前台的HTML/JS代碼又是如何與後面具體平台做數據交互的呢?
這個就需要對插件的工作原理及各個模塊之間的流程關系有一個基本的了解[1]
為了讓插件能夠訪問具體平台系統的代碼,Cordova提供了對應的標准封裝API來完成,下面的圖簡單地示意了Android平台情況下的封裝過程:
Figure 2. 插件封裝調用圖
當用戶ionic
build
android進行第一次編譯的時候,會自動將插件下的Java文件到platform/android/目錄下面,同時將JS也到platform/android/目錄下,最終使用Android的編譯工具(aapt/aidl/dx/apkbuilder等)生成.APK應用程序。
這里需要注意的是,插件中的Java文件默認下只會在第一次編譯的時候自動放到platform/android/,之後即使用戶修改了插件目錄下面的Java文件,編譯的時候仍然是使用platform/android/下的Java文件。
解決的方法可以是在編寫自己插件調試的時候,在platform/android/下建立一個symbol link, 指向插件中的Java文件。
這樣可以保證修改的Java文件會參加編譯。
1.3. 數據的交互
從\REF{SECIONICPLUGINFLOW}節我們已經清楚JS和ANDROID平台之間分別通過JS的CORDOVA.EXEC()和JAVA的CORDOVAPLUGIN.EXECUTE()函數來對接。
這兩個介面的參數對應關系如下所示:
由於JS發送到Java的數據已經作為函數的參數傳入, 所以函數中的回調參數,主要是幫助Java側反饋數據給JS側所用。
Cordova使用了org.apache.cordova.PluginResult來完成,當中的PluginResult.Staus代表JS調用插件成功與否的狀態。
通常代碼中判斷狀態值是否為PluginResult.Staus.OK,來確認調用結果成果或者失敗
2. 製作插件
實際工作中,我們往往需要自己編寫滿足自己項目需求的插件。這里將逐步介紹編寫插件的步驟和注意事項。
2.1. PLUGMAN
也許IONIC的框架編寫者覺得JS開發人員只要會怎麼調用和刪除插件就足夠了。
所以默認下,ionic的plugin子命令,只是給JS開發者來add/remove編寫好的插件。它並沒有, 也不提供start/create等類似的生成插件代碼框架的功能選項。
若我們需要自己編寫自己的插件,則可以使用額外的一個叫做plugman的工具[2], 該工具可直接通過npm來安裝。
安裝成功後,就可以使用plugman命令來自動生成插件代碼框架,避免手工建立和輸入代碼文件的工作:
$ sudo npm install -g plugman
$ plugman create --name plugin-myspeech --plugin_version 0.1 --plugin_id org.foo
$ cd plugin-myspeech
$ plugman platform add --platform_name android
上述命令將會生成一個plugin-myspeech的目錄,同時會自動生成plugin.xml、src以及www目錄。
當使用platform add添加完android支持後,對應的Android Java代碼框架也會自動生成。
同理,plugman platform add --platform_name ios添加iOS支持後,和iOS相關的代碼框架也自動生成。
2.2. 編寫插件
這里介紹一個自己寫的ANDROID平台下的簡單PLUGIN,演示前台到後面具體平台實現的流程。
插件本身邏輯非常簡單: 得到JS請求後,把當前手機的Android系統的版本信息,並發送回前端。
通過plugman命令生成基本插件代碼框架:
$ plugman create --name MyDemo --plugin_version 0.1 --plugin_id org.ioniconline
$ cd MyDemo
$ plugman platform add --platform_name android
自動生成的代碼框架中,定義了coolMethod方法,我們可以在Java代碼中處理該請求
public class MyDemo extends CordovaPlugin {
public boolean execute() {
if (action.equals("coolMethod")) {
Log.e("MyDemo", "process the req");
String str = android.os.Build.VERSION.RELEASE;
PluginResult r = new PluginResult(PluginResult.Status.OK, str);
r.setKeepCallback(true);
callbackContext.sendPluginResult(r);
return true;
}
return false;
}
}
至此,一個插件的功能已經完成。
接下來我們在自己的ionic應用中添加該插件。用戶可以指定自己剛剛編寫的控制項文件目錄位置。該示例插件已經存放在github上,所以可以從github上直接添加:
$ ionic plugin add https://github.com/yangsongx/MyDemo
這樣會在當前應用的plugins目錄下生成org.ioniconline目錄,裡面放的就是前面編寫的插件代碼。
在需要調用Android介面的地方加上JS代碼:
function getVersion() {
cordova.plugins.MyDemo.coolMethod('useless',
function(okData) {
alert(okData);
},
function(failData) {
alert(failData);
});
}
成功情況下,會彈出包含Android系統版本號數據的對話框。比如在我華為P7上返回的是4.4.2
Figure-\ref{figIOnicMyDemo}演示了整個代碼在各個模塊間的調用關系。完整的MyDemo的插件代碼可以從github[3]上得到。
Figure 3. MyDemo插件邏輯流程
每個Plugin需要輸出(export)的介面都需要使用mole.exports的命令來完成。
var myApis = {};
myApis.foo1 = function(a,b) {
cordova.exec(...);
};
myApis.foo2 = function(a,b,c) {
cordova.exec(...);
};
MODULE.EXPORTS = MYAPIS;
2.3. 注意事項
不要直接修改Plugin中的Java代碼,這個代碼不參與編譯。
原因: 第一次編譯目標應用時,ionic會將Plugin中的Java代碼到platform/下編譯。但下次再進行編譯的時候不會在rJava代碼,所以參加編譯的實際上只是platform/下的Java代碼。
plugin中的js可以直接修改,而且每次重新編譯都參加編譯。
原因: ionic下的JS是在Cordova上封裝了一層,所以每次編譯,需要將ionic下的JS轉換成Cordova JS才能正確工作
使用exec()中的service參數必需和插件plugin.xml中的featur定義的一致,否則會有class not found錯誤
報method not found異常, 插件中的js腳本未正確地使用mole.exports聲明
Further Reading
『伍』 如何配置android studio環境實現ionic的編譯,運行與打包
1.1配置Java環境
下載jdk,jre(jre好像是跟jdk一起的,jdk1.8.0_101,jre1.8.0_101)
參考文檔:如何配置jdk,jre的參考文檔
配置的環境變數:PATH(jre/bin以及bin目錄),ClASSPATH(lib以及lib/tools.jar目錄),JAVA_HOME(jdk的安裝目錄)
測試配置java變數是否成功的方法是:在dos命令行輸入:java -v,以及javac
1.2配置ant環境(同樣需要配置環境變數)
下載地址:ant下載地址
配置環境變數:系統變數PATH(ant的bin目錄環境);
測試ant安裝是否成功:在dos命令行輸入ant -v 如果顯示ant版本說明安裝成功。
1.3下載Android studio(目前安裝的是2.2版本的android studio;)
下載地址:android studio 下載地址
『陸』 如何搭建Ionic環境以及打包成安卓apk
1.Ionic是什麼?Ionic的生態系統基於Angular和Cordova,前者是web應用框架,後者是構建和打包原生應用的工具。Ionic是將HTML,CSS,JS,Angular,Cordova等技術進行整合,成為一個非常強大的移動端應用開發平台。
2.如何搭建環境?
如果你現在要使用Ionic來架構應用,你應用要有以下幾個步驟。
1>安裝node.js。可以訪問[nodejs官網]()下載對應平台的安裝包。如果你已經安裝了node,請把它升級為最新版本。安裝完成後,可以在OS X的終端後者windows的命令提示符中運行下面的代碼來驗證是否安裝成功。
$ node -v1
如果出現版本號說明安裝成功。(忽略$符號,以下同理)
2>安裝Ionic和Cordova。使用一條命令就能安裝Ionic和Cordova。執行之前請確保你已經安裝了git:
$ npm install -g cordova ionic1
這條命令需要一點時間,請耐心等待。安裝完成後,運行下面的命令來確認已經安裝成功:
$ cordova -v
$ ionic -v 12
同樣,這里出現版本號說明安裝成功。注意:這里需要配置node的環境變數,如果你不清楚環境變數如何配置,網路一下啦!
3.是時候創建一個應用了。
Ionic提供了一個簡單的start命令,幾秒就可以創建一個新項目,在你想要創建項目的文件夾下運行如下代碼就可以輕松創建:
$ ionic start demo
$ cd demo12
程序可能會問你是否創建一個Ionic賬戶,暫時可以無視它。ok創建成功後,你可以在你的文件下面看到demo文件夾,進入文件夾,你可以看到一串目錄。這是Ionic的默認模板。
重點介紹以下www目錄,這里進去我們可以看到css,js,lib,image,index,template等文件或者文件夾,這里前端人士應該很熟悉啦,這里就是你這個應用所有的前端代碼,在這裡面編寫你的代碼吧!
Ionic有個很牛叉的地方,當你輸入如下代碼後,你可以在瀏覽器中預覽應用,當你在編寫代碼的時候,只需要保存,頁面就好自動刷新,而不需要你手動刷新頁面,這個angular又更進一步啦!很神奇有木有...
$ ionic serve1
執行的時候會提醒你選擇地址,多數情況下選擇localhost即可。程序會自動打開電腦中的默認瀏覽器並訪問8100埠。你也可以直接在瀏覽器中輸入localhost:8100。這里建議使用Chrome或者Safari。IOS的WebView使用的是Safari,Android使用的是Android瀏覽器(跟Chrome的相似度極高)。所以很明顯看到用這兩個瀏覽器模擬的好處,嘿嘿!
4.如何編譯並發布應用?當你已經順利完成你的應用代碼部分的時候,你現在所需要的就是將你的應用打包並且發布了。
第一步:創建一個獨一無二的圖標。圖標的設計無非有以下幾點:簡單,讓人印象深刻,不受尺寸限制,顏色不要太復雜。創建好你的圖標之後,請以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。然後使用如下命令,就可以生成不同尺寸的圖標:
$ ionic resources -icon1
第二步:創建啟動頁面圖片。啟動畫面的源文件至少需要2208px×2208px,創建完成後,保存為
resource/android/splash.png和resource/android/splash.png。
然後使用如下命令就可以生成不同尺寸的啟動畫面圖片:
$ ionic resources --splash1
第三步:編譯Android應用(這里以安卓應用為例)。
1>配置應用的簽名。使用如下命令來配置你的簽名(keystore):
$ keytool -genkey -v -keystore know_your_brew.keystore -alias know_your_brew -keyalg RSA -keysize 2048 -validity 100001
注意:請使用你應用的名字來替代know_your_brew.這個命令可以生成一個新文件,在本示例中為know_your_brew.keystore。
在應用的整個生命周期中將重復使用同一個keystore,請保存好它。
2>使用Cordova編譯應用。使用build命令編譯一個應用的發布版本:
$ cordova build --release android1
這個命令會生成一個新的apk文件。此時還未簽名。
3>簽名應用文件。現在我們要用之前創建的keystore文件來簽名生成的未簽名版本的應用。使用如下命令來簽名:
$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore know_your_brew.keystore unsigned_name.apk know_your_brew1
注意:這里請使用keystore生成文件名來替換know_your_brew示例名稱,同時用真實的應用文件名替換掉unsigned_name.apk。
這個過程需要一點時間,期間會提示輸入keystore的密碼。命令會修改apk文件並對其進行簽名。
『柒』 如何在Windows下使用ionic打包與開發IOS程序
1、安裝VMware和Mac OS
參考網上教程
2、ionic開發ios程序
3、安裝Xcode
為什麼要安裝Xcode呢?
ionic開發Android程序都不需要安裝eclipse等IDE,只要一個能寫SSS,JS
,HTML的IDE就行(Hbuilder,WebStrom,Sublime Text), 開發完成之後不就執行個ionic platform
add android,ionic build android,然後就能生成一個.apk文件,給手機上一安裝O了。
ionic開發ios程序就得安裝Xcode
IDE,這是因為蛋疼的ios程序無法直接使用命令生成,使用命令只能生成.project文件,然後再使用Xcode
IDE將.project文件轉成.ipa文件,更讓人蛋疼的是這個ipa文件居然也不能被直接安裝到愛瘋上,只能先上傳到APP
Store,人家審核通過之後,我們再從APP
Store上下載。(看到這你可能快瘋了,但是沒法啊,誰讓人家NB呢。好了廢話少說了,乖乖安裝Xcode吧)
4、安裝ionic開發環境
(這個和在windows上安裝android開發環境類似)
5、安裝Nodejs
網路下載,傻瓜式安裝,注意:你現在是Mac本,所以需要下載Nodejs for mac的,別下錯了
6、安裝cordova,ionic
sudo npm install -g cordova
sudo npm install -g ionic
或者合成一句統一安裝
sudo npm install -g cordova ionic
7、創建項目
ionic start firstIonicProjectForIos [tabs][blank][sidememu]
8、瀏覽器中運行項目(調試項目)
cd firstIonicProjectForIosionic serve(自動在afai瀏覽器中打開)
9、模擬器中運行項目
因為apple開發的證書限制我們在沒有申請購買apple賬號的情況下,使用虛擬機來部署我們的應用,在部署之前需要使用npm安裝一個ios-sim插件用來調用模擬器的,執行命令:
sudo npm install -g ios-sim
然後執行
ionic platform add ios (添加ios平台)ionic build ios
開始編譯項目,編譯完成之後用Xcode打開開發目錄下platform->ios->myIonic.xcodeproj的項目文件,Xcode中選擇要運行的虛擬機版本並執行快捷鍵cmd+R運行虛擬機,虛擬機打開後會自動運行你應用。
當然你也可以使用命令:
ionic emulate ios(在ios模擬器中打開)/ionic run ios(我的報錯了)
PS: 為什麼不用run ios 命令直接啟動虛擬機呢,因為我的環境下執行run會報錯,虛擬機會打開但是無法運行程序,找了半天解決解決方案沒有結果,索性直接用Xcode了,效果是一樣的
10、打包項目
能使用Ionic來開發app的很可能對Ios和android的app打包發布流程不是很熟悉,我這里簡單說明下:
ionic build android命令執行完成之後會在項目目錄/platforms/android/build/outputs/apk目錄下面生成.apk文件。
但是ionic build ios命令執行完成之後不會生成.ipa文件,只會在項目目錄/platform/os目錄下生成.xcodeproj文件,這個文件需要藉助Xcode才能將其打包成.ipa文件。
因此接下來的任務就成了使用Xcode打包.xcodeproj成為.ipa的事情了。
『捌』 如何搭建Ionic環境以及打包成安卓apk
1.Ionic是什麼?Ionic的生態系統基於Angular和Cordova,前者是web應用框架,後者是構建和打包原生應用的工具。Ionic是將HTML,CSS,JS,Angular,Cordova等技術進行整合,成為一個非常強大的移動端應用開發平台。2.如何搭建環境?如果你現在要使用Ionic來架構應用,你應用要有以下幾個步驟。1>安裝node.js。可以訪問[nodejs官網](splash.png。然後使用如下命令就可以生成不同尺寸的啟動畫面圖片:$ionicresources--splash1第三步:編譯Android應用(這里以安卓應用為例)。1>配置應用的簽名。使用如下命令來配置你的簽名(keystore):$keytool-genkey-v-keystoreknow_your_brew.keystore-aliasknow_your_brew-keyalgRSA-keysize2048-validity100001注意:請使用你應用的名字來替代know_your_brew.這個命令可以生成一個新文件,在本示例中為know_your_brew.keystore。在應用的整個生命周期中將重復使用同一個keystore,請保存好它。2>使用Cordova編譯應用。使用build命令編譯一個應用的發布版本:$cordovabuild--releaseandroid1這個命令會生成一個新的apk文件。此時還未簽名。3>簽名應用文件。現在我們要用之前創建的keystore文件來簽名生成的未簽名版本的應用。使用如下命令來簽名:$jarsigner-verbose-sigalgSHALwithRSA-digestalgSHAL-keystoreknow_your_brew.keystoreunsigned_name.apkknow_your_brew1注意:這里請使用keystore生成文件名來替換know_your_brew示例名稱,同時用真實的應用文件名替換掉unsigned_name.apk。這個過程需要一點時間,期間會提示輸入keystore的密碼。命令會修改apk文件並對其進行簽名。