phonegap文案

时间:2012-04-10 19:36:06

标签: javascript ios cordova filewriter

我使用phonegap开发移动网络应用程序,并可能稍后将其转移到其他平台,例如android等。

我希望能够写入设备上的本地文件,但是,无论我做什么,它都无法正常工作。没有适当的文档来支持这些问题。

如果有人可以提供帮助,我会非常感激。

这是我的html文件:

    <!DOCTYPE html>
<html>
  <head>
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />-->
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css"/>
  <script src="jquery/jquery-1.6.4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <script src="jquery/jquery.mobile-1.0.1.min.js"></script>
  <title>Hello World</title>  

    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->        

    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="NativeControls.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
  </head>
    <body onload="onBodyLoad()">
      <div data-role="page" id="mainpage"> 
          <div data-role="header">
              <h1>LOGIN</h1>
          </div>
          <div data-role="content">
            <img src="images/cslogosmall2.png" style="margin-top: -10px; margin-left: -5px;"/>
            <form id="login" method="post">
              <p>
              <ul data-role="listview" data-theme="g" id="contentlist">
                  <b>Program:</b>
                  <input type="text" id="program"/>
                  <b>Username:</b>
                  <input type="text" id="username"/>
                  <b>Password:</b>
                  <input type="password"  id="password"/>
              </ul>
              </p>
              <br/>
                <button type="submit" data-theme="a" id="submit" value="Submit"></button>
                <a href="offline.html" onclick="test();">Offline</a>
            </form>
          </div>
          <!--<div data-role="footer"> 
              <h1> Main Page Footer </h1>
          </div>-->
      </div>
      <div data-role="page" id="contentpage"> 
          <div data-role="header"> 
              <h1> Content Page </h1>

          </div>
          <div data-role="content">
              <a href="#" data-role="button" onclick="history.go(-1);return false;" onClick=buttonDemo()> Back to Main Page </a>
              <a href="#" data-role="button" id="beepbtn" onClick=beepbeep()> Beep!</a>
          </div>
          <div data-role="footer"> 
              <h1> Content Page Footer </h1>
          </div>
      </div>      
  </body>
</html>

这是我的javascript文件:

    function validate() {

    navigator.notification.alert("validate called");
    var program = document.getElementById('program');
    var username = document.getElementById('username');
    var password = document.getElementById('password');

    if (!program || program == "") {
        navigator.notification.alert("Please enter a program");
        return false;
    }
    else if (!username || username == "") {
        navigator.notification.alert("Please enter a username");
        return false;
    }
    else if (!password || password == "") {
        navigator.notification.alert("Please enter a password");
        return false;
    }
    return true;
}

function beepbeep() {
    //navigator.notification.alert("Beep function called");
    navigator.notification.beep();
}


$(document).ready(function() {

    $('#submit').click(function() {
        var program = document.getElementById('program').value;
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;

        if (!program || program == "") {
            alert("Please enter a program", null, "ClearSpider", "OK");
            return false;
        }
        else if (!username || username == "") {
            alert("Please enter a username", null, "ClearSpider", "OK");
            return false;
        }
        else if (!password || password == "") {
            alert("Please enter a password", null, "ClearSpider", "OK");
            return false;
        }
        return true;
    });

    document.addEventListener("deviceready", onDeviceReady, false);
    window.addEventListener("resize", orientationChange, false);

});

function test() {

    console.log("fail");
    var fs = FileWriter.write(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    alert(LocalFileSystem.PERSISTENT);
    alert("Test called");
}

function onTabBarItem(id) 
{ 
    alert("hello");
    //jQT.goTo("#" + id, "slide"); 
    // if you need to modify the tabbar items that are shown, you should do 
    // so here. 
} 

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

function gotFS(fileSystem) {
    alert("at gotFS");
    fileSystem.root.getFile("readme.txt", {create: true}, gotFileEntry, fail); 
}

function gotFileEntry(fileEntry) {
    alert("at gotFileEntry");
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
    alert("at gotFileWriter");
    writer.onwrite = function(evt) {
        console.log("write success");
    };
    writer.write("some sample text");
    // contents of file now 'some sample text'
    writer.truncate(11);
    // contents of file now 'some sample'
    writer.seek(4);
    // contents of file still 'some sample' but file pointer is after the 'e' in 'some'
    writer.write(" different text");
    // contents of file now 'some different text'
}


/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
 see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
 for more details -jm */
function onDeviceReady() {
  // Initializating TabBar

    //window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    navigator.notification.alert("hi kaan", null, "hey", "SWEET");
    Cordova.exec("NativeControls.createTabBar");
    //var options = "top";
    var options = "bottom";

    navigator.notification.alert(window.requestFileSystem);

    window.onorientationchange = function() {
        var orientation = window.orientation;

        switch(orientation) {
            case 0:

                Cordova.exec("NativeControls.showTabBar", options);
                Cordova.exec("NativeControls.showToolBar");


                /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
                document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
                break; 

            case 90:

                Cordova.exec("NativeControls.showTabBar", options);
                Cordova.exec("NativeControls.showToolBar");

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
                break;

            case -90: 

                Cordova.exec("NativeControls.showTabBar", options);
                Cordova.exec("NativeControls.showToolBar");

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
                break;

            default:

                Cordova.exec("NativeControls.showTabBar", options);
                Cordova.exec("NativeControls.showToolBar");

                document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: ";
                break;         
        }//end switch
    }//end window.orientationchange

    //var taboptions = {"onSelect":onTabBarItemSelect};
    var moreNum = 1;

    Cordova.exec("NativeControls.showTabBar", options);

    var onSelect = {"onSelect":onTabBarItem};
    //onSelect = "hahaha";

    Cordova.exec("NativeControls.createTabBarItem", "test", "test", "tabButton:Recents", onSelect);
    Cordova.exec("NativeControls.createTabBarItem", "test2", "test2", "tabButton:Search", onSelect);
    Cordova.exec("NaviteControls.createTabBarItem", "test3", null, "tabButton:More", onSelect);

    Cordova.exec("NativeControls.showTabBarItems", "test", "test2", "test3"); 
    Cordova.exec("NativeControls.selectTabBarItem", "test");

    //Cordova.exec("NativeControls.tabBarItemSelected", "1");

     /*nativeControls = window.plugins.nativeControls;
     navigator.notification.alert(nativeControls);
     nativeControls.createTabBar();

  // Books tab
  nativeControls.createTabBarItem(
    "books",
    "Books",
    "tabButton:Recents",
    "",
    {"onSelect": function() {
      books();
    }}
  );

  // Stats tab
  nativeControls.createTabBarItem(
    "finished",
    "Finished",
    "tabButton:Recents",
    "",
    {"onSelect": function() {
      finished();
    }}
  );

  // About tab
  nativeControls.createTabBarItem(
    "about",
    "About",
    "tabButton:Recents",
    "",
    {"onSelect": function() {
      about();
    }}
  );

  // Compile the TabBar
  nativeControls.showTabBar();
  nativeControls.showTabBarItems("books", "finished", "about");
  nativeControls.selectTabBarItem("books");*/
}


function orientationChange() {
    var nativeControls = window.plugins.nativeControls;
    nativeControls.resizeTabBar();
}

function books() {


}

function about() {

}

function finished(){

}

请注意,此行不起作用:     navigator.notification.alert(window.requestFileSystem);不会显示提醒。

1 个答案:

答案 0 :(得分:0)

昨天,当我成功看到警报时,我正在使用1.4.1。当我切换到1.5.0时,警报打印为空。这是因为在cordova-1.5.0中添加了需要的命名空间。

但是,即使在1.5.0中,API sample仍适用于我:

function gotFS(fileSystem) {
    navigator.notification.alert(window.requestFileSystem);
    myFS = fileSystem;
    console.log(fileSystem.name);
    console.log(fileSystem.root.name);
    $('#file-system-text').html("File System: <strong>" + fileSystem.name + "</strong> " +
            "Root: <strong>" + fileSystem.root.name + "</strong>");
    fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, createGotFileEntry, writeFail);
}
function createFile() { // button onclick function
    if (myFS) {
        gotFS(myFS);
    } else {
        navigator.notification.alert(window.requestFileSystem);
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, failFS);

    }
}