H5網頁應用打包AndroidApp (全網最詳細教程)
- 2021 年 2 月 10 日
- 筆記
如果你是一名 Web開發者，想把自己開發的頁面打包編譯成 App在手機運行，但是你對 Java 和 Android 一竅不通，
那麼本文章將指引你如何將Web項目走向Android平台，去除任何浮躁，跟著本文操作起來吧
1.參考文檔
2.材料準備
- AndroidStudio
- HBuilderX
- SDK（網盤提取碼：neqx，最新請訪問：//nativesupport.dcloud.net.cn/AppDocs/download/android）
3.打包Web項目
項目打包
將 Vue 或者 React 使用的webpack把程式碼項目進行打包
如果沒玩過 MVVM框架隨便什麼hello world的html項目也可以，不一定非要打包只要網頁能打開就行，
這裡以Vue+Webpack為例：打包之後生成 index.html 和 dist目錄
我這裡的項目瀏覽器打開之後是移動端的html5頁面，如下圖:
注意這裡只是頁面，不是APP，移動端頁面，接下來的任務就是要把這個html開發的頁面打包成AndroidApp
HbuilderX打包
打包好之後，打開 HbuilderX, 創建5+App項目
創建後，將左側默認文件除了 manifest其他都刪掉，然後把剛剛打包好的 （我的是index.html 和 build）放到項目目錄下
4.Manifest配置
點擊 manifest.json 進行配置
Appid
Appid需要去Dcloud申請一下，註冊一個帳號就行，申請地址如下，免費的
//dev.dcloud.net.cn/app/index?type=0
應用是否全螢幕
這裡的全螢幕是類似玩王者榮耀那樣，直接佔據整個螢幕，電源時間狀態欄都沒有的那種，這裡我不勾選，
接下來配置沉浸式體驗，就是頂部時間電源狀態欄弄成透明的那種，看起來會比較舒服
圖標配置
圖標配置可以自動生成，也可以先不生成，後面我們可以用IDE創建自定義圖標
啟動配置
配置如下圖
模組配置
我們這裡簡單點，全部模組都不用，下來大家可以自己嘗試勾選玩一下
許可權配置
按照默認的選項來即可
App其他設置
按照默認來
源碼視圖這裡添加一個沉浸式體驗全螢幕
5.在線雲打包和離線打包
這裡我們首先體驗一下雲打包App，選擇雲打包
配置參考如下圖，取消廣告，勾選公測證書
然後程式碼會上傳到雲進行打包，等待一會會跳出下載App地址
下載apk傳到手機安裝App就可以在手機上以App的方式運行我們寫的web介面了
雖然在線打包已經滿足了我們將web應用搬運到Android的需求，但是這裡是需要上傳程式碼，複雜一點的功能還要實名認證
另外每次雲打包都要等待一段時間後，才會返回只能下載5次的鏈接，非常不方便我們進行開發調試，
所以下面演示如何使用 Android Studio 自行離線打包。
首先我們在 HbuilderX 上把我們的程式碼打包成 App需要的src源碼資源
控制台會輸出打包後資源的目錄，後續的步驟會用到，這裡先放著
6.安裝SDK
打開下載好的 Andriod studio，這裡不用另外安裝java環境，Android Studio自帶jdk的
這裡勾選即可
選擇安裝路徑
安裝好後打開，選擇不導入
這裡點擊 cancel
此處選擇自定義
選擇主題
勾選AVD 以及選擇SDK安裝位置
後面一直點next或finish，點擊 SDK Manager
選擇 22版本，點擊 apply 和 ok
回到剛剛的介面新建項目,選擇空項目
下圖這裡
- Package Name包名自己命名，一般都是顛倒域名作為，此處包名可以隨便起
- Language選擇Java
- Minimum API level最小支援的API我選的是20，下面說明94%的手機都支援這個API，
- 其他默認點擊Finish
7.安裝AVD
點擊頂部工具欄右側手機圖標，如下圖，創建AVD虛擬手機，也就是手機模擬器
點擊創建AVD
這裡螢幕尺寸可以隨便選，也可以自定義
模擬器Android系統我選的是pie，可以點擊download下載或直接點下一步也會下載
下載好後，這裡是默認
最後點擊Finish完成，然後點擊下圖得位置，可以嘗試運行一下剛創建的空項目app
點擊工具欄手機運行按鈕，順利的話會彈出 Hello world 的App如下所示
我們可以看到上圖藍色框框有報錯資訊，這個應該是聲音方面的報錯，不影響我們使用，直接無視
如果這裡運行不起來，可以參考文檔底下的踩坑問題解決方案中是否有你遇到的問題
8.初始化項目
1. 將本文前面準備材料里的SDK下載後的目錄 [email protected]_20210123\SDK\libs 下找到這兩個文件
- lib.5plus.base-release.aar
- [email protected]
2. 然後再 [email protected]_20210123\SDK\assets\data 下複製下面三個文件，為方便操作和上面兩個文件創建一個新的目錄放在一起
- dcloud_control.xml
- dcloud_error.html
- 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硬體加速器
點擊同意下載又無法安裝，如下圖
點擊取消直接沒反應，運行不了模擬器了
解決步驟，每一步都是必要步驟：
-
使用 AMD替代的加速器，取消 HAXM ，點擊下圖工具欄這個管理包
-
確保虛擬化技術有打開
-
在啟用或關閉windows功能里，取消勾選紅框這兩項目
-
進入自己SDK目錄下的extras\google\Android_Emulator_Hypervisor_Driver的文件夾下，運行silent_install.bat
如果執行結果返回是：STATE: 4 RUNNING，說明安裝成功。就可以正常使用AS的模擬器了。
