網頁

2015年9月12日 星期六

【APP】PhoneGap讀寫檔案(File I/O)

沒有留言:
安裝方式請參考連結

Android
Read
window.SaveData = null;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    readFile();
}
function readFile() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotReadFS, null);
}
function gotReadFS(fileSystem){
    fileSystem.root.getFile("[FileName檔案名稱]", null, gotFileEntry, null);
}
function gotFileEntry(fileEntry) {
    fileEntry.file(gotFile, null);
}
function gotFile(file){
    readAsText(file);
}
function readAsText(file) {
       var reader = new FileReader();
       reader.onloadend = function(evt) {
              var txt = evt.target.result;
              window.SaveData = txt;
       };
       reader.readAsText(file);
}

Write

function writeFile() {
       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotWriteFS, fail);
}
function gotWriteFS(fileSystem) {
       fileSystem.root.getFile("[FileName檔案名稱]", {create: true, exclusive: false}, gotFileEntryWrite, fail);
}
function gotFileEntryWrite(fileEntry){
       fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
       var txt = "xxxxxxxxxxxxxxxxx";
       writer.write(txt);
       writer.onwriteend = function(evt){
              <<寫檔完成後要做的事情>>
       };
}

iOS
程式與Android一樣,不需更改

應用
一進入頁面就馬上讀取檔案,並且將讀取到的值顯示在jQueryMobile的Component上。
範例:App開啟便立即讀取儲存在手機上的帳號資訊,並顯示在帳號、密碼的textbox中


注意!此種一開啟就要開始讀檔的程式必須要確定PhoneGap、jQueryMobile兩Framework皆載入完成後才能執行,否則很容易得到意料之外的效果。

window.PhonegapReady = false; //PhoneGap Framework載入完畢
window.JQMReady = false; //jQueryMobile Framework載入完畢
isReadFileReady("ReadLoginInfo"); //讀檔
isBindLoginReady("BindLoginInfo"); //顯示內容至jQueryMobile的元件上
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
    window.PhonegapReady = true;
}
$(document).one("pagebeforeshow", function(){
    window.JQMReady = true;
});
function isReadFileReady(action) {
    if (window.PhonegapReady == true && window.JQMReady == true && (window.SaveData == "" || window.SaveData == null)) {
        if(action=="ReadLoginInfo") {
            readFile(); //讀檔
            }
    }
    else {
        window.setTimeout("isReadFileReady(\"" + action + "\");",200);
    }
}

function isBindLoginReady(action) {
    if (window.PhonegapReady == true && window.JQMReady == true && window.SaveData != "" && window.SaveData != null) {
        if(action=="BindLoginInfo") {
            bindContent(); //將讀取到的檔案內容更新至jQM元件中
        }
    }
    else {
        window.setTimeout("isBindLoginReady(\"" + action + "\");",100);
    }
}




【APP】PhoneGap Confirm視窗(Native Confirm/ Dialog)

沒有留言:
Ref: Cordova Plugin APIs Ctrl+F "Dialogs"
安裝方式請參考連結

Android
結合關閉App的應用:
function show_CloseConfirm(){
      navigator.notification.confirm(
            'Do you really want to exit?',  // message
            close_app,         // callback to invoke with index of button pressed
            "Exit",               // title
            ['Cancel','OK']  // buttonLabels
      );
}

function close_app(buttonIndex){
      if (buttonIndex==2){
            navigator.app.exitApp();
      }
}

iOS
還沒想到要應用在哪裡,未有實際應用範例…
Ps. iOS不允許App關閉任何App(包括App自身)

【APP】PhoneGap Icon

沒有留言:
Icon檔案路徑:
[PhoneGap專案路徑]\www\res\icon\
[PhoneGap專案路徑]\platforms\android\res\


Android
請修改原本的PhoneGap config.xml
尋找(Crtl+F): <icon gap:platform="android"
取代: gap:qualifier => density
修改前:



修改後:




iOS
iOS的設定值不需要特別修改
<platform name="ios">
<allow-intent href="itms:*" />
  <allow-intent href="itms-apps:*" />
  <icon src="www/res/icon/android/icon-36-ldpi.png" density="ldpi" />
  <icon src="www/res/icon/android/icon-48-mdpi.png" density="mdpi" />
  <icon src="www/res/icon/android/icon-72-hdpi.png" density="hdpi" />
  <icon src="www/res/icon/android/icon-96-xhdpi.png" density="xhdpi" />
</platform>

【APP】PhoneGap 開場畫面(Splash Screen)

沒有留言:
安裝PhoneGap plugin:
phonegap plugin add cordova-plugin-splashscreen
開場畫面的圖片檔存放路徑如下:
[PhoneGap專案路徑]\www\res\screen\
[PhoneGap專案路徑]\platforms\android\res\

Android
修改PhoneGap config.xml 找到下列設定值
  • SplashScreen value="screen"
    <preference name="SplashScreen" value="screen" />
    screen: 設定開場畫面的Resource
  • SplashScreenDelay value="2000"
    <preference name="SplashScreenDelay" value="2000" />
     顯示開場畫面的時間
    (單位: 毫秒)

iOS
修改PhoneGap config.xml找到下列設定值
  • ShowSplashScreenSpinner value="true"
    <preference name="ShowSplashScreenSpinner" value="true" />
    True:
    在開場畫面出現時,顯示iOS Loading圖樣
  • AutoHideSplashScreen value="true"
    <preference name="AutoHideSplashScreen" value="true" />
    True:
    自動隱藏開場畫面
iOS預設2秒,iOS開場畫面顯示秒數僅能透過下列方式客製:
config.xmlAutoHideSplashScreen 改為false
index.html頁面中加入下列這段
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
         setTimeout(function(){
    navigater.splashscreen.hide();
window.location='./lmain.html';
}, 3500);

}
</script>

【APP】PhoneGap Plugin Install(add)/ Remove/ List

沒有留言:
開啟cmd
cdPhoneGap專案目錄
安裝: phonegap plugin add [plugin-name]
移除: phonegap plugin rm [plugin-name]
檢視plugin清單: phonegap plugin -l