爲phonegap和web使用相同的代碼庫？

Question

爲我們的移動網絡應用程序和phonegap應用程序使用相同的代碼庫是否明智？他們的意圖是相似的，phonegap版本只是讓我們做更多。我們可以檢測它是否沒有在phonegap上運行，並隔離phonegap API的調用，還是更有意義將它們分開。

Answer 1

我會使用相同的代碼庫。 PhoneGap的重點是將您的移動網站轉換爲應用程序。檢測功能並酌情篩選房地產並不難。單獨代碼庫的問題通常是雙重處理內容和樣式的代價。如果有必要，你可以將它們分成共享資源並將它們捆綁在運行時/訪問中，但是我個人仍然將它們放在一起。

本博客涵蓋了檢測問題（請參閱評論）：http://bennolan.com/2011/08/22/phonegap-detection.html。它的癥結雖然是if (window.PhoneGap){...}

Answer 2

當然，你可以使用大部分相同的代碼庫。 一些phonegap API在html5中是相同的（例如localStorage），所以代碼沒有區別。

如果您使用phonegap Build服務，它會將phonegap.js/cordova.js腳本文件添加到您的項目根目錄。只需將它包含在您的html中。然後你就可以檢測到你的應用程序是否PhoneGap的內運行：

var isPhonegap = function() { 
    return (typeof(cordova) !== 'undefined' || typeof(phonegap) !== 'undefined'); 
} 

if (isPhonegap()) { 
    // phonegap.js/cordova.js exists.. now let's handle the onDeviceReady event 
} else { 
    // in-browser 
} 

如果你需要一些常見的啓動代碼，把它放在一個函數，調用這個函數從onDeviceReady處理程序及以上其他塊。

如果您打電話的phonegap api與html5的名稱並不完全相同（因爲它有例如Moz *或WebKit *前綴），只需將它們換成新名稱即可。例如：

var requestFileSystem = (isPhonegap() ? requestFileSystem : window.WebKitRequestFileSystem); 

如果您正在使用PhoneGap的API確實沒有HTML5版本，試圖複製自己的功能在JavaScript如果可能的話，否則你會失去公正的功能在瀏覽器中。但要確保它沒有這個功能足夠優雅的降級。

注意：要測試移動設備的功能，如加速計，地理位置等。在您的瀏覽器中檢出Ripple Chrome extension。

Answer 3

我想出了一個辦法讓網頁代碼庫完整...

與使用內置的deviceready事件目前的問題是，在加載頁面的時候，你有沒有告訴應用程序的方式： 「嘿，這不是在移動設備上運行，沒有必要等待設備準備啓動」。

1. 在代碼的本機部分，例如爲iOS，在MainViewController.m有一個方法viewDidLoad中，我送一個JavaScript變量，我在後面的網頁代碼檢查，如果該變量是圍繞，我會迫不及待地開始了代碼爲我的網頁，直到一切準備就緒（例如，導航地理定位）

   在MainViewController.m：

   - (void) viewDidLoad 
   { 
       [super viewDidLoad]; 
       NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"]; 
       [self.webView stringByEvaluatingJavaScriptFromString:jsString]; 
   } 
   

2. 指數。HTML中的代碼是這樣的：

   function onBodyLoad() 
   { 
       document.addEventListener("deviceready", onDeviceReady, false); 
   } 
   
   function onDeviceReady(){; 
       myApp.run(); 
   } 
   
   try{ 
       if(isAppNative!=undefined); 
   }catch(err){ 
       $(document).ready(function(){ 
        myApp.run(); 
       }); 
   }