Phonegap代码作为网络应用程序 [英] Phonegap code as a web app

问题描述

我想要重新使用我的phonegap html，css和js代码作为一个网络应用程序。
我将通过和删除任何移动功能。

I am thinking of re-using my phonegap html, css and js code as a web app. I would be going through and removing any mobile only functionalities.

目的是让一个网络应用程序提供一些移动应用程序的功能，我使用目前移动设备功能非常少。但我猜想每次发布我的移动应用程序代码都会很麻烦。

The purpose is to have a web app which offers some of the mobile apps functionality, I use very little mobile device features currently. But I am guessing maintaining with each release of my mobile app code will be troublesome.

任何人都试过这个？任何提示？

Any of you guys tried this before ? Any tips ?

推荐答案

使用响应式设计，您的phonegap代码几乎可以在任何设备上运行。重要的是要知道它在运行（设备和操作系统），所以你可以相应地做出反应。我构建了一个 window.deviceInfo 对象，具有以下信息：

With a responsive design your phonegap code should run on almost any device. It's important to know what it is running on (both device and OS) so you can respond accordingly. I build a window.deviceInfo object up front with the following information:

• code> window.deviceInfo.type ：掌上电脑，平板电脑， desktop ： / code>， android ， microsoft ， webos ， blackberry


• window.deviceInfo.mode ： browser ， standalone ， webview


• window.deviceInfo.mobile ： true ， false / li>
  
• window.deviceInfo.phonegap ： true ， false

• window.deviceInfo.type: handheld, tablet, desktop
• window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
• window.deviceInfo.mode: browser, standalone, webview
• window.deviceInfo.mobile: true, false 
• window.deviceInfo.phonegap: true, false

我使用单个容器< div> 调用 viewport 创建我的响应式容器，并根据它所在的设备调整大小。

I use a single container <div> called viewport to create my responsive container and size it based on the device it's on.

演示：

是初始化代码以设置所有内容：

This is the initialization code to set everything up:

initializeEnvironment();
initializeDimensions();
initializePhoneGap( function () {
   //start app  
} );

首先我设置 window.deviceInfo 。

function initializeEnvironment() {
    //window.deviceInfo.type: handheld, tablet, desktop
    //window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
    //window.deviceInfo.mode: browser, standalone, webview
    //window.deviceInfo.mobile: true, false 
    //window.deviceInfo.phonegap: true, false 

    var userAgent = window.navigator.userAgent.toLowerCase();
    window.deviceInfo = {};

    if ( /ipad/.test( userAgent ) || ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) ) {
        window.deviceInfo.type = 'tablet';
    } else if ( /iphone|ipod|webos|blackberry|android/.test( userAgent ) ) {
        window.deviceInfo.type = 'handheld';
    } else {
        window.deviceInfo.type = 'desktop';
    };

    if ( /iphone|ipod|ipad/.test( userAgent ) ) {
        var safari = /safari/.test( userAgent );
        window.deviceInfo.brand = 'ios';
        if ( window.navigator.standalone ) {
            window.deviceInfo.mode = 'standalone';
        } else if ( safari ) {
            window.deviceInfo.mode = 'browser';
        } else if ( !safari ) {
            window.deviceInfo.mode = 'webview';
        };
    } else if ( /android/.test( userAgent ) ) {
        window.deviceInfo.brand = 'android';
        window.deviceInfo.mode = 'browser';
    } else if ( /webos/.test( userAgent ) ) {
        window.deviceInfo.brand = 'webos';
        window.deviceInfo.mode = 'browser';
    } else if ( /blackberry/.test( userAgent ) ) {
        window.deviceInfo.brand = 'blackberry';
        window.deviceInfo.mode = 'browser';
    } else {
        window.deviceInfo.brand = 'unknown';
        window.deviceInfo.mode = 'browser';
    };
    window.deviceInfo.mobile = ( window.deviceInfo.type == 'handheld' || window.deviceInfo.type == 'tablet' );
};

然后我调整视口需要它。移动设备使用 window.innerWidth 和 window.innerHeight 来占满整个屏幕。

Then I resize the viewport and anything else that needs it. Mobile devices use window.innerWidth and window.innerHeight to take up the full screen.

function initializeDimensions() {
    var viewport = document.getElementById( 'viewport' );
    if ( window.deviceInfo.mobile ) {
        viewport.style.width = window.innerWidth + 'px';
        viewport.style.height = window.innerHeight + 'px';
    } else {
        //requirements for your desktop layout may be different than full screen
        viewport.style.width = '300px';
        viewport.style.height = '300px';
    };
    //set individual ui element sizes here
};

最后，我使用 window.device 注意这不同于我创建的 deviceInfo 对象）来验证phonegap是否可用并准备好。当我的代码在应该应该运行phonegap的设备上运行时，我不是依靠有限的 deviceready 事件来轮询该对象。当调用 initializePhoneGap（）回调时，应用程序已准备就绪。

Finally, I use window.device (note this is not the same as the deviceInfo object I create) to verify if phonegap is available and ready. Instead of relying on the finicky deviceready event, I poll that object when my code is running on a device that should be running phonegap. When the initializePhoneGap() callback is called, the app is ready to start.

phonegap功能在 if（window.deviceInfo.phonegap）{} 。

Throughout the app, I wrap phonegap features in if( window.deviceInfo.phonegap ) {}.

function initializePhoneGap( complete ) {
    if ( window.deviceInfo.brand == 'ios' && window.deviceInfo.mode != 'webview' ) {
        window.deviceInfo.phonegap = false;
        complete();
    } else if ( window.deviceInfo.mobile ) {
        var timer = window.setInterval( function () {
            if ( window.device ) {
                window.deviceInfo.phonegap = true;
                complete();
            };
        }, 100 );
        window.setTimeout( function () { //failsafe
            if ( !window.device ) { //in webview, not in phonegap or phonegap failed
                window.clearInterval( timer );
                window.deviceInfo.phonegap = false;
                complete();
            };
        }, 5000 ); //fail after 5 seconds
    } else {
        window.deviceInfo.phonegap = false;
        complete();
    };
};

这篇关于Phonegap代码作为网络应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！