接上一篇文章:Cordova+Vue實現Android APP開發(一)
一、使用cordova打包運行app
打包靜態資源,沒有問題的,但是把自己的vue其他項目轉成android app時候,發現接口請求不到數據。
1、對axios的統一加一個前綴
2、vue打包
3、打包android app
cordova run android
但是還是這樣接口沒有反應。
cordova install android //將編譯好的應用程序安裝到模擬器上。
cordova emulate android //在模擬器上運行(前提是創建好AVD)
cordova serve android //在瀏覽器運行
cordova build android //打包cordova項目到android平臺。
cordova run android //通過USB直接安裝到真機(該語句已經包括了build命令)
想debug一下,看一下問題,這樣的不知道怎麼debug
只能使用真機,使用谷歌瀏覽器的device模式。
4、調試華爲榮耀8真機
我使用的是華爲手機,在設置--系統--開發人員選項。
打開開發人員選項。
然後打開usb調試。
打開充電模式下的ADB調試
然後把電腦這邊需要安裝華爲驅動程序。。
不知道爲啥,檢測不到
然後我在電腦端就安裝了華爲手機助手。
然後設置了安全和隱私-->設備管理器,未知來源應用的
這些都設置完成之後,執行
cordova run android //通過USB直接安裝到真機(該語句已經包括了build命令)
這樣就可以成功了。
調試的時候,請先看一下這個:https://jingyan.baidu.com/article/db55b609fde96d4ba30a2fa9.html
在地址欄輸入"chrome://inspect"進入。
終於看到登陸接口
vendor.a01c62e2a9a919bfb338.js:12 Refused to connect to 'http://chat.chengxinsong.cn/api/chat/login' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
查了一下資料,原因是:
出於安全考慮,Cordova 4.0 以上環境中,需要安裝cordova-plugin-whitelist插件並 對
config.xml
中的<access origin="your-policy" />標籤和index.html中的META標籤做一定設置,防止出現共享 Webview 模式下的跨站攻擊等安全問題。
我們應該始終在 js 中添加事件監聽器,而不是內聯事件調用,因爲Cordova 內容安全策略不允許內置javascript。 如果我們嘗試調用事件內聯,我們將得到以下錯誤。
我們先在index.html中去掉這個meta標籤,這個標籤用來嚴格限制哪些請求會被攔截的,在開發環境下,先不用這個meta標籤,先去掉。
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
5、iconfont圖標不顯示
我是引用的cdn。如果直接下載下來放到項目裏應該就不會出現這個問題了。阿里iconfont提供的cdn沒有加上http/https協議。
<script src="http://at.alicdn.com/t/font_1083780_zb54wokfjud.js"></script>
6、字體變大
vue項目在pc端的手機模式下,是完整適配的,但是現在出現了整個字體放大。視覺體驗感下降了。
在platform-->android-->CordovaLib-->src-->org-->apache-->cordova-->engine-->SystemWebViewEngine.java
/*字體放大問題*/
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
紅框我添加的字體放大的處理辦法。這個設置成自適應。
正常顯示了:
注意:我使用了 settings.setTextZoom(100)並不能解決問題。
7、有時候真機出現錯誤--java.io.IOException: Requested internal only, but not enough space
Using apk: E:\2019github\happyChatApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Package name: io.cordova.happychatapp
adb: Command failed with exit code 1 Error output:
adb: failed to install E:\2019github\happyChatApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk:
Exception occurred while executing:
android.os.ParcelableException: java.io.IOException: Requested internal only, but not enough space
at android.util.ExceptionUtils.wrap(ExceptionUtils.java:34)
at com.android.server.pm.PackageInstallerService.createSession(PackageInstallerService.java:596)
at com.android.server.pm.PackageManagerShellCommand.doCreateSession(PackageManagerShellCommand.java:1362)
at com.android.server.pm.PackageManagerShellCommand.runInstall(PackageManagerShellCommand.java:201)
at com.
大致的意思就是說,運行本機的內存不夠用。
我就把真機的app卸載了一些,然後重新運行 codova run android ,這樣就可以正常安裝到真機上。
二、本地調試--啓動本地android服務
首先說一下,爲什麼出現這個問題,因爲最近把之前寫的loveBook準備打包成apk,然後發現cordova打包android apk出現空白頁(無法顯示)。
很尷尬,然後使用chrome://inspect查看是什麼地方報錯,發現沒有地方報錯,
然後使用查看元素髮現是<div id="app"></div>裏面的內容是空的。
後來查資料發現個本地調試cordova本地調試--(不需要每次打包都發送apk到手機上),可以通過cordova serve android
來啓動服務,用戶可以通過http://localhost:8000/android/www/index.html
來請求android平臺下的頁面,也就是相當於手機訪問到的首頁,如此一來方便調試了。
然後:瀏覽器請求到app中某個頁面時,所有的css、js全部加載了,肯定還是白屏,
但是這時候,console裏出現了錯誤信息“processMessage failed: invalid message: ""”,一會兒時間出現了3k都跳這樣的信息,同時頁面出現了瀏覽器內存泄露
1、報錯信息processMessage failed: invalid message: ""
後來發現是原因:
(1)路由模式不能使用history;
(2)axios異步請求存在跨域問題;
剩下來就是修改了:proxyTable
是在開發模式下才生效的,你通過cordova serve android
訪問的是打包後生產環境使用的index.html
文件,所以代理是不生效的。
2、cordova打包成apk後,axios異步請求該如何設置?
請求url可以直接寫服務器上的絕對地址就會訪問正確的地址了,如果開發環境和生產環境要請求不同的地址的話,可以自己做一下判斷。
如果存在跨域就是nginx進行代理。
最終正常運行: