抱歉,该网页目前还不存在中文版本,请继续浏览其他网页!

Cordova插件支持

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

Cordova插件API

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

已经被支持的插件

在开发中

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

快速入门

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

搭建DeviceDemo工程

创建DeviceDemo工程

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

  1. 创建DeviceDemo工程

  2. 使用CocoaPodscrosswalk-ioscrosswalk-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

  3. 打开DeviceDemo.xcworkspace,尝试编译DeviceDemo应用目标,查看其是否正常工作。

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

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

  1. 克隆org.apache.cordova.device

    git clone https://github.com/apache/cordova-plugin-device.git
  2. 向应用中添加插件资源文件的原生代码部分

    • 选择DeviceDemo项目, 执行File -> Add Files to "DeviceDemo"...,

    • cordova-plugin-device/src/ios中将CDVDevice.hCDVDevice.m添加到项目中。

    • 注意:如果你需要创建一个bridging header Xcode会通知你,然后创建即可。

  3. 向应用中添加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.
     ...
    });
  4. 创建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应用。

  1. 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系统层收集到的。

  1. 将web资源嵌入项目

    我们需要将web资源(包括插件和app资源)添加到项目中,并且打包成一个原生的iOS应用。

    • 选择DeviceDemo项目,然后执行File -> Add Files to "DeviceDemo"...

    • www目录添加到项目中,同时选择Create folder references选项。

  2. 为项目创建manifest.plist文件

    manifest.plist描述了应用中嵌入的extension的信息,以及相关的Cordova插件信息。

    • 选择DeviceDemo项目,执行File -> New -> File

    • 选取iOS -> Resource -> Property List,输入名称: manifest

    然后添加:

    • String类型的start_urlindex.html的值。
    • Array类型的xwalk_extensions并在其中添加:
      • String类型的xwalk.cordova
    • Array类型的cordova_plugins并添加一条Dictionary类型的记录。在Dictionary中添加:
      • class作为key,同时CDVDevice作为value;
      • name作为key,同时Device作为value;
  3. iOS Device设备上编译并运行DeviceDemo应用,查看其是否能够正常运行。

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

演示

ios-extension-crosswalk项目下的演示文件夹中,有两个演示可以用来展示Cordova插件的使用。你可以试用一下来了解它们如何工作。