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=">=1.7.0"/>
<enginename="cordova-android"version=">=1.8.0"/>
<enginename="cordova-ios"version=">=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)
>=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 手勢事件
話不說直接上干貨
Flutter Dart
Ionic HTML,CSS,JavaScript(支持VUE React Angular)
Flutter Flutter特有的引擎
Ionic Web 瀏覽器(或者WebView)
Flutter Flutter 本地接口插件庫
Ionic Cordova 或者 Capacitor(比較成熟的插件庫)
Flutter 支持
Ionic 支持
Flutter 和原生沒差別
Ionic 不如原生,但是感受不出來明顯的差距
Flutter 有限支持
Ionic 天生適合瀏覽器訪問
Flutter 手機APP,電腦桌面軟件,瀏覽器應(yīng)用
Ionic 手機APP,電腦桌面軟件,瀏覽器應(yīng)用,PWA
再來一個小總結(jié):
Ionic 因為使用的是html css js等web開發(fā)的技術(shù),所以上手容易,生態(tài)繁榮,但是也因為如此,ionic開發(fā)的APP的性能,距離原生還有一段差距。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。