这里使用的是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"/>
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>
< 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>