國內外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

-
用 AndroidStudio 建立一個空的 Android 工程,一路NEXT直到finish(這圖就不貼了吧)
-
把Android-SDK目錄下 HBuilder-Hello 這個專案匯入到 AndroidStudio,匯入後如下

有錯不用管,匯入 AndroidStudio 只是更好的和自己新建的專案對比目錄
- 接著把上圖的 libs 和 src 檔案拷貝到自己工程下的相應位置(覆蓋掉自己生成的)

- 執行程式,如下表示成功了

專案精簡
因為本系列文章是講 Native.js,其它的功能我們暫時不用,所以是可以刪掉的,比如我的專案把刪減如下


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>
複製程式碼
當然你可以繼續閱讀官方文件仔細刪減,最後效果如下:

後續還寫了一篇關於Hybrid App 的文章:利用 Native.js 實現 Android 與 HTML 資料的互動