Cordova   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了cordova – 作为网络应用程序的Phonegap代码大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

我正在虑重新使用我的phonegap html,css和js代码作为网络应用程序. 我将通过并删除任何移动功能. 目的是拥有一个提供某些移动应用程序功能的Web应用程序,我目前使用的移动设备功能非常少.但我猜测维护每次发布我的移动应用程序代码都会很麻烦. 你们中的任何人以前都试过这个吗?有小费吗 ? 通过响应式设计,您的phonegap代码几乎可以在任何设备上运行.了解它的运行情况(设备和操作系
@H_801_14@
@H_801_14@
我正在虑重新使用我的phonegap html,css和js代码作为网络应用程序.
我将通过并删除任何移动功能.

目的是拥有一个提供某些移动应用程序功能的Web应用程序,我目前使用的移动设备功能非常少.但我猜测维护每次发布我的移动应用程序代码都会很麻烦.@H_607_22@

你们中的任何人以前都试过这个吗?有小费吗 ?@H_607_22@

解决方法

通过响应式设计,您的phonegap代码几乎可以在任何设备上运行.了解它的运行情况(设备和操作系统)非常重要,这样您才能做出相应的响应.我预先构建一个window.deviceInfo对象,@R_607_10498@以下信息:

> window.deviceInfo.type:掌上电脑,平板电脑,桌面
> window.deviceInfo.brand:ios,android,microsoft,webos,blackBerry
> window.deviceInfo.mode:浏览器,独立,webview
> window.deviceInfo.mobile:true,false
> window.deviceInfo.phonegap:true,false@H_607_22@

我使用一个容器< div>调用视口来创建我的响应式容器,并根据它所在的设备调整大小.@H_607_22@

演示:

cordova – 作为网络应用程序的Phonegap代码

@H_607_22@

这是设置所有内容的初始化代码:@H_607_22@

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

首先我设置window.deviceInfo.@H_607_22@

function initializeEnvironment() {
    //window.deviceInfo.type: handHeld,tablet,desktop
    //window.deviceInfo.brand: ios,android,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来占据整个屏幕.@H_607_22@

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()回调时,应用程序已准备好启动.@H_607_22@

在整个应用程序中,我将phonegap功能包装在if(window.deviceInfo.phonegap){}中.@H_607_22@

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();
    };
};
@H_801_14@

大佬总结

以上是大佬教程为你收集整理的cordova – 作为网络应用程序的Phonegap代码全部内容,希望文章能够帮你解决cordova – 作为网络应用程序的Phonegap代码所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:cordovaphonegap代码作为程序网络应用
猜你在找的Cordova相关文章
其他相关热搜词更多
phpJavaPython程序员load如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap