|
如果你是一名 Web開發(fā)者,，想把自己開發(fā)的頁面打包編譯成 App在手機運行，但是你對 Java 和 Android 一竅不通,，
那么本文章將指引你如何將Web項目走向安卓平臺,，去除任何浮躁，跟著本文操作起來吧
1.參考文檔
2.材料準(zhǔn)備
3.打包Web項目
項目打包
將 Vue 或者 React 使用的webpack把代碼項目進行打包
如果沒玩過 MVVM框架隨便什么hello world的html項目也可以,，不一定非要打包只要網(wǎng)頁能打開就行,，
這里以Vue+Webpack為例：打包之后生成 index.html 和 dist目錄
我這里的項目瀏覽器打開之后是移動端的html5頁面，如下圖:
注意這里只是頁面,，不是APP,，移動端頁面,，接下來的任務(wù)就是要把這個html開發(fā)的頁面打包成安卓App
HbuilderX打包
打包好之后，打開 HbuilderX, 創(chuàng)建5+App項目
創(chuàng)建后,，將左側(cè)默認(rèn)文件除了 manifest其他都刪掉,，然后把剛剛打包好的 （我的是index.html 和 build）放到項目目錄下
4.Manifest配置
點擊 manifest.json 進行配置
Appid
Appid需要去Dcloud申請一下，注冊一個賬號就行,，申請地址如下,，免費的
https://dev./app/index?type=0
應(yīng)用是否全屏
這里的全屏是類似玩王者榮耀那樣，直接占據(jù)整個屏幕,，電源時間狀態(tài)欄都沒有的那種,，這里我不勾選，
接下來配置沉浸式體驗,，就是頂部時間電源狀態(tài)欄弄成透明的那種,，看起來會比較舒服
圖標(biāo)配置
圖標(biāo)配置可以自動生成，也可以先不生成,，后面我們可以用IDE創(chuàng)建自定義圖標(biāo)
啟動配置
配置如下圖
模塊配置
我們這里簡單點,，全部模塊都不用，下來大家可以自己嘗試勾選玩一下
權(quán)限配置
按照默認(rèn)的選項來即可
App其他設(shè)置
按照默認(rèn)來
源碼視圖這里添加一個沉浸式體驗全屏
5.在線云打包和離線打包
這里我們首先體驗一下云打包App,，選擇云打包
配置參考如下圖,，取消廣告，勾選公測證書
然后代碼會上傳到云進行打包,，等待一會會跳出下載App地址
下載apk傳到手機安裝App就可以在手機上以App的方式運行我們寫的web界面了
雖然在線打包已經(jīng)滿足了我們將web應(yīng)用搬運到安卓的需求,，但是這里是需要上傳代碼，復(fù)雜一點的功能還要實名認(rèn)證
另外每次云打包都要等待一段時間后,，才會返回只能下載5次的鏈接,，非常不方便我們進行開發(fā)調(diào)試，
所以下面演示如何使用 Android Studio 自行離線打包,。
首先我們在 HbuilderX 上把我們的代碼打包成 App需要的src源碼資源
控制臺會輸出打包后資源的目錄,，后續(xù)的步驟會用到，這里先放著
6.安裝SDK
打開下載好的 Andriod studio,，這里不用另外安裝java環(huán)境,，Android Studio自帶jdk的
這里勾選即可
選擇安裝路徑
安裝好后打開，選擇不導(dǎo)入
這里點擊 cancel
此處選擇自定義
選擇主題
勾選AVD 以及選擇SDK安裝位置
后面一直點next或finish,，點擊 SDK Manager
選擇 22版本,，點擊 apply 和 ok
回到剛剛的界面新建項目,選擇空項目
下圖這里
- Package Name包名自己命名，一般都是顛倒域名作為,，此處包名可以隨便起
- Language選擇Java
- Minimum API level最小支持的API我選的是20,，下面說明94%的手機都支持這個API，
- 其他默認(rèn)點擊Finish
7.安裝AVD
點擊頂部工具欄右側(cè)手機圖標(biāo),，如下圖,，創(chuàng)建AVD虛擬手機，也就是手機模擬器
點擊創(chuàng)建AVD
這里屏幕尺寸可以隨便選,，也可以自定義
模擬器安卓系統(tǒng)我選的是pie,，可以點擊download下載或直接點下一步也會下載
下載好后，這里是默認(rèn)
最后點擊Finish完成,，然后點擊下圖得位置,，可以嘗試運行一下剛創(chuàng)建的空項目app
點擊工具欄手機運行按鈕，順利的話會彈出 Hello world 的App如下所示
我們可以看到上圖藍色框框有報錯信息,，這個應(yīng)該是聲音方面的報錯,，不影響我們使用，直接無視
如果這里運行不起來,，可以參考文檔底下的踩坑問題解決方案中是否有你遇到的問題
8.初始化項目
1. 將本文前面準(zhǔn)備材料里的SDK下載后的目錄 [email protected]_20210123\SDK\libs 下找到這兩個文件
- lib.5plus.base-release.aar
- [email protected]
2. 然后再 [email protected]_20210123\SDK\assets\data 下復(fù)制下面三個文件,，為方便操作和上面兩個文件創(chuàng)建一個新的目錄放在一起
- dcloud_control.xml
- dcloud_error.html
- dcloud_properties.xml
3. 將IDE的文件目錄試圖默認(rèn)是 Android視圖 切換成 Project試圖
4. 然后將剛剛復(fù)制的兩個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為創(chuàng)建時的包名,，compileSdkVersion為編譯版本,，
minSdkVersion為兼容最小的版本號，targetSdkVersion為目標(biāo)版本,，
有興趣的可以百度一下三者之間的區(qū)別和聯(lián)系,。注意，
官方文檔中標(biāo)注“App離線SDK minSdkVersion最低支持19,，小于19在部分4.4以下機型上將無法正常使用,。”
versionCode需要設(shè)定一個數(shù)值,，一般為1,，
每次更新版本時versionCode的值都要比前一個設(shè)置的值大，
否則無法正常安裝,，versionName一般填寫主版本號次版本號和修正號,，
如圖中的“1.0”為最初版本號，其余的可以自行查閱,。
修改后點擊右上角 sync now進行同步
順利的話這里應(yīng)該可以同步成功
6. 在 app/src/main 目錄下創(chuàng)建 assets/data 兩層目錄,，把剛剛準(zhǔn)備的xml和html復(fù)制到新目錄下
7. 在 app/src/main/assets 目錄下創(chuàng)建 apps 目錄，把第5步打包的離線資源放入底下
注意,，復(fù)制離線打包資源時,，如下圖中在上上級resources位置中，整個目錄一起復(fù)制過去
復(fù)制后,，如下圖所示IDE會自動折疊目錄變成一個域名
9.編譯配置
在 app/src/main/res/values 下打開 string.xml
這里的應(yīng)用名稱,，與剛剛引入本地打包資源的里的manifest.json文件進行比較
我這里兩圖大小寫不一致,，將 string.xml 改成小寫，確保兩個文件名稱一致
在 app/src/main/assets/data 下編輯 dcloud_control.xml ,，確保xml的appid 與 manifest.json的appid一致
我這里對比一致無需更改,，如果不一樣的話，以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é)點必須添加-->
<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} 替換成包名,，如果不知道包名是什么,，可以看離線資源復(fù)制之后自動折疊的域名，如下圖位置
10.創(chuàng)建圖標(biāo)
如下右鍵新增資源圖標(biāo)
這里可以根據(jù)自己需要設(shè)置圖標(biāo)
然后點擊 next 和finish
11. 模擬器運行App
到這里基本完成了,，可以嘗試模擬器上運行app
如果順利的話,，此時彈出手機自動安裝app后，就可以看到我們的web項目以app方式運行了
當(dāng)然如果不順利的話,，可以參考下面的問答,，或給博主留言
12. 編譯生成 apk
在菜單欄中選擇Build，點擊Generate Signed Bundle /APK...項,，進入打包頁面,。
選擇apk，點擊next
打包需要簽名認(rèn)證,，點擊Create new...創(chuàng)建,。
如圖，第一行創(chuàng)建自定義jks文件,，并確定路徑我把它設(shè)置為ips（這種其實是不符合jks格式的,，
然后是設(shè)置密碼
最后生成時可能會有警告，點擊OK即可,，一般為--*jks,，平時還是要多注意規(guī)范）。
跳轉(zhuǎn)到簽名界面,，因為都幫我們填好了,，所以點擊Next即可。
選擇release完成
直接下圖編譯即可
完成后顯示apk路徑
13.遇到的問題及解決方案 Q&A
1. CPU沒有開啟虛擬化技術(shù)導(dǎo)致無法運行模擬器
在任務(wù)管理器中可以查看CPU是否開啟虛擬化技術(shù)
如果沒有開啟,，需要在BIOS中開啟,，這個可以百度一下，不同電腦啟動虛擬化方式不一樣
2. CPU是AMD的,，運行手機模擬器時彈框推薦安裝 HAXM 一款I(lǐng)ntel硬件加速器
點擊同意下載又無法安裝,，如下圖
點擊取消直接沒反應(yīng)，運行不了模擬器了
解決步驟,，每一步都是必要步驟：
-
使用 AMD替代的加速器,，取消 HAXM ，點擊下圖工具欄這個管理包
-
確保虛擬化技術(shù)有打開
-
在啟用或關(guān)閉windows功能里，取消勾選紅框這兩項目
-
進入自己SDK目錄下的extras\google\Android_Emulator_Hypervisor_Driver的文件夾下,，運行silent_install.bat
如果執(zhí)行結(jié)果返回是：STATE: 4 RUNNING,，說明安裝成功。就可以正常使用AS的模擬器了,。
感謝觀看,，編寫不易轉(zhuǎn)載請指明出處： https://www.cnblogs.com/demonxian3/p/14387252.html
|
