H5網頁應用打包安卓App (全網最詳細教程)

如果你是一名 Web開發者，想把自己開發的頁面打包編譯成 App在手機運行，但是你對 Java 和 Android 一竅不通，

那么本文章將指引你如何將Web項目走向安卓平台，去除任何浮躁，跟着本文操作起來吧

1.參考文檔

• HbuilderCloud
• HBuilderX安卓離線打包教程全一覽——5+app
• DCLOUD社區

2.材料准備

• AndroidStudio
• HBuilderX
• SDK（網盤提取碼：neqx，最新請訪問：https://nativesupport.dcloud.net.cn/AppDocs/download/android）

3.打包Web項目

項目打包

將 Vue 或者 React 使用的webpack把代碼項目進行打包
如果沒玩過 MVVM框架隨便什么hello world的html項目也可以，不一定非要打包只要網頁能打開就行，
這里以Vue+Webpack為例：打包之后生成 index.html 和 dist目錄

我這里的項目瀏覽器打開之后是移動端的html5頁面，如下圖:

注意這里只是頁面，不是APP，移動端頁面，接下來的任務就是要把這個html開發的頁面打包成安卓App

HbuilderX打包

打包好之后，打開 HbuilderX, 創建5+App項目

創建后，將左側默認文件除了 manifest其他都刪掉，然后把剛剛打包好的 （我的是index.html 和 build）放到項目目錄下

4.Manifest配置

點擊 manifest.json 進行配置

Appid

Appid需要去Dcloud申請一下，注冊一個賬號就行，申請地址如下，免費的

https://dev.dcloud.net.cn/app/index?type=0

應用是否全屏

這里的全屏是類似玩王者榮耀那樣，直接占據整個屏幕，電源時間狀態欄都沒有的那種，這里我不勾選，

接下來配置沉浸式體驗，就是頂部時間電源狀態欄弄成透明的那種，看起來會比較舒服

圖標配置

圖標配置可以自動生成，也可以先不生成，后面我們可以用IDE創建自定義圖標

啟動配置

配置如下圖

模塊配置

我們這里簡單點，全部模塊都不用，下來大家可以自己嘗試勾選玩一下

權限配置

按照默認的選項來即可

App其他設置

按照默認來

源碼視圖這里添加一個沉浸式體驗全屏

5.在線雲打包和離線打包

這里我們首先體驗一下雲打包App，選擇雲打包

配置參考如下圖，取消廣告，勾選公測證書

然后代碼會上傳到雲進行打包，等待一會會跳出下載App地址

下載apk傳到手機安裝App就可以在手機上以App的方式運行我們寫的web界面了

雖然在線打包已經滿足了我們將web應用搬運到安卓的需求，但是這里是需要上傳代碼，復雜一點的功能還要實名認證
另外每次雲打包都要等待一段時間后，才會返回只能下載5次的鏈接，非常不方便我們進行開發調試，
所以下面演示如何使用 Android Studio 自行離線打包。

首先我們在 HbuilderX 上把我們的代碼打包成 App需要的src源碼資源

控制台會輸出打包后資源的目錄，后續的步驟會用到，這里先放着

6.安裝SDK

打開下載好的 Andriod studio，這里不用另外安裝java環境，Android Studio自帶jdk的

這里勾選即可

選擇安裝路徑

安裝好后打開，選擇不導入

這里點擊 cancel

此處選擇自定義

選擇主題

勾選AVD 以及選擇SDK安裝位置

后面一直點next或finish，點擊 SDK Manager

選擇 22版本，點擊 apply 和 ok

回到剛剛的界面新建項目,選擇空項目

下圖這里

1. Package Name包名自己命名，一般都是顛倒域名作為，此處包名可以隨便起
2. Language選擇Java
3. Minimum API level最小支持的API我選的是20，下面說明94%的手機都支持這個API，
4. 其他默認點擊Finish

7.安裝AVD

點擊頂部工具欄右側手機圖標，如下圖，創建AVD虛擬手機，也就是手機模擬器

點擊創建AVD

這里屏幕尺寸可以隨便選，也可以自定義

模擬器安卓系統我選的是pie，可以點擊download下載或直接點下一步也會下載

下載好后，這里是默認

最后點擊Finish完成，然后點擊下圖得位置，可以嘗試運行一下剛創建的空項目app

點擊工具欄手機運行按鈕，順利的話會彈出 Hello world 的App如下所示

我們可以看到上圖藍色框框有報錯信息，這個應該是聲音方面的報錯，不影響我們使用，直接無視

如果這里運行不起來，可以參考文檔底下的踩坑問題解決方案中是否有你遇到的問題

8.初始化項目

1. 將本文前面准備材料里的SDK下載后的目錄 Android-SDK@3.0.7.80630_20210123\SDK\libs 下找到這兩個文件

1. lib.5plus.base-release.aar
2. [e-mail]

2. 然后再 Android-SDK@3.0.7.80630_20210123\SDK\assets\data 下復制下面三個文件，為方便操作和上面兩個文件創建一個新的目錄放在一起

1. dcloud_control.xml
2. dcloud_error.html
3. dcloud_properties.xml

3. 將IDE的文件目錄試圖默認是 Android視圖 切換成 Project試圖

4. 然后將剛剛復制的兩個sdk文件粘貼到 app/libs下面

5. 編輯 app/build.gradle，引入lib文件

implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
implementation 'com.github.bumptech.glide:glide:4.9.0' // 基座依賴
implementation 'com.android.support:support-v4:28.0.0'
implementation 'com.alibaba:fastjson:1.1.46.android'

添加代碼如下圖所示，第一行 exclude可改可不改

接着 app/build.gradle 頂部，

將 compileSdkVersion 和 targetSdkVersion 值改成28，
將 minSdkVersion 改成 22

applicationId為創建時的包名，compileSdkVersion為編譯版本，
minSdkVersion為兼容最小的版本號，targetSdkVersion為目標版本，
有興趣的可以百度一下三者之間的區別和聯系。注意，
官方文檔中標注“App離線SDK minSdkVersion最低支持19，小於19在部分4.4以下機型上將無法正常使用。”
versionCode需要設定一個數值，一般為1，
每次更新版本時versionCode的值都要比前一個設置的值大，
否則無法正常安裝，versionName一般填寫主版本號次版本號和修正號，
如圖中的“1.0”為最初版本號，其余的可以自行查閱。

修改后點擊右上角 sync now進行同步

順利的話這里應該可以同步成功

6. 在 app/src/main 目錄下創建 assets/data 兩層目錄，把剛剛准備的xml和html復制到新目錄下

7. 在 app/src/main/assets 目錄下創建 apps 目錄，把第5步打包的離線資源放入底下

注意，復制離線打包資源時，如下圖中在上上級resources位置中，整個目錄一起復制過去

復制后，如下圖所示IDE會自動折疊目錄變成一個域名

9.編譯配置

在 app/src/main/res/values 下打開 string.xml

這里的應用名稱，與剛剛引入本地打包資源的里的manifest.json文件進行比較

我這里兩圖大小寫不一致，將 string.xml 改成小寫，確保兩個文件名稱一致

在 app/src/main/assets/data 下編輯 dcloud_control.xml ，確保xml的appid 與 manifest.json的appid一致

我這里對比一致無需更改，如果不一樣的話，以manfest.json中的appid為准

在 app/src/main 下編輯 AndroidManifest.xml 刪除MainActivity代碼片段

然后添加以下代碼到剛剛刪除的位置

  <activity
      android:name="io.dcloud.PandoraEntry"
      android:configChanges="orientation|keyboardHidden|keyboard|navigation"
      android:label="@string/app_name"
      android:launchMode="singleTask"
      android:hardwareAccelerated="true"
      android:theme="@style/TranslucentTheme"
      android:screenOrientation="user"
      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:launchMode="singleTask"
      android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard"
      android:hardwareAccelerated="true"
      android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"
      android:screenOrientation="user"
      android:theme="@style/DCloudTheme"
      android:windowSoftInputMode="adjustResize">
      <intent-filter>
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="h56131bcf" />
      </intent-filter>
  </activity>
  <!--provider節點必須添加-->
  <provider
      android:name="io.dcloud.common.util.DCloud_FileProvider"
      android:authorities="${apk.applicationId}.dc.fileprovider"
      android:exported="false"
      android:grantUriPermissions="true">
      <meta-data
          android:name="android.support.FILE_PROVIDER_PATHS"
          android:resource="@xml/dcloud_file_provider" />
  </provider>

然后將 provider代碼段中的 ${apk.applicationId} 替換成包名，如果不知道包名是什么，可以看離線資源復制之后自動折疊的域名，如下圖位置

10.創建圖標

如下右鍵新增資源圖標

這里可以根據自己需要設置圖標

然后點擊 next 和finish

11. 模擬器運行App

到這里基本完成了，可以嘗試模擬器上運行app

如果順利的話，此時彈出手機自動安裝app后，就可以看到我們的web項目以app方式運行了

當然如果不順利的話，可以參考下面的問答，或給博主留言

12. 編譯生成 apk

在菜單欄中選擇Build，點擊Generate Signed Bundle /APK...項，進入打包頁面。

選擇apk，點擊next

打包需要簽名認證，點擊Create new...創建。

如圖，第一行創建自定義jks文件，並確定路徑我把它設置為ips（這種其實是不符合jks格式的，

然后是設置密碼

最后生成時可能會有警告，點擊OK即可，一般為--*jks，平時還是要多注意規范）。

跳轉到簽名界面，因為都幫我們填好了，所以點擊Next即可。

選擇release完成

直接下圖編譯即可

完成后顯示apk路徑

13.遇到的問題及解決方案 Q&A

1. CPU沒有開啟虛擬化技術導致無法運行模擬器

在任務管理器中可以查看CPU是否開啟虛擬化技術

如果沒有開啟，需要在BIOS中開啟，這個可以百度一下，不同電腦啟動虛擬化方式不一樣

2. CPU是AMD的，運行手機模擬器時彈框推薦安裝 HAXM 一款Intel硬件加速器

點擊同意下載又無法安裝，如下圖

點擊取消直接沒反應，運行不了模擬器了

解決步驟，每一步都是必要步驟：

1. 使用 AMD替代的加速器，取消 HAXM ，點擊下圖工具欄這個管理包
   
   

2. 確保虛擬化技術有打開
   

3. 在啟用或關閉windows功能里，取消勾選紅框這兩項目
   

4. 進入自己SDK目錄下的extras\google\Android_Emulator_Hypervisor_Driver的文件夾下，運行silent_install.bat

如果執行結果返回是：STATE: 4 RUNNING，說明安裝成功。就可以正常使用AS的模擬器了。

感謝觀看，編寫不易轉載請指明出處： https://www.cnblogs.com/demonxian3/p/14387252.html