PhoneGap/Cordova学习笔记--3.初次使用Cordova插件

上一小节中，创建了第一个Cordova项目HelloWord，本小节将学习基础Cordova插件的使用

• 引入jquery.js文件

  • 下载 jquery.js文件，存放到www目录下的js目录中
    

  • 在index.html文件中引入js文件

<link rel="stylesheet" type="text/css" href="css/index.css">        <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>

• 下载Cordova的Device设备插件

  • 打开cordova.apache .org官网 → Documentation → Plugin APIs → Device，可以看到device有许多属性
    

  • 打开命令行窗口，输入下载指令：
    cordova plugin add cordova-plugin-device
    
    注意：如果没有切换到项目目录下，会发生如图红色错误

• 回到eclipse中编辑index.js文件

var app = {    // Application Constructor    initialize: function() {        this.bindEvents();    },    // Bind Event Listeners    //    // Bind any events that are required on startup. Common events are:    // 'load', 'deviceready', 'offline', and 'online'.    bindEvents: function() {        document.addEventListener('deviceready', this.onDeviceReady, false);    },    // deviceready Event Handler    //    // The scope of 'this' is the event. In order to call the 'receivedEvent'    // function, we must explicitly call 'app.receivedEvent(...);'    onDeviceReady: function() {        //app.receivedEvent('deviceready');        $(document).ready(function(){            ready();        })    },    // Update DOM on a Received Event    receivedEvent: function(id) {        var parentElement = document.getElementById(id);        var listeningElement = parentElement.querySelector('.listening');        var receivedElement = parentElement.querySelector('.received');        listeningElement.setAttribute('style', 'display:none;');        receivedElement.setAttribute('style', 'display:block;');        console.log('Received Event: ' + id);    }};function ready(){    $(".listening").hide();    $(".received").show();    $(".received").html("device model="+device.model+"\ndevice version="+device.version+"\ncordova version="+device.cordova+"\nplatform="+device.platform+"\nuuid="+device.uuid+"\ndevice isVirtual="+device.isVirtual+"\ndevice serial="+device.serial);}app.initialize();

• 这里主要修改了onDeviceReady方法，调用jquery的ready方法调用我们自己的ready方法

• 编写我们自己的ready方法，让.listening事件隐藏，.received事件显示，显示内容为我们在Device APIs中看到的属性，保存并运行
  

  • device.model：运行的设备
  • device.platform：运行平台
  • device.version：这里是(Android)的版本号
  • device.cordova：使用cordova的版本号
  • device.uuid：设备的UUID
  • device.isVirtual：设备是否为虚拟设备，我这里使用了真机
  • device.serial：设备的序列号

**cordova.apache.org上有更多的插件可以学习**