cordova學習-基礎篇

標籤：

Cordova 學習筆記（一）：快速開始

1.安裝cordova

Cordova安裝可以通過node.js從npm上擷取。npm install -g cordova 通過這個命令可以安裝cordova.前提是你已經安裝了node.js。

2.建立一個項目

通過命令列建立一個空的cordova project.通過命令列先引導到你想建立項目的目錄，然後命令：cordova create <path> .可以通過cordova help create擷取完整的命令。

3.添加一個開發平台

建立完一個空項目，引導到建立的項目路徑下，通過命令cordova  platform add <platform  name>建立一個你想要的平台的項目。想看cordova支援哪些平台的項目，使用命令列：cordova platform. 如：建立android平台的項目，cordova platform add android.移除可以用cordova platform remove android .

4.運行你的app

cordova run <platform name>

5.讀api文檔：http://cordova.apache.org/docs/en/latest/guide/overview/

6.給項目添加外掛程式：當你建立一個預設的空項目時，沒有添加任何外掛程式，你可以根據需要，自己手動添加外掛程式到項目中，有許多外掛程式，包括社區小組提供的，你都可以在plugins.cordova.io看到。你可以通過命令列在倉庫尋找，然後添加到項目中。例如，搜尋bar和code,   $ cordova plugin search bar code產生一條大小寫忽略的包含2個子字串的外掛程式名稱。添加使用命令cordova plugin add <plugin name>。比如添加device，cordova plugin add cordova-plugin-device。

常用的外掛程式有：

$ cordova plugin add cordova-plugin-network-information

$ cordova plugin add cordova-plugin-battery-status

$ cordova plugin add cordova-plugin-device-motion

$ cordova plugin add cordova-plugin-device-orientation

$ cordova plugin add cordova-plugin-geolocation

$ cordova plugin add cordova-plugin-camera

$ cordova plugin add cordova-plugin-media-capture

$ cordova plugin add cordova-plugin-media

$ cordova plugin add cordova-plugin-file

$ cordova plugin add cordova-plugin-file-transfer

$ cordova plugin add cordova-plugin-console

 

 

7.添加app表徵圖

可以通過通過命令列或者ADT

<icon>元素在config.xml中定義app表徵圖。如果沒有設定，預設會使用cordova的表徵圖。

 <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />，這些屬性，只有src是必須的。density是android專屬的，設定表徵圖密度。

通過<icon src="res/icon.png" />，設定所有平台一致的表徵圖。

你也可以通過類似下面的設定，為不同解析度的裝置設定體驗更好的表徵圖  

<platform name="android">

              <icon src="res/android/ldpi.png" density="ldpi" />

              <icon src="res/android/mdpi.png" density="mdpi" />

              <icon src="res/android/hdpi.png" density="hdpi" />

              <icon src="res/android/xhdpi.png" density="xhdpi" />

     </platform>

 

8.啟動畫面設定

在項目根部的 config.xml 檔案中，而不是platforms中的 添加，向下面一樣：

 

Please notice that the value of the "src" attribute is relative to the project directory and not to the www directory. You can name the source image whatever you like. The internal name in the app are determined by Cordova.

 

<platform name="android">

    <!-- you can use any density that exists in the Android project -->

    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>

    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>

    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>

    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

 

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>

    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>

    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>

    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/></platform>

 

<preference name="SplashScreenDelay" value="10000" />

 

 

9.配置app

通過config.xml檔案。Ios和android的設定檔位置：

   app/platforms/ios/AppName/config.xml       app/platforms/android/res/xml/config.xml

核心公用配置元素：

這是通過命令列建立的預設配置：

<widget id="com.example.hello" version="0.0.1">

        <name>HelloWorld</name>

        <description>

            A sample Apache Cordova application that responds to the deviceready event.

        </description>

        <author email="[email protected]" href="http://cordova.io">

            Apache Cordova Team

        </author>

        <content src="index.html" />

        <access origin="*" />

</widget>

 

我的一個完整的例子：

 

<?xml version=‘1.0‘ encoding=‘utf-8‘?>

<widget id="org.mjing.adroidCordova" version="0.0.2"  android-versionCode="1.2.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    <preference name="loglevel" value="DEBUG" />

    <preference name="Fullscreen" value="true" />

    <preference name="BackgroundColor" value="0xff0000ff"/>

    <feature name="Whitelist">

        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />

        <param name="onload" value="true" />

    </feature>

    <feature name="Device">

        <param name="android-package" value="org.apache.cordova.device.Device" />

    </feature>

    <feature name="Camera">

        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />

    </feature>

    <feature name="Notification">

        <param name="android-package" value="org.apache.cordova.dialogs.Notification" />

    </feature>

    <feature name="SplashScreen">

        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />

        <param name="onload" value="true" />

    </feature>

    <feature name="NetworkStatus">

        <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />

    </feature>

    <feature name="File">

        <param name="android-package" value="org.apache.cordova.file.FileUtils" />

        <param name="onload" value="true" />

    </feature>

    <feature name="Media">

        <param name="android-package" value="org.apache.cordova.media.AudioHandler" />

    </feature>

    <preference name="AndroidPersistentFileLocation" value="Internal" />

    <allow-intent href="market:*" />

    <name>FirstCordova</name>

    <description>

        jing.ming 的第一個cordova項目.

    </description>

    <author email="[email protected]" href="http://http://cordova.apache.org/docs/en/latest/config_ref/index.html">

        jing.ming

    </author>

    <platform name="android">

              <icon src="res/android/aicai.png"/>

              <splash src="res/android/bar3.jpg"/>

            <!--   <icon src="res/android/mdpi.png" density="mdpi" />

              <icon src="res/android/hdpi.png" density="hdpi" />

              <icon src="res/android/xhdpi.png" density="xhdpi" /> -->

     </platform>

    <content src="index.html" /><!-- start page -->

    <access origin="*" />

    <allow-intent href="http://*/*" />

    <allow-intent href="https://*/*" />

    <allow-intent href="tel:*" />

    <allow-intent href="sms:*" />

    <allow-intent href="mailto:*" />

    <allow-intent href="geo:*" />

</widget>

 

這裡只說明android的配置：

太多了，需要的時候自己在查文檔吧。

<preference name="KeepRunning" value="false"/>

<preference name="LoadUrlTimeoutValue" value="10000"/>

<preference name="SplashScreen" value="mySplash"/>

<preference name="SplashScreenDelay" value="10000"/>

<preference name="InAppBrowserStorageEnabled" value="true"/>

<preference name="LoadingDialog" value="My Title,My Message"/>

<preference name="LoadingPageDialog" value="My Title,My Message"/>

<preference name="ErrorUrl" value="myErrorPage.html"/>

<preference name="ShowTitle" value="true"/>

<preference name="LogLevel" value="VERBOSE"/>

<preference name="AndroidLaunchMode" value="singleTop"/>

<preference name="OverrideUserAgent" value="Mozilla/5.0 My Browser" />

<preference name="AppendUserAgent" value="My Browser" />

 

cordova學習-基礎篇