phonegap开发简述
使用phonegap包开发的目的就是为了缩短开发周期,利用熟悉的HTML、javascript、CSS技术快速的打造自己的客户端APP。其中存在的关键问题是:这些HTML、CSS、js的文件是放在服务器端还是放在移动端。如果是放在移动端,这无疑的没有发挥出javascript的优势,在“数据走向云端”的大趋势下这种方式终将无立足之地。所以我们还是选择将大量的网页数据放在服务器端。
这么做就又有一个问题了。如果我们把这个APP做成是打开运行之后就直接访问外部网站,那么这个APP就等同于一个网页链接的桌面版。而且这样也不方便或是说不可以通过服务器远程调用android手机的硬件设备,因为它的HTML里面没有cordova.js包。如果在服务器端的HTML里面就导入cordova.js,这种方式不知道行不行得通。
直接访问外部网站
如果是想要打开APP之后就直接访问外部网站,可进行如下操作
打开MainActivity.java文件
将里面onCreate方法中的程序替换成如下代码
super.onCreate(savedInstanceState);
//实例化WebView对象
WebView webview = new WebView( this);
//设置WebView属性,能够执行Javascript脚本
webview.getSettings().setJavaScriptEnabled( true);
webview.getSettings().setSupportZoom(true); // 支持缩放
webview.getSettings().setLoadWithOverviewMode( true);
webview.getSettings().setUseWideViewPort(true);
//设置打开的页面地址。设置成自己需要访问网站的IP
webview.loadUrl( "http://blog.csdn.net/adrian_rendong/article/details/49950553" );
}
catch (Exception ex)
{
ex.printStackTrace();
}
WebView webview = new WebView( this);
//设置WebView属性,能够执行Javascript脚本
webview.getSettings().setJavaScriptEnabled( true);
webview.getSettings().setSupportZoom(true); // 支持缩放
webview.getSettings().setLoadWithOverviewMode( true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setBuiltInZoomControls(true);//支持手势缩放
try {//设置打开的页面地址。设置成自己需要访问网站的IP
webview.loadUrl( "http://blog.csdn.net/adrian_rendong/article/details/49950553" );
}
catch (Exception ex)
{
ex.printStackTrace();
}
setContentView(webview);
然后添加网络访问权限
在AndroidManifest.xml文件中添加
<uses-permission android:name="android.permission.INTERNET"/>
在本地HTML中访问外部网站
打开MainActivity.java文件
将里面onCreate方法中的程序替换成如下代码
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html" );
然后添加网络访问权限
在AndroidManifest.xml文件中添加
<uses-permission android:name="android.permission.INTERNET"/>
编写HTML
打开index.js替换成如下代码
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready",onDeviceReady,false);
alert("进入run2D");
</script>
</head>
</head>
<body margin=0;>
<iframe src="http://192.168.0.100:9010/IDE/application/run2D.html#" style="position:fixed;
top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none;
margin:0; padding:0; overflow:hidden; z-index:999999;">
</iframe>
</body>
</html>
iframe的全屏显示
范例
<body margin=0;>
<iframe src="http://192.168.0.100:9010/IDE/application/run2D.html#" style="position:fixed;
top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none;
margin:0; padding:0; overflow:hidden; z-index:999999;">
</iframe>
</body>