移动web中间件phonegap二（调用移动终端API）

 这篇主要给大家介绍一些phonegap中调用本地API的插件

一、都有哪些插件：

Accelerometer 设备点击屏幕手势感应器（有了这个就可以开发重力感应类的游戏了）

Camrea 调用设备摄像头照相采集照片 

Capture 使用设备的媒体采集应用程序调用媒体文件

Compass 获取设备移动的方向

Connection 快速检查网络状况以及蜂窝网络的信息

Contacts 设备联系人相关操作

Device 获取设备信息

Events 通过JavaScript获取本地活动

File 通过JavaScript调用本地文件系统

Geolocation 使应用程序可以访问地理位置信息

Globalization 国际化

Media 录制和播放音频文件

Notification 设备视觉、声音和触觉反馈

Splashscreen 启动画面

Storage 截获设备的本地存储选项

 

二、插件的使用：

首先是要在调用插件的html中引入cordova-2.2.0.js(在下载的资源中lib\android目录下)；

接下来我们来看两种比较常用的插件的使用：

1、File 本地文件的读写

文件的写入

// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {
 // 这里的文件路径为相对路径,根目录为file:///mnt/sdcard
    fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
    //fileEntry.createWriter(seek_ex, fail);
}

//seek是指从原文件第几个字符开始写入
function seek_ex(writer) {
    writer.onwrite = function(evt) {
        console.log("write success");
    };
    writer.seek(writer.length);
    writer.write("appended text");
};

function gotFileWriter(writer) {
    writer.onwriteend = function(evt) {
        console.log("contents of file now 'some sample text'");
        writer.truncate(21);  //存21个字节
        writer.onwriteend = function(evt) {
            console.log("contents of file now 'some sample'");
        };
    };
    writer.write("some sample text读文件");//写入
}

function fail(error) {
    console.log(error.code);
}

文件的读出，这里我们要注意的是，我们读取的文件最好为UTF-8编码格式的，否则中文会乱码

 // Wait for Cordova to load
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova is ready
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readAsText(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            $("#contents").append("<div>Read as text</div>");
            console.log(evt.target.result);
            $("#contents").append("<div>"+evt.target.result+"</div>");
        };
        reader.readAsText(file);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }

2、Storage的数据存储

phonegap的数据存储提供了两种方式，一种是localStorage,还有一种是sqlite数据库。

localStorage是html5所自带的一种数据存储方式，即使没有phonegap也是可以用的，

我们主要介绍sqlite数据库的增删查改调用。

顺带给一段localStorage的简单使用示例：（其实window.localStorage就是一个类似于json结构的对象）

window.localStorage.setItem("key", "value");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
window.localStorage.removeItem("key");
window.localStorage.setItem("key2", "value2");
window.localStorage.clear();

下面来看sqlite的调用：

 // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Populate the database
    // 建表，插入字段
    function populateDB(tx) {
        tx.executeSql('DROP TABLE IF EXISTS DEMO');
        tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
    }

    // Query the database
    // 插入成功后调用，查询表内现有所有字段
    function queryDB(tx) {
        tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
    }

    // Query the success callback
    // 查询成功后调用
    function querySuccess(tx, results) {
        var len = results.rows.length;
        console.log("DEMO table: " + len + " rows found.");
        for (var i=0; i<len; i++){
            console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
            $('#database').append("<tr><td class='id'>"+results.rows.item(i).id+"</td><td class='data'>"+results.rows.item(i).data+"</td></tr>");
        }
    }

    // Transaction error callback
    //
    function errorCB(err) {
        console.log("Error processing SQL: "+err.code);
    }

    // Transaction success callback
    //
    function successCB() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(queryDB, errorCB);
    }

    // Cordova is ready
    //
    function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }

以上代码介绍了插入与查询，修改与删除的方法类似于插入，只是sql语句不同，请自行补充sqlite的sql语句。

 

下集预告：phonegap的插件开发

欲知后事如何，请听下回分解！