㈠ Flutter(六)android與Flutter混合開發(Hybird)
如果我們目前的項目是Android的,但是接下來我們希望部分頁面可以使用Flutter進行開發,甚至我們希望在Native頁面中嵌入FlutterUI組件,那麼我們該如何實現呢?
假設你現在Android項目的目錄的結構是這樣的
這時候如果你想創建一個Flutter模塊,使得Android模塊和Flutter模塊之間可以進行交互,我們可以通過Android Studio新建一個Flutter Mole,具體過程是:File —> New —> New Mole ,之後選擇Flutter Mole,指定Project Location的路徑為
也就是說,最終你的項目結構會是這樣的
接下來在Android Mole的 build.gradle 文件中添加flutter依賴
先創建一個Flutter頁面
這里比較重要的是 window.defaultRouteName 這個欄位,這個欄位可以接收從Native傳遞過來的參數 (下文我們會介紹原生傳遞參數的方法),也就是說通過這個欄位我們就可以進行Flutter頁面的路由的分發
我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ,這里的 initialRoute 方法中傳遞的參數就對應Flutter層的 window.defaultRouteName
注意:需要在 AndroidManifest.xml 注冊 FlutterActivity
自己創建一個 FlutterAppActivity 繼承自 FlutterActivity
在 MainActivity 中啟動 FlutterAppActivity (另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity )
兩種啟動方式的區別
如果單純只是想打開一個Flutter頁面,兩種方式實際上基本沒有太大區別,第一種方式也許還會更簡單一點。但是,在Flutter開發中,我們往往還需要開發一些Native插件供Flutter調用,如果使用復寫 FlutterActivity 的方式更有利於我們在 FlutterActivity 中注冊我們的Native插件,所以實際開發中一般推薦使用第二種方式
擴展思考
initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉的,但是實際上他就是一個字元串,我們不僅僅可以傳遞一個路由名稱,有時候我們也可以通過這個參數傳遞一串JSON數據,然後在Flutter端進行解析,這樣我們就可以通過這個參數做更多的事情
activity_main.xml
FrameLayout 用於承載Flutter組件
MainActivity.java
使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中
運行結果
上半部分是原生的TextView,下半部分是Flutter的Text組件
本節主要介紹了Native和Flutter之間的頁面跳轉,以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數據交互
㈡ Android混合開發該怎麼搞
Cordova是一個廣泛使用的Hybrid開發框架,它提供了一套js和Native交互規范
在Cordova的SystemWebViewEngine類中可以
看到私有靜態void exposeJsInterface(WebView webView,CordovaBridge橋){
if((Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1)){
Log.i(TAG,「自Android版本以來已禁用addJavascriptInterface()橋接。」);
//錯誤是Java Strings不會自動轉換為JS字元串。
//在JS方面解決這個問題並不困難,但是更容易
使用提示橋來代替。
返回;
}
webView.addJavascriptInterface(新SystemExposedJsApi(橋), 「_cordovaNative」);
}
因此當Android系統高於4.2時,Cordova還是使用addJavascriptInterface這種方式,因為這個方法在高版本上安全而且簡單,低於4.2的時候,用什麼方法呢?
答案是WebChromeClient.onJsPrompt方法
WebView可以設置一個WebChromeClient對象,它可以處理js的3個方法
onJsAlert
onJsConfirm
onJsPrompt
這3個方法分別對應js的警告,確認,提示方法,因為只有提示接收返回值,所以js調用一個Native方法後可以等待Native返回一個參數。下面是cordova.js中的一段代碼:
/ **
*實現ExposedJsApi.java的API,但使用prompt()進行通信。
*這是在JellyBean之前使用的,其中addJavascriptInterface()被禁用。
* /
mole.exports = {
exec:function(bridgeSecret,service,action,callbackId,argsJson){
return prompt(argsJson,'gap:'+ JSON.stringify([bridgeSecret,service,action,callbackId]));
},
setNativeToJsBridgeMode:function(bridgeSecret,value){
prompt(value,'gap_bridge_mode:'+ bridgeSecret);
},
retrieveJsMessages:function(bridgeSecret,fromOnlineEvent){
return prompt(+ fromOnlineEvent,'gap_poll:'+ bridgeSecret);
}
};
然後只要在onJsPrompt方法中使用CordovaBridge來處理js的提示調用
/ **
*告訴客戶端向用戶顯示提示對話框。如果客戶端返回true,則WebView將假定客戶端將處理提示對話框並調用相應的JsPromptResult方法。
* <p />
*由於我們出於自己的目的黑客提示,我們不應該為此目的使用它們,也許我們應該破解console.log來代替!
* /
@Override
public boolean onJsPrompt(WebView視圖,String origin,String message,String defaultValue,final JsPromptResult result){
//與@JavascriptInterface橋不同,此方法始終在UI線程上調用。
String processedRet = parentEngine.bridge.promptOnJsPrompt(origin,message,defaultValue);
if(processedRet!= null){
result.confirm(processedRet);
} else {
dialogsHelper.showPrompt(message,defaultValue,new CordovaDialogsHelper.Result(){
@
Override public void gotResult(boolean success,String value){
if(success){
result.confirm(value);
} else {
result.cancel( );
}
}
});
}
return true;
}
㈢ html5 app開發框架有哪些
①:PhoneGap
PhoneGap 恐怕是最老的一個框架了,相信很多人都已經聽說過甚至使用過它,但是PhoneGap是基於開源的cordova商業版本。
②:Ionic
IONIC 是目前最有潛力的一款HTML5手機應用開發框架。通過SASS構建應用程序,它提供了很多UI組件來幫助開發者開發強大的應用。它使用 JavaScript MVVM框架和 AngularJS來增強應用。提供數據的雙向綁定,使用它成為Web和移動開發者的共同選擇。
③:Mobile Angular UI
Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應式移動開發HTML5框架。
Mobile Angular UI的關鍵字有:
Bootstrap 3
AngularJS
Bootstrap 3 Mobile組件,比如switches, overlays和sidebars,這些都是bootstrap中沒有的。
AngularJS moles, 比如 angular-route, angular-touch 和 angular-animate
響應式媒體查詢是將bootstrap作為單獨的文件,你只需要包含你所需要的東西。Mobile Angular UIu並不包含任何jQuery依賴,你需要做的只是通過一些AngularJS指令創建友好的用戶體驗。
④:Intel XDK
Intel XDK 是Inter開發的一款跨平台開發工具,我們可以很容易的通過Intel XDK開發應用,你需要做的只是下載他們的應用開發工具 ,有Linux、Windows和Mac版,它還提供了很多個開發框架,比如Twitter bootstrap, jQuery Mobile 和 Topcoat.
⑤:Appcelerator Titanium
Appcelerator』s Titanium 不同於其它框架的是,它是一個開源的框架。
Titanium是混合式移動應用開發的一站式解決方案,你只需要下載 Titanium studio就可以解決所有的事情,Titanium SDK包含了很多手機平台的APIs和後端雲服務。
Titanium使用 Alloy,Alloy是一個快速開發的手機應用MVC框架, 模塊式開發可以大大減小開發時間,提高代碼復用。
⑥:Sencha Touch
Sencha Touch 同樣也是HTML5手機應用跨平台開發框架,運行iOS/Android/Blackberry。它已經誕生很多年了,現在已經成為很常用的混合式編程開發框架。
Sencha Touch可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理,全部基於最新的HTML5和CSS3的 WEB標准,全面兼容Android和Apple iOS設備。
⑦:Kendo UI
Telerik』s Kendo UI 是一個強大的框架用於快速HTML5 UI開發。基於最新的HTML5、CSS3和JavaScript標准。
Kendo UI包含了開發現代JavaScript開發所需要的所有一切,包括:強大的數據源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控制項。
㈣ 請教各位大神,小弟不太理解什麼是android+html5混合式開發能否舉幾個具體的開發案例說明下
android+html5混合式開發的意思是比如有些用原生寫很復雜的頁面,用html5寫會非常簡單,安卓就用webview控制項載入就行了。、現在非常流行這樣。
㈤ android 混合開發 用什麼框架好
Cordova是一個廣泛使用的Hybrid開發框架,它提供了一套js和Native交互規范
在Cordova的 SystemWebViewEngine 類中可以看到
private static void exposeJsInterface(WebView webView, CordovaBridge bridge) {
if ((Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1)) {
Log.i(TAG, "Disabled addJavascriptInterface() bridge since Android version is old.");
// Bug being that Java Strings do not get converted to JS strings automatically.
// This isn't hard to work-around on the JS side, but it's easier to just
// use the prompt bridge instead.
return;
}
webView.addJavascriptInterface(new SystemExposedJsApi(bridge), "_cordovaNative");
}
因此當Android系統高於4.2時,Cordova還是使用 addJavascriptInterface 這種方式,因為這個方法在高版本上安全而且簡單,低於4.2的時候,用什麼方法呢?
答案是 WebChromeClient.onJsPrompt 方法
WebView可以設置一個 WebChromeClient 對象,它可以處理js的3個方法
onJsAlert
onJsConfirm
onJsPrompt
這3個方法分別對應js的 alert 、 confirm 、 prompt 方法,因為只有 prompt 接收返回值,所以js調用一個Native方法後可以等待Native返回一個參數。下面是 cordova.js 中的一段代碼:
/**
* Implements the API of ExposedJsApi.java, but uses prompt() to communicate.
* This is used pre-JellyBean, where addJavascriptInterface() is disabled.
*/
mole.exports = {
exec: function(bridgeSecret, service, action, callbackId, argsJson) {
return prompt(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
},
setNativeToJsBridgeMode: function(bridgeSecret, value) {
prompt(value, 'gap_bridge_mode:' + bridgeSecret);
},
retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
return prompt(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
}
};
然後只要在 onJsPrompt 方法中使用 CordovaBridge 來處理js的prompt調用
/**
* Tell the client to display a prompt dialog to the user. If the client returns true, WebView will assume that the client will handle the prompt dialog and call the appropriate JsPromptResult method.
* <p/>
* Since we are hacking prompts for our own purposes, we should not be using them for this purpose, perhaps we should hack console.log to do this instead!
*/
@Override
public boolean onJsPrompt(WebView view, String origin, String message, String defaultValue, final JsPromptResult result) {
// Unlike the @JavascriptInterface bridge, this method is always called on the UI thread.
String handledRet = parentEngine.bridge.promptOnJsPrompt(origin, message, defaultValue);
if (handledRet != null) {
result.confirm(handledRet);
} else {
dialogsHelper.showPrompt(message, defaultValue, new CordovaDialogsHelper.Result() {
@Override
public void gotResult(boolean success, String value) {
if (success) {
result.confirm(value);
} else {
result.cancel();
}
}
});
}
return true;
}
㈥ APP原生開發與混合開發是什麼意思
一、原生開發
原生開發(Native App開發),是在Android、IOS等移動平台上利用官方提供的開發語言、開發類庫、開發工具進行App開發。比如Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode進行開發。
通俗點來講,原生開發就像蓋房子一樣,先打地基然後澆地梁、房屋結構、一磚一瓦、鋼筋水泥、電路走向等,都是經過精心的設計。原生APP也一樣:通過代碼從每個頁面、每個功能、每個效果、每個邏輯、每個步驟全部用代碼寫出來,一層層,一段段全用代碼寫出來。
二、混合開發
混合開發(Hybrid App開發),是指在開發一款App產品的時候,為了提高效率、節省成本而利用原生與H5的開發技術的混合應用。通俗點來說,這就是網頁的模式,通常由「HTML5雲網站+APP應用客戶端」兩部份構成。
混合開發是一種取長補短的開發模式,原生代碼部分利用Web View插件或者其它框架為H5提供容器,程序主要的業務實現、界面展示都是利用與H5相關的Web技術進行實現的。
㈦ APP混合式開發框架太多了,該怎麼選擇
如果是商業用途的軟體,不建議用第三方的框架去做。這些第三方的都是大公司員工為了晉級和kpi做出的產物,很多維護了一段時間就不再維護了,因為框架在不同系統版本上以及未來的新版本及系統上的適配是非常耗費精力和財力的,大公司有很多機器和專門的qa去做這個東西,而且在商業上的收獲很少。一段時間後就不再維護了。如果你要做可以挑選一兩個用的比較多的,然後吃透起原理,自己弄。或者就用原始api進行按部就班的開發。
如果是商業軟體,切記不要使用這些第三方的混合式開發框架。短時間不會有什麼問題,一旦停止維護。你就哭去吧。
如果是自己做個demo漲漲知識就無所謂了
㈧ 為什麼國內突然冒出很多Hybrid混合移動應用開發框架
1、維護兩套(IOS,Android,甚至是wp)應用太麻煩了,時間成本,人力成本相對混合框架來說太高
2、對於小公司,並沒有ios或者android程式設計師,但是web程式設計師肯定是有的。所以因為成本或者別的原因,沒有招ios和android程式設計師,那麼最好的解決辦法就是Hybrid
Hybrid App、Web App、Native App,哪一種模式會成為App開發主流?下面phonegap100我與您一起分析為什麼Native和Web過時了,企業級移動開發開始用Hybrid App
隨著HTML5被過度熱炒和實際開發中遇到的效能以及體驗問題,Web App逐漸勢弱。但是Native App開發難度大、成本高、周期長等問題突出,特別是App不斷推陳出新,開發一個App的成本或許可以接受,但是維護一個Native App更新的成本則成了跨不過的懸崖。最終開發者和企業發現Hybrid App,這種既有跨平台開發周期短、成本低的基因,又能發揮Native App體驗和效能的優勢,Hybrid App混合式移動應用開發逐漸成為企業移動開發的首選。
android應用開發框架是 Application Framework. 其系統架構由5部分組成,分別是:Linux Kernel、Android Runtime、Libraries、Application Framework、Applications。
1.Linux Kernel
2.Android Runtime
3.Libraries
4.Application Framework
5.Applications
1.andbase中包含了大量的開發常用手段。
如網路下載,多執行緒與執行緒池的管理,資料庫ORM,圖片快取管理,圖片檔案下載上傳,Http請求工具,常用工具類(字串,日期,檔案處理,圖片處理工具類等),能夠使您的應用在團隊開發中減少冗餘程式碼,很大的提高了程式碼的維護性與開發高效性,能很好的規避由於開發疏忽而導致常犯的錯誤。
2.andbase封裝了大量的常用控制元件。
如list分頁,下拉重新整理,圖片輪播,表格,多執行緒下載器,側邊欄,圖片上傳,輪子選擇,圖表,Tab滑動,日歷選擇器等。
3.強大的AbActivity,您沒有理由不繼承它。
繼承它你能夠獲得一個簡單強大可設定的操作欄,以及一系列的簡單呼叫,如彈出框,提示框,進度框,副操作欄等。
4.提供效率較高圖片快取管理策略,使記憶體大幅度節省,利用率提高,效率提高。
程式中要管理大量的圖片資源,andbase提供簡單的方法,幾步完成下載與顯示,並支援縮放,裁剪,快取功能。
5.封裝了大量常見工具類。
包括日期,字元,檔案,圖片等各種處理函式, 多而全。
6.用andbase大量減少handler的使用,而採用回撥函式,程式碼更整潔。
handler會產生大量程式碼,並且不好維護,andbase對handler進行了封裝。
7.簡單輕量支援註解自動建表的ORM框架(支援一/多對多的關聯操作)。
寫sql,建表,工作量大,andbase提供更傻瓜非同步增刪改查工具類。
8.非同步請求框架,網路請求標准化,支援檔案上傳下載,get,post,進度顯示。
把maven專案轉換為java web專案結構非常的簡單,按如下的步驟操作即可:
1)在main目錄下,新增webapp目錄。
2)在webapp目錄下,新增WEB-INF目錄。
3)在WEB-INF目錄下,新增web.xml檔案。
按照上面三步操作完成以後,會出現IDEA給一個提示,點選configure按鈕,會看到一個確認框,單擊ok,按鈕就可以把當前專案變成web專案。
關於JAVAweb的框架,現在大多數無非都是基於SSH(Spring,Struts2/SpringMVC和Hibernate)或者SSM(Spring,Struts2/SpringMVC和Mybatis)
這些現在大多網路都有教程和Demo,參照著多弄幾遍,就會用了,要理解還得反復推敲
:blog.csdn./gebitan505/article/details/44455235/
去看吧
總體上應該一樣,技術體系都差不多。不過pc需要相容的瀏覽器更多些,mobile下andorid,ios都是基於webkit,所以相對好些。
移動前端開發可分為:
1、手機網頁開發。這部分跟web前端開發差別不大,使用的技術都是+css+js。區別為手機瀏覽器是webkit的天下,pc端是IE的天下。手機網頁可以理解成pc網頁的縮小版加一些觸控特性。因為是在瀏覽器中進行的網頁開發,所有最終程式碼具有跨系統平台的特性。
2、app前端開發。使用的技術也是+css+js,但它需要基於PhoneGap等開發平台呼叫手機核心功能介面(包括地理定位,加速器,聯絡人,聲音和振動等)模擬native app,這部分跟web前端開發完全不同。最終程式碼釋出要分別編譯成各系統平台的app。
㈨ 請教android開發的問題
這是圖形界面,通常都用來做預覽,開發的時候,是去直接寫代碼的 你點下 Graphical Layout 這里可以直接改代碼
㈩ Hybrid App 用哪個框架好
HybridApp、WebApp、NativeApp,哪一種模式會成為App開發主流?下面phonegap100小編與您一起分析為什麼Native和Web過時了,企業級移動開發開始用HybridApp隨著HTML5被過度熱炒和實際開發中遇到的性能以及體驗問題,WebApp逐漸勢弱。但是NativeApp開發難度大、成本高、周期長等問題突出,特別是App不斷推陳出新,開發一個App的成本或許可以接受,但是維護一個NativeApp更新的成本則成了跨不過的懸崖。最終開發者和企業發現HybridApp,這種既有跨平台開發周期短、成本低的基因,又能發揮NativeApp體驗和性能的優勢,HybridApp混合式移動應用開發逐漸成為企業移動開發的首選。