cordova 實現快速WEB打包APP,並修改APP名稱和圖標

      本人是沒有從事過APP開發的小白,java也不算熟悉。最近對WEB打包APP有一點興趣,之前有研究過一段時間ionic,快速開發APP,但是現在有很多網頁都已經做好了,不想再用ionic重新做一個,於是想用直接打包APP,快速將一個網頁變成APP。對新手還不錯。

      此方法主要是基於cordova打包APP,關於怎麼使用cordova就不想說過多,網上一大把,我就寫一些簡單流程(windows):

一、安裝環境

        1、安裝nodejs+npm (安裝好nodejs會自動安裝好npm,可以到    nodejs管網    下載安裝)

        2、安裝cordova (到控制檯用npm安裝;npm install -g cordova)

        3、JDK(    管網下載     按教程安裝就可以了)

        4、gradle(   管網下載    按教程安裝就可以了)

        5、android studio (開發用到的工具, 管網下載  按教程安裝就可以了,一起安裝好SDK,SDK安裝是比較蛋疼的,反正我安裝就搞死了,因爲我不是做安裝開發的  ~_~ )

        安裝差不多就需要這些東西,環境百度配置一下吧。東西有點多,寫不下。後面有時間在一個個安裝配置寫一下。

二,創建cordova

        1、先到工作目錄,然後輸入創建命令:

cordova create CordovaProject io.cordova.hellocordova CordovaApp

         2、進入創建的目錄下,添加平臺,我這裏是android (注意先 CD 到創建的目錄下哦)

cordova platform add android

        3、構建和運行 (這一步是最容易出錯的,我是出了不知道多少錯,試來不知道多少次才成功。錯誤就百度一下吧,主要是很多錯誤我也不是很懂 -----   因爲我不是做安卓開發的,強調 !!!

cordova build android

        上面就是創建成功一個cordova項目了,成功了繼續下面看,沒成功就百度一下吧。~,~.....

三、修改index.html,顯示自己想要顯示的網頁

       爲了顯示自己的網頁,先用一個簡單點的方式,iframe實現。把index.html的body中添加一個iframe

<iframe src="http://www.baidu.com" style="width:100%;height:100%;"></iframe>

        這裏記得把html和body都加一個height:100%哦,不然iframe撐不起來的,會只顯示上面一點

        還有一個需要注意的,index.html默認頭部對iframe加載有限制的,會導致iframe加載不了,需要做下面處理:

index.html的頭部添加/修改:

<meta http-equiv="Content-Security-Policy" content="default-src *; frame-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

          還一個問題,就是APP打開可能會出現網頁無法打開,錯誤: net::ERR_CLEARTEXT_NOT_PERMITTED  

          從Android 9.0(API級別28)開始,默認情況下限制了明文流量的網絡請求,對未加密流量不再信任,直接放棄請求,因此http的url均無法在webview中加載,https 不受影響。

         解決方案:

首先保證App申明瞭網絡權限

<uses-permission android:name="android.permission.INTERNET" />

1、在Application中打開一個開關

<manifest ...>
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

2、res 下新建 xml 目錄,創建文件:network_security_config.xml ,內容如下:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

在 AndroidManifest.xml 的 application 標籤添加配置:
<manifest ...>
    <application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        ...>
        ...
    </application>
</manifest>


3、服務器和本地應用都改用 https


4、targetSdkVersion 降級回到 27


這部分是直接在網上百度到的答案,(我一個小白怎麼可能知道  3*_*3  )
這部答案分來源於:https://blog.csdn.net/geofferysun/article/details/88575504

   

        應該還有一個類似很多方案都可以實現,比如直接js跳轉到想要的網址,或者修改首頁鏈接直接到目標網址,默認是本地index.html。不過後面這個方案需要對android有一點了解才知道怎麼改,我就懶得去試了,畢竟我是安卓小白一個。

       

四、修改APP名字

找到下面這個地方,修改爲你APP的名字

 

五、修改圖標

這個地方就是你設置圖標的路徑,可以修改成你自己設置的圖標名稱,我這裏改成icon,因爲我對應的圖標名稱都是icon.png

這些圖標存放對應目錄爲你的項目目錄下的: \platforms\android\app\src\main\res

就是這些,也可以自己重新建木有,修改路徑也可以的,不過新手還是不要改動那麼大吧,就替換一下圖片算了,打開對應目錄,更換好自己的圖標

六、打包APP

開始使用debug生成的apk,安裝一直失敗,也不知道爲啥,所以不建議用那個apk了,用這個流程打包還是可以的

 

生成的apk文件和debug一樣的,路徑是:\platforms\android\app\build\outputs\apk\debug

 

好了,到這裏就差不多了,可以去試試。我是已經成功了的。:-)  

 

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