最近学习phonegap收集的几个小技巧

最新推荐文章于 2019-11-01 11:18:30 发布

qjbagu

最新推荐文章于 2019-11-01 11:18:30 发布

阅读量1.1k

点赞数

分类专栏： JavaScript android

android 同时被 2 个专栏收录

476 篇文章

订阅专栏

JavaScript

40 篇文章

订阅专栏

本文介绍了使用PhoneGap进行混合应用开发的一些实用技巧，包括解决加载外部资源报错的问题、添加启动画面及全屏显示的方法、检测用户是否通过主屏启动应用、阻止HTML5表单验证、获取设备分辨率及检测网络状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里使用的是phonegap1.6.0

1.解决phonegap加载外部资源报错问题
当你使用Eclipse做Phonegap混合开发时，在html页面加载外部资源时会有报错消息，
解决方案非常简单，你需要为phonegap添加一个外部url白名单即可，
你可以在/res/xml/cordova.xml文件中添加，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<cordova>
    <access origin=" http://127.0.0.1 *"/>
    <access origin=" http:// *.niutian365.com"/>
    <log level="DEBUG"/>
</cordova>

2.添加启动画面及全屏显示
package come.phonegap.niutian365app;

import android.os.Bundle;
import org.apache.cordova.*;
import android.view.Window;
import android.view.WindowManager;

public class webapp extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setFullScreen();//全屏显示这行需要加在super.loadUrl之前
        super.setIntegerProperty("splashscreen", R.drawable.bg);//显示启动画面图片为res/drawable/bg.png这里省略图片后缀
      super.loadUrl("file:///android_asset/www/index.html",2000);//延时加载主页面以防止资源加载不成功
    }

    public void setFullScreen() {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);//清除FLAG
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
   }
}

3.如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，
按下iphone\ipod\ipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，
在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。
从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，
还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,
从主屏启动webapp时，navigator.standalone为true，我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事！

4.如何阻止客户端（浏览器）对HTML5表单的校验？
有时候开发者可能又想使用HTML5的新表单特性，但是呢又暂不想使用HTML5的表单自动校验功能(毕竟暂时还不太成熟)，怎么办呢？我们不妨在该表单上添加novalidate属性
<form action="#" method="post" novalidate>

可阅读 http://www.w3.org/TR/html5/forms.html #attr-fs-novalidate
5.如何获取移动设备的分辩率
有时候我们可能需要根据不同的设备分辩率做不同的业务处理，我们可以通过 devicePixelRatio
var ratio = window.devicePixelRatio,width = window.screen.width * ratio;

6.检测网络时返回null
首先需要res/xml/plugins.xml修改name="Network Status" 中间的空格去掉
<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>

复制内容到剪贴板

程序代码

< !DOCTYPE HTML >
< html >
<head >
<meta content = "text/html;charset=utf-8" http -equiv = "Content-Type" / >
<meta name = "viewport" content = "height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" / >
<meta name = "apple-mobile-web-app-capable" content = "yes" / >
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" / >
<title >测试demo < /title >
<script type = "text/javascript" charset = "utf-8" src = "cordova-1.6.0.js" > < /script >
<script type = "text/javascript" charset = "utf-8" >

    document .addEventListener ( "deviceready" , onDeviceReady , false ) ;

     function onDeviceReady ( ) {
        checkConnection ( ) ;
        document .addEventListener ( "backbutton" , eventBackButton , false ) ; //返回键
        window.addEventListener("orientationchange", orientationChange, true);
    }
    function orientationChange(e) {
      var orientation = "portrait";
      if (window.orientation == -90 || window.orientation == 90) orientation = "landscape";
      alert(orientation);
  }
    function checkConnection() {
      var networkState = navigator.network.connection.type;
        if( networkState == Connection.NONE ) {
            navigator.notification.confirm('请确认网络连接已经开启', showAlert , '提示', '确定');
        }
  }
  function showAlert(button) {
          if( button==1 ) {
              navigator.app.exitApp();
          }
          return false;
  }
    function eventBackButton(){
        navigator.notification.confirm('确认退出？', showConfirm, '退出软件', '确定,取消');
    }
    function showConfirm(button) {
        if( button==1 ) {
            document.removeEventListener("backbutton", eventBackButton, false); //注销返回键
            navigator.app.exitApp();
        }
    }
</script>
</head>
<body>
    <div id='container'>

    </div>
</body>
</html>