Android獨立應用方式集成HTML5+SDK,Widget方式離線打包,空項目講解

Widget方式: 按照字面的意思就是,html至關於小部件同樣和原生代碼放一塊,在須要的時候調用;
獨立應用方式: 這個就是Widget方式,概念真多
Webview方式: 只能打開一個界面,不能打開新界面,這個沒搞懂使用場景~~~~(>_<)~~~~我暫且把這個概念忘了,別搞混

當你打開官方http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/38 又多了個概念: 離線打包
當你運行官方集成案例的時候,又多了個Runtime集成方式; 小白早晚會瘋掉的

總之,按照個人理解:
1.若是你的項目原生代碼和html混合着用,那麼選擇Widget方式集成,也就是獨立應用方式;
2.若是你的項目是HBuilder寫的純html,沒有原生代碼,那麼用Runtime集成方式,比較簡單;

離線打包的概念是相對於HBuilder在線雲打包而言的; 咱們選上面各類集成方式用eclipse,Android Studio 或者XCode把html編譯成安裝包就屬於離線打包了;這樣避免雲打包排隊或者服務器掛掉的時候,本身還能編譯安裝包,照常發佈更新版本;

ok,理清了官方的概念,你也基本懂了我寫的標題:
Android獨立應用方式集成HTML5 SDK,Widget方式離線打包,空項目講解

一.準備
1.打開HBuilder,新建-->移動APP-->勾選"Hello mui",項目名叫"HelloMui";(我以官方mui項目來舉例了,到時自行改成本身的項目);
2.打開eclipse,打開你的Android項目;(我這裏是新建了一個Android項目,名字叫Widget; 若是你還沒配置Android開發環境,則點這裏http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html );
3. 去官方下載最新的sdk: http://ask.dcloud.net.cn/article/103 解壓,裏面有個名字叫'SDK'的文件夾

 

二.拷貝
1.把下載的官方SDK文件夾裏的res文件夾拷貝到Android項目的res,合併;注意不要替換你項目的資源,否則你配的圖標和寫的strings.xml就沒了

 

說明: res裏面有NativeUI用到的圖片資源: 進度條,對話框,動畫樣式,照片選擇,底部彈出框,logo,啓動頁等等;http://www.html5plus.org/doc/zh_cn/nativeui.html

2.把SDK\assets中的data文件夾到eclipse項目中的assets

 

3.在eclipse的assets目錄中建立apps; 在apps中建立一個文件夾,名字和你HBuilder的項目名相同;我這裏就叫HelloMui; 在HelloMui中建立www文件夾; 把HBuilder項目拷貝到www文件夾下;

注意: apps和www文件夾名字是固定的,結構也是固定的,否則讀取不到html

 

4.修改manifest.json和control.xml中的id爲你的項目名;我這裏是HelloMui

 

5.拷貝SDK\libs裏面的jar包到eclipse項目下的libs;如圖:

說明:
pdr.jar, ui.jar, nineoldandroids-2.4.0.jar是Webview基礎包,必須導入
由於HelloMui項目中獲取設備信息網絡狀態,需引入device.jar;
設置了瀏覽器運行環境,需引入navigatorui.jar(設置了狀態欄,建立快捷方式,log輸出,設置cookie都需引入此包)
使用了plus.storage,需引入nopermission.jar

 

其實在具體的項目中,這些包遠遠不夠的:
好比ajax聯網,需引入xhr.jar
全量更新和差量更新,需引入downloader.jar,invocation.jar
原生對話框和底部彈出或者toast,需引入nativeui.jar
設置用戶頭像,用到拍照,打開相冊,需引入camera.jar,gallery.jar
具體請參照: http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/216

6.打開eclipse項目的AndroidManifest.xml,配置權限,具體請參照官方SDK裏的Feature-Android.xls文件

<!-- 聯網 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 使用存儲卡 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

7.把HBuilder-Integrate\src下的io文件夾,拷貝到eclipse項目的src

 

8.把Android-SDK\HBuilder-Integrate\src\com\HBuilder\integrate\SDK_WebApp.java 拷貝到eclipse項目的src包名下,並修改122行的appBasePath, 爲assets的app路徑

 

9.SDK_WebApp.java裏面的FrameLayout是用來承載html的,能夠放到任何你想放到的位置,好比點擊一個按鈕,彈窗或者打開新Activity展現; 我這裏的話,直接用activity展現,並在AndroidManifest.xml設置啓動就打開本界面