AndroidStudio 建立 Hybrid App工程

hogen發表於2018-01-02
AndroidAPP

國內外Hybrid App的開發框架眾多，PhoneGap(cordova )、AppCan、APICloud、MUI、WeX5 還有 Neact Native 等等好多，我當時接觸的是 DCloud 公司的 MUI 框架，所以這篇文章採用的是用其 5+SDK 建立 Hybrid App工程

後續文章將講到使用 Native.js 實現 Android 原生程式碼和 HTML 的資料互動，看本篇文章前建議先看如下文章：

Android獨立應用方式整合HTML5+SDK,Widget方式離線打包,空專案講解

工具準備

HBuilder、 AndroidStudio、5+SDK

步驟

  • 首先去DCloud官網下載5+SDK,下載後解壓目錄如下，解壓的資料夾名稱 Android-SDK

下載解壓5+SDK

  • 用 AndroidStudio 建立一個空的 Android 工程，一路NEXT直到finish(這圖就不貼了吧)

  • 把Android-SDK目錄下 HBuilder-Hello 這個專案匯入到 AndroidStudio，匯入後如下

匯入hbuilder-hello

有錯不用管，匯入 AndroidStudio 只是更好的和自己新建的專案對比目錄

  • 接著把上圖的 libs 和 src 檔案拷貝到自己工程下的相應位置(覆蓋掉自己生成的)

匯入lib和src

  • 執行程式，如下表示成功了

執行

專案精簡

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

刪減lib目錄和assets目錄

精簡列表檢視

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 資料的互動

相關文章