Cordova配置文件常用屬性配置分析(config.xml)

這裏寫圖片描述

混合應用開發的模式,越來越被各大公司熱推,憑藉其快速迭代,跨平臺的特性,已經變得炙手可熱, 那個爲了能更貼合於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項目上這會有一個默認的配置,但之後我們需要根據需要自己進行配置。

  1. id: 配置好後會自動生成到android的package name 和ios 的bundle id, 也就是說我們不需要再從新根據平臺從新指定。
  2. 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:*" />
  1. content src 指定了cordova需要默認啓動哪個 文件,這個輕易不要篡改。
  2. allow-navigation 決定是了是否允許http, https的網址跳轉。
  3. 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的配置文件常用解析,當然還有更多的屬性值得我們去探索,後期大家自己研究一下吧!

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