如果你是一名 Web開(kāi)發(fā)者，想把自己開(kāi)發(fā)的頁(yè)面打包編譯成 App在手機(jī)運(yùn)行，但是你對(duì) Java 和 Android 一竅不通，

那么本文章將指引你如何將Web項(xiàng)目走向安卓平臺(tái)，去除任何浮躁，跟著本文操作起來(lái)吧

1.參考文檔

• HbuilderCloud
• HBuilderX安卓離線(xiàn)打包教程全一覽——5+app
• DCLOUD社區(qū)

2.材料準(zhǔn)備

• AndroidStudio
• HBuilderX
• SDK（最新請(qǐng)?jiān)L問(wèn)：https://nativesupport./AppDocs/download/android）

3.打包Web項(xiàng)目

項(xiàng)目打包

將 Vue 或者 React 使用的webpack把代碼項(xiàng)目進(jìn)行打包
如果沒(méi)玩過(guò) MVVM框架隨便什么hello world的html項(xiàng)目也可以，不一定非要打包只要網(wǎng)頁(yè)能打開(kāi)就行，
這里以Vue+Webpack為例：打包之后生成 index.html 和 dist目錄

我這里的項(xiàng)目瀏覽器打開(kāi)之后是移動(dòng)端的html5頁(yè)面，如下圖:

注意這里只是頁(yè)面，不是APP，移動(dòng)端頁(yè)面，接下來(lái)的任務(wù)就是要把這個(gè)html開(kāi)發(fā)的頁(yè)面打包成安卓App

HbuilderX打包

打包好之后，打開(kāi) HbuilderX, 創(chuàng)建5+App項(xiàng)目

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

4.Manifest配置

點(diǎn)擊 manifest.json 進(jìn)行配置

Appid

Appid需要去Dcloud申請(qǐng)一下，注冊(cè)一個(gè)賬號(hào)就行，申請(qǐng)地址如下，免費(fèi)的

https://dev./app/index?type=0

應(yīng)用是否全屏

這里的全屏是類(lèi)似玩王者榮耀那樣，直接占據(jù)整個(gè)屏幕，電源時(shí)間狀態(tài)欄都沒(méi)有的那種，這里我不勾選，

接下來(lái)配置沉浸式體驗(yàn)，就是頂部時(shí)間電源狀態(tài)欄弄成透明的那種，看起來(lái)會(huì)比較舒服

圖標(biāo)配置

圖標(biāo)配置可以自動(dòng)生成，也可以先不生成，后面我們可以用IDE創(chuàng)建自定義圖標(biāo)

啟動(dòng)配置

配置如下圖

模塊配置

我們這里簡(jiǎn)單點(diǎn)，全部模塊都不用，下來(lái)大家可以自己嘗試勾選玩一下

權(quán)限配置

按照默認(rèn)的選項(xiàng)來(lái)即可

App其他設(shè)置

按照默認(rèn)來(lái)

源碼視圖這里添加一個(gè)沉浸式體驗(yàn)全屏

5.在線(xiàn)云打包和離線(xiàn)打包

這里我們首先體驗(yàn)一下云打包App，選擇云打包

配置參考如下圖，取消廣告，勾選公測(cè)證書(shū)

然后代碼會(huì)上傳到云進(jìn)行打包，等待一會(huì)會(huì)跳出下載App地址

下載apk傳到手機(jī)安裝App就可以在手機(jī)上以App的方式運(yùn)行我們寫(xiě)的web界面了

雖然在線(xiàn)打包已經(jīng)滿(mǎn)足了我們將web應(yīng)用搬運(yùn)到安卓的需求，但是這里是需要上傳代碼，復(fù)雜一點(diǎn)的功能還要實(shí)名認(rèn)證
另外每次云打包都要等待一段時(shí)間后，才會(huì)返回只能下載5次的鏈接，非常不方便我們進(jìn)行開(kāi)發(fā)調(diào)試，
所以下面演示如何使用 Android Studio 自行離線(xiàn)打包。

首先我們?cè)?HbuilderX 上把我們的代碼打包成 App需要的src源碼資源

控制臺(tái)會(huì)輸出打包后資源的目錄，后續(xù)的步驟會(huì)用到，這里先放著

6.安裝SDK

打開(kāi)下載好的 Andriod studio，這里不用另外安裝java環(huán)境，Android Studio自帶jdk的

這里勾選即可

選擇安裝路徑

安裝好后打開(kāi)，選擇不導(dǎo)入

這里點(diǎn)擊 cancel

此處選擇自定義

選擇主題

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

后面一直點(diǎn)next或finish，點(diǎn)擊 SDK Manager

選擇 22版本，點(diǎn)擊 apply 和 ok

回到剛剛的界面新建項(xiàng)目,選擇空項(xiàng)目

下圖這里

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

7.安裝AVD

點(diǎn)擊頂部工具欄右側(cè)手機(jī)圖標(biāo)，如下圖，創(chuàng)建AVD虛擬手機(jī)，也就是手機(jī)模擬器

點(diǎn)擊創(chuàng)建AVD

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

模擬器安卓系統(tǒng)我選的是pie，可以點(diǎn)擊download下載或直接點(diǎn)下一步也會(huì)下載

下載好后，這里是默認(rèn)

最后點(diǎn)擊Finish完成，然后點(diǎn)擊下圖得位置，可以嘗試運(yùn)行一下剛創(chuàng)建的空項(xiàng)目app

點(diǎn)擊工具欄手機(jī)運(yùn)行按鈕，順利的話(huà)會(huì)彈出 Hello world 的App如下所示

我們可以看到上圖藍(lán)色框框有報(bào)錯(cuò)信息，這個(gè)應(yīng)該是聲音方面的報(bào)錯(cuò)，不影響我們使用，直接無(wú)視

如果這里運(yùn)行不起來(lái)，可以參考文檔底下的踩坑問(wèn)題解決方案中是否有你遇到的問(wèn)題

8.初始化項(xiàng)目

1. 將本文前面準(zhǔn)備材料里的SDK下載后的目錄 Android-SDK@3.0.7.80630_20210123\SDK\libs 下找到這兩個(gè)文件

1. lib.5plus.base-release.aar
2. android-gif-drawable-release@1.2.17.aar

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

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

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

4. 然后將剛剛復(fù)制的兩個(gè)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' // 基座依賴(lài)
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為創(chuàng)建時(shí)的包名，compileSdkVersion為編譯版本，
minSdkVersion為兼容最小的版本號(hào)，targetSdkVersion為目標(biāo)版本，
有興趣的可以百度一下三者之間的區(qū)別和聯(lián)系。注意，
官方文檔中標(biāo)注“App離線(xiàn)SDK minSdkVersion最低支持19，小于19在部分4.4以下機(jī)型上將無(wú)法正常使用?！?br> versionCode需要設(shè)定一個(gè)數(shù)值，一般為1，
每次更新版本時(shí)versionCode的值都要比前一個(gè)設(shè)置的值大，
否則無(wú)法正常安裝，versionName一般填寫(xiě)主版本號(hào)次版本號(hào)和修正號(hào)，
如圖中的“1.0”為最初版本號(hào)，其余的可以自行查閱。

修改后點(diǎn)擊右上角 sync now進(jìn)行同步

順利的話(huà)這里應(yīng)該可以同步成功

6. 在 app/src/main 目錄下創(chuàng)建 assets/data 兩層目錄，把剛剛準(zhǔn)備的xml和html復(fù)制到新目錄下

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

注意，復(fù)制離線(xiàn)打包資源時(shí)，如下圖中在上上級(jí)resources位置中，整個(gè)目錄一起復(fù)制過(guò)去

復(fù)制后，如下圖所示IDE會(huì)自動(dòng)折疊目錄變成一個(gè)域名

9.編譯配置

在 app/src/main/res/values 下打開(kāi) string.xml

這里的應(yīng)用名稱(chēng)，與剛剛引入本地打包資源的里的manifest.json文件進(jìn)行比較

我這里兩圖大小寫(xiě)不一致，將 string.xml 改成小寫(xiě)，確保兩個(gè)文件名稱(chēng)一致

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

我這里對(duì)比一致無(wú)需更改，如果不一樣的話(huà)，以manfest.json中的appid為準(zhǔn)

在 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節(jié)點(diǎn)必須添加-->
  <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} 替換成包名，如果不知道包名是什么，可以看離線(xiàn)資源復(fù)制之后自動(dòng)折疊的域名，如下圖位置

10.創(chuàng)建圖標(biāo)

如下右鍵新增資源圖標(biāo)

這里可以根據(jù)自己需要設(shè)置圖標(biāo)

然后點(diǎn)擊 next 和finish

11. 模擬器運(yùn)行App

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

如果順利的話(huà)，此時(shí)彈出手機(jī)自動(dòng)安裝app后，就可以看到我們的web項(xiàng)目以app方式運(yùn)行了

當(dāng)然如果不順利的話(huà)，可以參考下面的問(wèn)答，或給博主留言

12. 編譯生成 apk

在菜單欄中選擇Build，點(diǎn)擊Generate Signed Bundle /APK...項(xiàng)，進(jìn)入打包頁(yè)面。

選擇apk，點(diǎn)擊next

打包需要簽名認(rèn)證，點(diǎn)擊Create new...創(chuàng)建。

如圖，第一行創(chuàng)建自定義jks文件，并確定路徑我把它設(shè)置為ips（這種其實(shí)是不符合jks格式的，

然后是設(shè)置密碼

最后生成時(shí)可能會(huì)有警告，點(diǎn)擊OK即可，一般為--*jks，平時(shí)還是要多注意規(guī)范）。

跳轉(zhuǎn)到簽名界面，因?yàn)槎紟臀覀兲詈昧耍渣c(diǎn)擊Next即可。

選擇release完成

直接下圖編譯即可

完成后顯示apk路徑

13.遇到的問(wèn)題及解決方案 Q&A

1. CPU沒(méi)有開(kāi)啟虛擬化技術(shù)導(dǎo)致無(wú)法運(yùn)行模擬器

在任務(wù)管理器中可以查看CPU是否開(kāi)啟虛擬化技術(shù)

如果沒(méi)有開(kāi)啟，需要在BIOS中開(kāi)啟，這個(gè)可以百度一下，不同電腦啟動(dòng)虛擬化方式不一樣

2. CPU是AMD的，運(yùn)行手機(jī)模擬器時(shí)彈框推薦安裝 HAXM 一款I(lǐng)ntel硬件加速器

點(diǎn)擊同意下載又無(wú)法安裝，如下圖

點(diǎn)擊取消直接沒(méi)反應(yīng)，運(yùn)行不了模擬器了

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

1. 使用 AMD替代的加速器，取消 HAXM ，點(diǎn)擊下圖工具欄這個(gè)管理包
   
   

2. 確保虛擬化技術(shù)有打開(kāi)
   

3. 在啟用或關(guān)閉windows功能里，取消勾選紅框這兩項(xiàng)目
   

4. 進(jìn)入自己SDK目錄下的extras\google\Android_Emulator_Hypervisor_Driver的文件夾下，運(yùn)行silent_install.bat

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

感謝觀(guān)看，編寫(xiě)不易轉(zhuǎn)載請(qǐng)指明出處： https://www.cnblogs.com/demonxian3/p/14387252.html