混合應用開發的模式,越來越被各大公司熱推,憑藉其快速迭代,跨平臺的特性,已經變得炙手可熱, 那個爲了能更貼合於Native效果,有更好的用戶體驗,cordova的配置更是關鍵,今天就來分析一下cordova常用的配置屬性。
首先,我們來看一個配置文件:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phd.demoProject" version="0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyDemoProject</name>
<description>
MyDemoProject
</description>
<author email="[email protected]" href="http://blog.csdn.net/jiangbo_phd">
MyDemoProject
</author>
<content src="index.html" />
<!-- cordova-plugin-whitelist -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<access origin="*" />
<allow-intent href="tel:*"/>
<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="http:*" />
<access launch-external="yes" origin="https:*" />
<!-- stop uiwebview from bouncing in iOS -->
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<!-- android ice cream sandwich -->
<preference name="android-minSdkVersion" value="14" />
<!-- cordova-plugin-statusbar -->
<preference name="StatusBarBackgroundColor" value="#000000" />
<!-- prevent web storage backups -->
<preference name="BackupWebStorage" value="none" />
<!-- cordova-plugin-splashscreen -->
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="Orientation" value="portrait" />
<!-- allow keyboard trigger with focus events -->
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<!-- status bar permissions -->
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="assets/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="assets/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="assets/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="assets/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="assets/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="assets/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="port-ldpi" src="assets/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="assets/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="assets/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="assets/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="assets/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="assets/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<config-file target="*-Info.plist" parent="CFBundleURLTypes">
<key>NSCameraUsageDescription</key>
<string>Please allow application use camera!</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please allow application use photo library!</string>
</config-file>
<icon height="57" src="assets/ios/icon/icon.png" width="57" />
<icon height="114" src="assets/ios/icon/[email protected]" width="114" />
<icon height="40" src="assets/ios/icon/icon-40.png" width="40" />
<icon height="80" src="assets/ios/icon/[email protected]" width="80" />
<icon height="50" src="assets/ios/icon/icon-50.png" width="50" />
<icon height="100" src="assets/ios/icon/[email protected]" width="100" />
<icon height="60" src="assets/ios/icon/icon-60.png" width="60" />
<icon height="120" src="assets/ios/icon/[email protected]" width="120" />
<icon height="180" src="assets/ios/icon/[email protected]" width="180" />
<icon height="72" src="assets/ios/icon/icon-72.png" width="72" />
<icon height="144" src="assets/ios/icon/[email protected]" width="144" />
<icon height="76" src="assets/ios/icon/icon-76.png" width="76" />
<icon height="152" src="assets/ios/icon/[email protected]" width="152" />
<icon height="29" src="assets/ios/icon/icon-small.png" width="29" />
<icon height="58" src="assets/ios/icon/[email protected]" width="58" />
<icon height="87" src="assets/ios/icon/[email protected]" width="87" />
<splash height="1136" src="assets/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="assets/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="assets/ios/splash/Default-736h.png" width="1242" />
<splash height="960" src="assets/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="assets/ios/splash/Default~iphone.png" width="320" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1" />
<plugin name="cordova-plugin-statusbar" spec="~2.1.3" />
<plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
</widget>
下面我從上到下依次來分析:
定義項目的package 和版本號
在最外層Widget元素上,我們看到有id=”“, version=”“兩個屬性,當我們初始化cordova項目上這會有一個默認的配置,但之後我們需要根據需要自己進行配置。
- id: 配置好後會自動生成到android的package name 和ios 的bundle id, 也就是說我們不需要再從新根據平臺從新指定。
- version: 是用來管理我們的版本號,在版本迭代的時候很重,配置好後,會自動動生成在項目裏。
指定項目的名字,描述,作者信息
除了項目名字,其他的不是特別的重要,項目名字決定了ios和android的工程名字:
<name>MyDemoProject</name>
描述和作者信息自己填寫一下就OK了
啓動路徑,跳轉訪問權限配置
<content src="index.html" />
<!-- cordova-plugin-whitelist -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<access origin="*" />
<allow-intent href="tel:*"/>
<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="http:*" />
<access launch-external="yes" origin="https:*" />
- content src 指定了cordova需要默認啓動哪個 文件,這個輕易不要篡改。
- allow-navigation 決定是了是否允許http, https的網址跳轉。
- allow-intent 這個用於指定是否允許調用電話撥打功能,在早些版本時候,這個是不需要指定的,但是cordova6.0+以後發現這個電話功能不好用了,配置了這個,才解決問題。
禁止webview回彈效果
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
cordova默認的項目,當滑動時候,在ios設備上會有個回彈效果,對於網站項目這個正常,但是手機app這個是不需要的,而且影響體驗,所以我們需要禁止掉這個屬性;
<preference name="DisallowOverscroll" value="true" />
是否允許後臺存儲
<preference name="BackupWebStorage" value="none" />
這個屬性我們一定要配置none,否則的後ios會調用icloud存儲,這個雖然沒有大的影響,但是在發佈到apple store的時候可能會因爲這個原因,被拒絕掉。
splash 啓動配置
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="Orientation" value="portrait" />
在app啓動的時候我們會看到各種啓動圖片,這個叫splash, 我們需要對此進行配置,前提是我要安裝splash插件才能生效的,並且也可配置app的橫豎屏,啓動頁面的持續時間等等。
針對平臺的設置
<platform name="android">
<allow-intent href="market:*" />
</platform>
對於不同的平臺會有不同的設置,比如splash和icon, 因爲android 和ios上尺寸是不一樣的。
插件配置
<plugin name="cordova-plugin-whitelist" spec="1" />
<plugin name="cordova-plugin-statusbar" spec="~2.1.3" />
<plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
我們必須要配置的插件通常就是上面幾個,白名單用來允許訪問https網絡,主要是用在android的項目,但是對於最新的cordova應該不需要了。
plugin這個是最新的定義方式,之前我一直在用feature這個屬性,但是後來發現被廢棄掉了。
指定好這個plugin以後,每次cordova會檢查項目是否有這個幾個插件,如果沒有的話,自動從新下載,有的話不下載,當本地和定義版本不一致的使用,更新重新下載。
總結
以上就是cordova的配置文件常用解析,當然還有更多的屬性值得我們去探索,後期大家自己研究一下吧!