本人是沒有從事過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
好了,到這裏就差不多了,可以去試試。我是已經成功了的。:-)