Capacitor 打包 h5 到 Android 應(yīng)用，uniapp https http net::ERR_CLEARTEXT_NOT_PERMITTED
capacitor 官網(wǎng)： https://capacitorjs.com/docs/
項(xiàng)目上需要做一個(gè) app，而這個(gè) app 是用 uniapp 做的，里面用到了一個(gè)依賴 dom 的庫(kù)，所以無法使用 Uniapp 直接生成對(duì)應(yīng)的 android 應(yīng)用，試過了，無法使用，體驗(yàn)很差。
后發(fā)現(xiàn) capacitor 打包 h5 到 Android 應(yīng)用
摸索了一天半終于把這個(gè)路徑打通了。分享下過程。
這篇文章將詳細(xì)介紹如何安裝 capacitor，構(gòu)建成功 Android 應(yīng)用后如何通過 Chrome 進(jìn)行 Android 內(nèi)的網(wǎng)頁(yè)頁(yè)面的調(diào)試。
文中我會(huì)以一個(gè)前端的認(rèn)知層面來講述，因?yàn)槲乙膊欢?Android，這樣作為前端的你會(huì)更容易理解。
一、使用 capacitor 需要的源材料。
- 一個(gè)構(gòu)建好的項(xiàng)目 dist 最終 html 文件包 比如就是一個(gè)
dist文件夾 - 一個(gè) capacitor 項(xiàng)目
- 一個(gè)能正常運(yùn)行的 AndroidStudio
- 一個(gè)訪問外網(wǎng)的途徑（安裝過程中會(huì)需要設(shè)置 proxy 以正常安裝
gradle）
二、項(xiàng)目安裝過程
官方的文檔說明： https://capacitorjs.com/docs/getting-started
簡(jiǎn)述一下這個(gè)過程：
1. 新建一個(gè) capacitor 應(yīng)用
npm init @capacitor/app
它會(huì)讓你填寫一些項(xiàng)目信息，根據(jù)提示填寫即可
2. 安裝項(xiàng)目依賴
上面的操作已經(jīng)創(chuàng)建了一個(gè)空的 capacitor 應(yīng)用，這個(gè)應(yīng)用目前處于沒有安裝 npm 的狀態(tài)，所以需要安裝一下。
你用 yarn 或者 npm 都可以
我喜歡用 yarn ，直接執(zhí)行
yarn
或者
npm
此時(shí)查看項(xiàng)目文件
3. 初始化 capacitor 項(xiàng)目
npx cap init
4. 用的常用的編輯器打開這個(gè)項(xiàng)目
我習(xí)慣用 webstorm
能看到剛才配置的項(xiàng)目信息：
5. 設(shè)置 webDir 屬性
其中的 webDir 屬性表示在構(gòu)建應(yīng)用的時(shí)候使用哪個(gè)目錄下的 html 文件作為項(xiàng)目?jī)?nèi)容，這里就是 ./dist 文件夾，我們將之前構(gòu)建好的 web 項(xiàng)目最終 dist 文件夾放到 capacitor 項(xiàng)目的主目錄中即可。
當(dāng)然，這個(gè)目錄名字只要對(duì)應(yīng)上就可以，不一定非得叫 dist
添加完成之后項(xiàng)目目錄就是這樣的
6. 安裝 Android iOS 依賴包
npm i @capacitor/android @capacitor/ios
7. 構(gòu)建 Android iOS 應(yīng)用內(nèi)容
這里我目前只用到了 Android 的，所以先只看 Android 的，以后用到 iOS 的再補(bǔ)充
npx cap add android
執(zhí)行完成之后，項(xiàng)目目錄中多出一個(gè) android 文件夾
三、運(yùn)行 Android 應(yīng)用
上面就算已經(jīng)把整個(gè)項(xiàng)目都構(gòu)建完成了，現(xiàn)在我們就需要將項(xiàng)目運(yùn)行到 AndroidStudio 中了。
1. 添加 CAPACITOR_ANDROID_STUDIO_PATH 環(huán)境變量
在這之前你還需要做一件事，就是將系統(tǒng)中添加一個(gè)環(huán)境變量 CAPACITOR_ANDROID_STUDIO_PATH 變量值是你的 AndroidStudio.exe 軟件的路徑。因?yàn)榻酉聛淼牟僮鲿?huì)用到這個(gè)路徑指向的 exe 來啟動(dòng)并運(yùn)行 Android 應(yīng)用。
2. 運(yùn)行 Android 應(yīng)用
執(zhí)行下面指令，它會(huì)自動(dòng)啟動(dòng) AndroidStudio 并運(yùn)行這個(gè)項(xiàng)目的 Android 應(yīng)用，這個(gè)Android 應(yīng)用使用的目錄是 ./android 目錄作為項(xiàng)目主目錄
npx cap open android
AndroidStudio 會(huì)彈出提示，點(diǎn) trust 即可
然后彈出讓你輸入 proxy 的窗口，輸入你的 proxy 配置即可
然后 gradle 會(huì)運(yùn)行，并對(duì)程序進(jìn)行初始化的環(huán)境依賴處理
完成之后就是這樣
此時(shí)你只需要點(diǎn)擊右上角的運(yùn)行就能看到你程序的運(yùn)行情況了，這里你可以選擇運(yùn)行到你的實(shí)機(jī)，也可以運(yùn)行到模擬器。
四、調(diào)試
程序正常打開之后，你可能需要調(diào)試內(nèi)部的網(wǎng)頁(yè)。這樣操作：
- 關(guān)閉之前運(yùn)行的程序
- 點(diǎn)擊調(diào)試按鈕
- 當(dāng)程序正常運(yùn)行到手機(jī)上的時(shí)候，打開你的谷歌瀏覽器 chrome，在地址欄中輸入以下內(nèi)容。
chrome://inspect/
此時(shí)你就能看到你手機(jī)中顯示的這個(gè)程序的對(duì)應(yīng)頁(yè)面的路徑，然后點(diǎn)擊 【inspect】 就能對(duì)手機(jī)中的頁(yè)面進(jìn)行調(diào)試了，這個(gè)跟在瀏覽器中調(diào)試是一模一樣的。
五、網(wǎng)絡(luò)請(qǐng)求問題
1. 網(wǎng)絡(luò)訪問
我在使用的時(shí)候發(fā)現(xiàn)無法進(jìn)行網(wǎng)絡(luò)訪問。
我用 uniapp 打包的程序，用 axios 是無法訪問網(wǎng)絡(luò)的，但用 uniapp 自帶的請(qǐng)求方法 uni.request 就可以。
https
能訪問之后又遇到一個(gè)新問題，我請(qǐng)求的接口地址是 http 的，會(huì)提示你 跨域問題，從 https 請(qǐng)求 http 確實(shí)會(huì)出現(xiàn)跨域，解決辦法就是統(tǒng)一協(xié)議。
你的本地 html 服務(wù)的時(shí)候是使用的 https，而你的接口是 http 的，就會(huì)發(fā)現(xiàn)這問題
那么現(xiàn)在要解決的就是將本地文件的服務(wù)方式改為 http
還記得我們之前看到的 capacitor 項(xiàng)目中的 capacitor.config.json 文件嗎，里面有個(gè)參數(shù)是上圖這個(gè) androidScheme，將它改成 http 即可，改完之后，記得重新用指令打開它
npx cap open android
錯(cuò)誤提示 net::ERR_CLEARTEXT_NOT_PERMITTED
上面跨域的問題解決之后，又出現(xiàn)這樣的提示。
解決辦法
在 Android 項(xiàng)目文件夾中的 AndroidManifest.xml 文件中，在 application 節(jié)點(diǎn)上添加下面的內(nèi)容：
android:usesCleartextTraffic="true"
這樣就能正常運(yùn)行了
六、更新項(xiàng)目 html 本地文件
上面已經(jīng)能正常運(yùn)行程序了。
但當(dāng)你想更新項(xiàng)目?jī)?nèi)容時(shí)該怎么做呢？
定位到你的 Android 文件夾，比如上面這個(gè)例子 ./demo 文件夾是 capacitor 的主目錄，那么這個(gè)安卓應(yīng)用使用的 html 源文件的位置就是 ./demo/android\app\src\main\assets\public 這個(gè)文件夾
所以你只需要替換這文件夾中的內(nèi)容，然后再執(zhí)行 Android 應(yīng)用即可實(shí)現(xiàn)更新
七、更換應(yīng)用圖標(biāo)
打開 ./android/app/src/main/res/ 能看到 app 中需要的圖片資源文件夾。
這里面有好多個(gè)對(duì)應(yīng)不同尺寸的資源文件夾，我們只需要保留一個(gè)就好。
將 文件夾聽圖標(biāo)替換成自己的就可以了。最好照著它的來，邊緣透明區(qū)域什么的都照著來。
八、如何打包成 apk
AndroidStudio 中 Build - Generate Signed Bundle / APK
keystore 需要自己生成一個(gè)，生成教程在這
生成 .keystore 說明：https://ask.dcloud.net.cn/article/35777
文章來源：http://www.zghlxwxcb.cn/news/detail-715904.html
此時(shí)點(diǎn)擊 locate 即可打開生成的 APK 目錄
文章來源地址http://www.zghlxwxcb.cn/news/detail-715904.html
九、完成
到了這里，關(guān)于Capacitor 打包 h5 到 Android 應(yīng)用，uniapp https http net::ERR_CLEARTEXT_NOT_PERMITTED的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
