onic开发中，cordova自定义插件之配置文件plugin.xml详解

<?xml version="1.0" encoding="UTF-8"?>

<plugin

xmlns="http://apache.org/cordova/ns/plugins/1.0"id="cordova-plugin-device"version="0.0.1">

<engines>

<enginename="cordova-android"version="=1.8.0"/>

</engines>

<name>Device</name>

<description>Cordova Device Plugin</description>

<license>Apache 2.0</license>

<keywords>cordova,device</keywords>

<js-modulesrc="www/device.js"name="device">

<clobberstarget="device"/>

</js-module>

<platformname="ios">

<config-filetarget="config.xml"parent="/*">

<featurename="Device">

<paramname="ios-package"value="CDVDevice"/>

</feature>

</config-file>

<header-filesrc="src/ios/CDVDevice.h"/>

<source-filesrc="src/ios/CDVDevice.m"/>

</platform>

</plugin>

详细解读：

1、plugin（顶级节点，最外层）

<?xml version="1.0" encoding="UTF-8"?>

<plugin

xmlns="http://apache.org/cordova/ns/plugins/1.0"

xmlns:android="http://schemas.android.com/apk/res/android"id="my-plugin-id"version="1.0.2">

Attributes

xmlns：插件命名空间，如果包括其他命名空间的xml文件，例如android的AndroidManifest.xml 也需要添加到plugin的头标签中。

id：npm风格的插件标识符

version：插件版本号（例：0.0.1）

2、engine/engines (二级节点)

需要注意cordova6.1.0以上版本，推荐在package.json中指定插件依赖的platform、plugin和CLI 。

<engines>

<enginename="cordova-android"version="=1.8.0"/>

</engines>

<engines>

<enginename="cordova"version="&gt;=1.7.0"/>

<enginename="cordova-android"version="&gt;=1.8.0"/>

<enginename="cordova-ios"version="&gt;=1.7.1"/>

</engines>

默认支持的引擎如下：

cordova

cordova-plugman

cordova-android

cordova-ios

cordova-blackberry10

cordova-wp8

cordova-windows

cordova-osx

windows-os

android-sdk (returns the highest Android api level installed)

windows-sdk (returns the native windows SDK version)

apple-xcode (returns the xcode version)

apple-ios (returns the highest iOS version installed)

apple-osx (returns the OSX version)

blackberry-ndk (returns the native blackberry SDK version)

&gt;=1.7.1

是模糊指定版本，>=1.7.1

3、name（二级节点）

<name>Foo</name>

指定插件名称

4、description（二级节点）

<description>Foo plugin description</description>

插件描述信息

5、author（二级节点）

<author>Foo plugin author</author>

插件作者

6、keywords（二级节点）

<keywords>foo,bar</keywords>

插件关键字

7、license（二级节点）

<license>Apache 2.0 License</license>

插件授权描述

8、asset（二级节点）

<!-- a single file, to be copied in the root directory -->

<assetsrc="www/foo.js"target="foo.js"/>

<!-- a directory, also to be copied in the root directory -->

<assetsrc="www/foo"target="foo"/>

列出将被复制到www下的文件夹和文件等资源，

src是插件里相对plugin.xml的路径，必须存在，否则安装插件的时候会报错失败；

target是app里相对www文件夹的路径，如果已经存在，那么安装插件的时候会报错失败。

可以设定多级子文件夹，同时可以重命名

9、js-module（二级节点）（platform下子节点）

<js-modulesrc="socket.js"name="Socket"></js-module>

src是插件里相对plugin.xml的js文件路径，必须存在，否则CLI安装插件的时候会报错失败；

name可以自行设定module的名称，通常是插件的id。

一个<js-module>对应一个javascript文件，避免用户不得不为每一个文件引入<script>标签，会自动添加。

<js-module>可以嵌套在指定的<platform>中，用于指定平台下的js 模块声明。

例子分析：安装插件的时候，socket.js 会被拷贝到 /www/plugins/my-plugin-id/socket.js ,同时在/www/cordova_plugins.js 中添加条目，应用启动加载的时候，cordova.js 通过XHR读取每个文件并注入<script>到html中。

Also for this example, with a plugin id of chrome-socket, the module name will be chrome-socket.Socket.

参考：http://cordova.apache.org/docs/en/latest/plugin_ref/spec.html

下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。

HTML 代码

<ion-header-bar class="bar-positive">
 <h1 class="title">开关切换</h1></ion-header-bar>
 <ion-content>
 <div class="list">
 <div class="item item-divider">
 Settings </div>
 <ion-toggle ng-repeat="item in settingsList"
 ng-model="item.checked"
 ng-checked="item.checked">
 {{ item.text }} </ion-toggle>
 <div class="item">
 <!-- 使用 pre 标签展示效果更美观 -->
 <div ng-bind="settingsList | json"></div>
 </div>
 <div class="item item-divider">
 Notifications </div>
 <ion-toggle ng-model="pushNotification.checked"
 ng-change="pushNotificationChange()">
 Push Notifications </ion-toggle>
 <div class="item">
 <!-- 使用 pre 标签展示效果更美观 -->
 <div ng-bind="pushNotification | json"></div>
 </div>
 <ion-toggle toggle-class="toggle-assertive"
 ng-model="emailNotification"
 ng-true-value="'Subscribed'"
 ng-false-value="'Unubscribed'">
 Newsletter </ion-toggle>
 <div class="item">
 <!-- 使用 pre 标签展示效果更美观 -->
 <div ng-bind="emailNotification | json"></div>
 </div>
 </div>
 </ion-content>

由于pre标签冲突，实例中的 pre 已替换为 div标签，具体可以在"尝试一下"中查看。

JavaScript 代码

angular.module('ionicApp', ['ionic']).controller('MainCtrl', function($scope) {
 $scope.settingsList=[
 { text: "Wireless", checked: true },
 { text: "GPS", checked: false },
 { text: "Bluetooth", checked: false }
 ];
 $scope.pushNotificationChange=function() {
 console.log('Push Notification Change', $scope.pushNotification.checked);
 };
 $scope.pushNotification={ checked: true };
 $scope.emailNotification='Subscribed';
 });

css 代码：

body {
 cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;}

效果如下所示：

ionic 单选框操作

ionic 手势事件