國內外Hybrid App的開發框架眾多,PhoneGap(cordova )、AppCan、APICloud、MUI、WeX5 還有 Neact Native 等等好多,我當時接觸的是 DCloud 公司的 MUI 框架,所以這篇文章採用的是用其 5+SDK 建立 Hybrid App工程
後續文章將講到使用 Native.js 實現 Android 原生程式碼和 HTML 的資料互動,看本篇文章前建議先看如下文章:
Android獨立應用方式整合HTML5+SDK,Widget方式離線打包,空專案講解
工具準備
步驟
- 首先去DCloud官網下載5+SDK,下載後解壓目錄如下,解壓的資料夾名稱 Android-SDK
![下載解壓5+SDK](https://i.iter01.com/images/3d1ae9b8c14b56e93183ae64ec0bce06de1e40734d192721a91aed46991a262f.png)
-
用 AndroidStudio 建立一個空的 Android 工程,一路NEXT直到finish(這圖就不貼了吧)
-
把Android-SDK目錄下 HBuilder-Hello 這個專案匯入到 AndroidStudio,匯入後如下
![匯入hbuilder-hello](https://i.iter01.com/images/2f6093ddfc810106fbda6ea09f478aa64728a033cf5835bbc89f7c3af01fc158.png)
有錯不用管,匯入 AndroidStudio 只是更好的和自己新建的專案對比目錄
- 接著把上圖的 libs 和 src 檔案拷貝到自己工程下的相應位置(覆蓋掉自己生成的)
![匯入lib和src](https://i.iter01.com/images/44daa6a11e84ed07fedf132417ab138cfc99efb7ad47d955e3678a9a4264aca6.png)
- 執行程式,如下表示成功了
![執行](https://i.iter01.com/images/d7a05fa0f5ac96cb09666a1cacc2c1eaec1c5f5ccc7b47a94192c08c656540ba.png)
專案精簡
因為本系列文章是講 Native.js,其它的功能我們暫時不用,所以是可以刪掉的,比如我的專案把刪減如下
![刪減lib目錄和assets目錄](https://i.iter01.com/images/32aec6c760939d2ce0114da9bc44958d1e6798f3c3381457b2c0b610d1b05a76.png)
![精簡列表檢視](https://i.iter01.com/images/3a130a336f88a51d8070cea04d90894f1d5aaebd80176f214084e4fc1ce36392.png)
AndroidManifest.xml檔案刪減如下
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="io.dcloud.HBuilder.Hello"
android:versionCode="570"
android:versionName="5.7.0">
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:resizeable="true"
android:smallScreens="true" />
<uses-sdk android:minSdkVersion="8" />
<!-- HBuilder Runtime 基礎許可權 begin -->
<!-- 聯網 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 使用儲存卡 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_TASKS" />
<!-- Html5Plus runtime基礎許可權 end -->
<application
android:name="io.dcloud.application.DCloudApplication"
android:allowClearUserData="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:largeHeap="true">
<activity
android:name="io.dcloud.PandoraEntry"
android:configChanges="orientation|keyboardHidden|keyboard|navigation"
android:hardwareAccelerated="true"
android:label="@string/app_name"
android:launchMode="singleTask"
android:screenOrientation="user"
android:theme="@style/TranslucentTheme"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="io.dcloud.PandoraEntryActivity"
android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale"
android:hardwareAccelerated="true"
android:label="5+Debug"
android:launchMode="singleTask"
android:screenOrientation="user"
android:theme="@style/DCloudTheme"
android:windowSoftInputMode="adjustResize">
</activity>
<service
android:name="io.dcloud.common.adapter.io.MiniServerService"
android:exported="true" />
</application>
</manifest>
複製程式碼
當然你可以繼續閱讀官方文件仔細刪減,最後效果如下:
![最後的效果](https://i.iter01.com/images/2a2722158eda83be5ea83b4da25a36d910a68bc688a2b13fbf62c62a13812b28.png)
後續還寫了一篇關於Hybrid App 的文章:利用 Native.js 實現 Android 與 HTML 資料的互動