onic開發(fā)中，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>

詳細(xì)解讀：

1、plugin（頂級節(jié)點，最外層）

<?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的頭標(biāo)簽中。

id：npm風(fēng)格的插件標(biāo)識符

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

2、engine/engines (二級節(jié)點)

需要注意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>

默認(rèn)支持的引擎如下：

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（二級節(jié)點）

<name>Foo</name>

指定插件名稱

4、description（二級節(jié)點）

<description>Foo plugin description</description>

插件描述信息

5、author（二級節(jié)點）

<author>Foo plugin author</author>

插件作者

6、keywords（二級節(jié)點）

<keywords>foo,bar</keywords>

插件關(guān)鍵字

7、license（二級節(jié)點）

<license>Apache 2.0 License</license>

插件授權(quán)描述

8、asset（二級節(jié)點）

<!-- 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"/>

列出將被復(fù)制到www下的文件夾和文件等資源，

src是插件里相對plugin.xml的路徑，必須存在，否則安裝插件的時候會報錯失敗；

target是app里相對www文件夾的路徑，如果已經(jīng)存在，那么安裝插件的時候會報錯失敗。

可以設(shè)定多級子文件夾，同時可以重命名

9、js-module（二級節(jié)點）（platform下子節(jié)點）

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

src是插件里相對plugin.xml的js文件路徑，必須存在，否則CLI安裝插件的時候會報錯失敗；

name可以自行設(shè)定module的名稱，通常是插件的id。

一個<js-module>對應(yīng)一個javascript文件，避免用戶不得不為每一個文件引入<script>標(biāo)簽，會自動添加。

<js-module>可以嵌套在指定的<platform>中，用于指定平臺下的js 模塊聲明。

例子分析：安裝插件的時候，socket.js 會被拷貝到 /www/plugins/my-plugin-id/socket.js ,同時在/www/cordova_plugins.js 中添加條目，應(yīng)用啟動加載的時候，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

下實例中，通過切換不同開關(guān) checked 顯示不同的值，true 為打開，false 為關(guān)閉。

HTML 代碼

<ion-header-bar class="bar-positive">
 <h1 class="title">開關(guān)切換</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 標(biāo)簽展示效果更美觀 -->
 <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 標(biāo)簽展示效果更美觀 -->
 <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 標(biāo)簽展示效果更美觀 -->
 <div ng-bind="emailNotification | json"></div>
 </div>
 </div>
 </ion-content>

由于pre標(biāo)簽沖突，實例中的 pre 已替換為 div標(biāo)簽，具體可以在"嘗試一下"中查看。

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 手勢事件