Cordova+Vue實現Android APP開發(二)-- 打包運行在真機上和打包運行在本地調試,以及打包時候一些問題的處理

接上一篇文章: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進行代理。

 

最終正常運行:

截圖

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章