如果你是一名 Web開發者，想把自己開發的頁面打包編譯成 App在手機執行，但是你對 Java 和 Android 一竅不通，
那麼本文章將指引你如何將Web專案走向安卓平臺，去除任何浮躁，跟著本文操作起來吧
1.參考文件
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
回到剛剛的介面新建專案,選擇空專案
下圖這裡
- Package Name包名自己命名，一般都是顛倒域名作為，此處包名可以隨便起
- Language選擇Java
- Minimum API level最小支援的API我選的是20，下面說明94%的手機都支援這個API，
- 其他預設點選Finish
7.安裝AVD
點選頂部工具欄右側手機圖示，如下圖，建立AVD虛擬手機，也就是手機模擬器
點選建立AVD
這裡螢幕尺寸可以隨便選，也可以自定義
模擬器安卓系統我選的是pie，可以點選download下載或直接點下一步也會下載
下載好後，這裡是預設
最後點選Finish完成，然後點選下圖得位置，可以嘗試執行一下剛建立的空專案app
點選工具欄手機執行按鈕，順利的話會彈出 Hello world 的App如下所示
我們可以看到上圖藍色框框有報錯資訊，這個應該是聲音方面的報錯，不影響我們使用，直接無視
如果這裡執行不起來，可以參考文件底下的踩坑問題解決方案中是否有你遇到的問題
8.初始化專案
1. 將本文前面準備材料裡的SDK下載後的目錄 Android-SDK@3.0.7.80630_20210123\SDK\libs 下找到這兩個檔案
- lib.5plus.base-release.aar
- android-gif-drawable-release@1.2.17.aar
2. 然後再 Android-SDK@3.0.7.80630_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的模擬器了。