Question

为我们的移动网络应用和phonegap应用使用相同的代码库是否明智？它们的意思相似，手机版本只是让我们做得更多。我们可以检测它是否没有在phonegap上运行并隔离对phonegap api的调用，或者将它们分开更有意义。

Answer 1

当然，您可以使用大部分相同的代码库。一些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处理程序和上面的 else 块调用此函数。

如果您正在调用的phonegap api与html5没有完全相同的名称（例如，因为它具有Moz *或WebKit *前缀），只需将两者都包装在一个新名称中。例如：

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

如果您使用的phonegap API确实没有等效的html5，请尝试在javascript中自行复制功能，否则您将丢失浏览器中的功能。但是如果没有这个功能，请确保它足够优雅地降级。

注意：要在浏览器中测试移动设备功能，如加速度计，地理位置等，请检查Ripple Chrome extension。

Answer 2

我想出了一种保持网络代码库完好无损的方法......

使用内置的deviceready事件的当前问题是，当页面加载时，您无法告诉应用程序：“嘿，这不是在移动设备上运行，没有必要等待设备准备开始“。

在代码的原生部分，例如iOS，在MainViewController.m中有一个方法viewDidLoad，我发送一个javascript变量，我稍后在Web代码中检查，如果该变量在，我将等待为我的页面启动代码，直到所有内容都准备好（例如，导航器地理位置）

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

index.html代码如下：

function onBodyLoad()
{
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){;
    myApp.run();
}

try{
    if(isAppNative!=undefined);
}catch(err){
    $(document).ready(function(){
        myApp.run();
    });
}

Answer 3

我会使用相同的代码库。 PhoneGap的重点是将您的移动网站转换为应用程序。在适当的情况下检测功能和屏幕处理并不困难。单独的代码库的问题通常是双重处理内容和样式的成本。如果有必要，你可以将它们分成一个共享资源，并在运行时/访问时捆绑它们，但我个人仍然会将它们保存在一起。

此博客介绍了检测问题（请参阅评论）：http://bennolan.com/2011/08/22/phonegap-detection.html。它的关键是if (window.PhoneGap){...}

为phonegap和web使用相同的代码库？

3 个答案: