Cordova插件支持

针对iOS平台的Crosswalk基于Crosswalk Extension机制，通过引入Cordova框架，提供了对Cordova插件的支持。Cordova extension负责管理Cordova插件的生命循环，复制Cordova插件运行的环境，并基于Crosswalk 扩展框架提供Cordova插件需要的功能。你无需改变任何插件的代码，只需利用已有的Cordova插件来扩展Crosswalk的功能。

Cordova插件API

未来，我们将会支持所有的Corvode插件API，目前可用的API如下：

已经被支持的插件

在开发中

org.apache.cordova.camera

由衷地欢迎您加入我们，为Crosswalk提供更多的Cordova插件贡献一份力量。

快速入门

本小节，我们通过创建一个嵌入了org.apache.cordova.device插件的简单应用来展示在应用中使用Cordova插件的过程。

搭建DeviceDemo工程

创建DeviceDemo工程

我们需要创建一个应用工程来支持Cordova插件和web资源。

创建DeviceDemo工程
- 打开Xcode。使用"Single View Application"模板创建一个命名为"DeviceDemo"的iOS应用。选择"Swift"为项目开发语言。
- 为了快速演示，将自动生成的ViewController.swift文件替换成crosswalk-ios/AppShell/AppShell/CordovaViewController.swift上相应的文件，其中它已经为你创建好了一个XWalkView实例。
- 仅为了清除自动生成的ViewController.swift中的内容，将它们替换成crosswalk-ios/AppShell/AppShell/CordovaViewController.swift。
使用CocoaPods将crosswalk-ios和crosswalk-extension-cordova整合到项目中。
- 在DeviceDemo目录下，创建一个名为Podfile的文件：
```
cd DeviceDemo
touch Podfile
```
内容如下：
```
platform :ios, '8.1'
use_frameworks!
pod 'crosswalk-extension-cordova', '~> 1.1'
```
这会使CocoaPods设置应用部署目标版本为iOS 8.1+，并且需要将最新版本的1.1.x整合到crosswalk-extension-cordova库中。记住要添加use_frameworks!，因为crosswalk-ios`一部分是使用Swift语言编写，它必须作为一个Framework编译而不是一个静态库。

你可能注意到我们还没有添加crosswalk-ios的依赖。这个并不是，必须的因为crosswalk-extension-cordova依赖于crosswalk-ios并且CocoaPods会自动处理依赖关系。
- 安装Pod目标到项目。
首先退出Xcode，然后进入DeviceDemo目录，使用下列命令安装pods：
```
pod install
```
然后你将发现生成了一个DeviceDemo.xcworkspace，并且CocoaPods会通知你从现在开始使用这个工作空间来代替使用DeviceDemo.xcodeproj。
打开DeviceDemo.xcworkspace，尝试编译DeviceDemo应用目标，查看其是否正常工作。

引入`org.apache.cordova.device`插件资源

下一步是从 org.apache.cordova.device 将原生代码和html5资源引入到项目中。

克隆org.apache.cordova.device

git clone https://github.com/apache/cordova-plugin-device.git

向应用中添加插件资源文件的原生代码部分
- 选择DeviceDemo项目，执行File -> Add Files to "DeviceDemo"...,
- 从cordova-plugin-device/src/ios中将CDVDevice.h和CDVDevice.m添加到项目中。
- 注意：如果你需要创建一个bridging header Xcode会通知你，然后创建即可。

向应用中添加HTML5部分的资源

cd DeviceDemo; mkdir -p www/plugins/org.apache.cordova.device/www/
cd www; cp ../../cordova-plugin-device/www/device.js plugins/org.apache.cordova.device/www
vim plugins/org.apache.cordova.device/www/device.js

因为device.js仅仅提供了device对象的实现，我们需要在将其引入到web应用的内容前，将其通过闭包包装成一个Cordova模块。（我们将会提供一个脚本，实现本步骤自动化）。

cordova.define("org.apache.cordova.device.device", function(require, exports, module) {
 // The original content of device.js goes here.
 ...
});

创建Cordova扩展需要的配置

我们还需要添加一个配置文件来告诉Cordova扩展如何加载Cordova插件。为了提供跟Crodova项目相同的方式，这里我们模拟Cordova项目的做法。在www目录下：

  touch cordova_plugins.js
  vim cordova_plugins.js

内容如下：

  cordova.define('cordova/plugin_list', function(require, exports, module) {
  module.exports = [
      {
          "file": "plugins/org.apache.cordova.device/www/device.js",
          "id": "org.apache.cordova.device.device",
          "clobbers": [
              "device"
          ]
      }
  ];
  module.exports.metadata =
  // TOP OF METADATA
  {
      "org.apache.cordova.device": "0.2.12"
  }
  // BOTTOM OF METADATA
  });

创建Web应用

在引入设备插件以后，我们需要利用device插件的能力来创建web应用。

在www目录下创建index.html。

touch index.html
vim index.html

内容如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <style>
       table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
       }
       th, td {
           padding: 5px;
       }
   </style>
   <title>Cordova device API plugin demo</title>
</head>
<body>
   <p>This is the demo page for testing org.cordova.plugin.device.</p>
   <table id='table' style='width:100%'>
       <caption>Device Properties</caption>
       <thead>
           <tr>
               <th>Name</th>
               <th>Value</th>
           </tr>
       </thead>
   </table>
   <script>
       document.addEventListener("deviceready", onDeviceReady, false);
       function onDeviceReady() {
           var table = document.getElementById('table');
           for (var propName in device) {;
               if (typeof(device[propName]) == 'function') {
                   continue;
               }
               var row = document.createElement('tr');
               var name = document.createElement('td');
               var value = document.createElement('td');
               name.innerHTML = propName;
               value.innerHTML = device[propName];
               row.appendChild(name);
               row.appendChild(value);
               table.appendChild(row);
           }
       }
   </script>
</body>
</html>

　在这个演示中，我们将监听deviceready事件并从device对象检索系统信息，然后将它们添加到表格中。device对象是由org.apache.cordova.device插件提供，系统信息是从iOS系统层收集到的。

将web资源嵌入项目

我们需要将web资源（包括插件和app资源）添加到项目中，并且打包成一个原生的iOS应用。
- 选择DeviceDemo项目，然后执行File -> Add Files to "DeviceDemo"...，
- 将www目录添加到项目中，同时选择Create folder references选项。
为项目创建manifest.plist文件

manifest.plist描述了应用中嵌入的extension的信息，以及相关的Cordova插件信息。
- 选择DeviceDemo项目，执行File -> New -> File，
- 选取iOS -> Resource -> Property List，输入名称： manifest。
然后添加：
- String类型的start_url和index.html的值。
- Array类型的xwalk_extensions并在其中添加：
  - String类型的xwalk.cordova。
- Array类型的cordova_plugins并添加一条Dictionary类型的记录。在Dictionary中添加：
  - class作为key，同时CDVDevice作为value；
  - name作为key，同时Device作为value；
在iOS Device设备上编译并运行DeviceDemo应用，查看其是否能够正常运行。

现在这个演示应该可以使用了。