最近学习phonegap收集的几个小技巧
2013-07-11 10:40
375 查看
这里使用的是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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 收集的几个Python小技巧分享
- 【deep learning学习笔记】最近读的几个ppt（一）
- 学习PHP收集的几个有用函数
- 关于npm不得不学习的几个小技巧
- 最近在学习有关ASP.NET一般处理程序的知识。收藏的几个有用的博文
- 学习自动收集表统计信息比较重要的几个数字字典
- 移动开发的几个小技巧学习
- 【deep learning学习笔记】最近读的几个ppt（未完...）
- 【deep learning学习笔记】最近读的几个ppt（四）
- C#学习过程中的9个小技巧你知道几个 .
- php学习收集--几个实用的PHP内置函数使用指南
- 最近学习ASP2.0相关的几个小问题（非创新性文章）
- 收集的几个Python小技巧分享
- 【deep learning学习笔记】最近读的几个ppt（四）
- 最近在学习用到的几个网站
- cocos2d-x-3.0rc1 学习笔记5 （几个最近用的多的动作） lua 写的
- 最近学习AJAX和版本控制，收集到的网站
- 【deep learning学习笔记】最近读的几个ppt（三）
- 【deep learning学习笔记】最近读的几个ppt（二）
- 收集最近用到的几个oracle函数