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="dev@callback.apache.org" 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="395404211@qq.com" 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" />