中国领先的IT技术网站
|
|

Hybrid App 开发初探:使用 WebView 装载页面

Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有 Web 技术跨平台特性。目前大家所知道的基于中间件的移动开发框架都是采用的 Hybrid 开发模式,例如国外的 PhoneGap、Titanium、Sencha,还有国内的 AppCan、Rexsee 等等。Hybrid App 开发模式正在被越来越多的公司和开发者所认同,相信将来会成为主流的移动应用开发模式。

作者:梦想天空(山边小溪)来源:cnblogs|2014-12-17 11:09

【沙龙】51CTO诚邀您9月23号和多位技术大咖一起聊智能CDN的优化之路,抓紧时间哦!


Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有 Web 技术跨平台特性。目前大家所知道的基于中间件的移动开发框架都是采用的 Hybrid 开发模式,例如国外的 PhoneGap、Titanium、Sencha,还有国内的 AppCan、Rexsee 等等。Hybrid App 开发模式正在被越来越多的公司和开发者所认同,相信将来会成为主流的移动应用开发模式。

Hybrid App 融合 Web App 的原理就是嵌入一个WebView组件,可以在这个组件中载入页面,相当于内嵌的浏览器,代码如下:

  1. import android.app.Activity; 
  2. import android.os.Bundle; 
  3. import android.webkit.WebSettings; 
  4. import android.webkit.WebView; 
  5.   
  6. public class AActivity extends Activity{ 
  7.       
  8.     @Override 
  9.     public void onCreate(Bundle savedInstanceState) { 
  10.         super.onCreate(savedInstanceState); 
  11.         // 创建WebView 
  12.         WebView webView= new WebView(this); 
  13.         // 切换到内容视图 
  14.         setContentView(webView); 
  15.         // 获取WebView配置 
  16.         WebSettings ws = webView.getSettings(); 
  17.         // 启用JavaScript 
  18.         ws.setJavaScriptEnabled(true); 
  19.         // 载入assets目录下的一个页面 
  20.         webView.loadUrl("file:///android_asset/www/BoBox/index.html"); 
  21.     } 

还有另一种引入方式是在布局文件中添加 WebView 组件,代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent">  
  6.        
  7.     <WebView   
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:id="@+id/webview"  
  11.         />  
  12.            
  13. </LinearLayout> 
  1. import android.app.Activity; 
  2. import android.os.Bundle; 
  3. import android.webkit.WebSettings; 
  4. import android.webkit.WebView; 
  5.   
  6. public class BActivity extends Activity{ 
  7.   
  8.     @Override 
  9.     public void onCreate(Bundle savedInstanceState) { 
  10.         super.onCreate(savedInstanceState); 
  11.         setContentView(R.layout.webview); 
  12.         // 查找WebView 
  13.         WebView webView = (WebView) findViewById(R.id.webview); 
  14.         // 获取WebView配置 
  15.         WebSettings ws = webView.getSettings(); 
  16.         // 启用JavaScript 
  17.         ws.setJavaScriptEnabled(true); 
  18.         // 在载入assets目录下的一个页面 
  19.         webView.loadUrl("file:///android_asset/www/index.html"); 
  20.     } 

WebView 还有一个非常重要的方法——addJavascriptInterface,可以用来实现 Java 程序和 JavaScript 程序的相互调用,代码如下:

  1. webView.addJavascriptInterface(new Object(){ 
  2.     public void clickOnAndroid(){ 
  3.         mHandler.post(new Runnable(){ 
  4.             public void run(){ 
  5.                 webView.loadUrl("javascript:wave()"); 
  6.             } 
  7.         }); 
  8.     } 
  9. }, "demo"); 

页面代码如下:

  1. <script> 
  2.     function wave() { 
  3.         document.getElementById("id").innerHTML = "Hello World!"
  4.     } 
  5. </script> 
  6. </head> 
  7. <body> 
  8.     <div> 
  9.         <a href="#" id="demo" onclick="window.demo.clickOnAndroid()">Click Me</a> 
  10.     </div> 
  11. </body> 
  12. </html> 

这样,当你点击页面上 Click Me 按钮的时候就会调用 Java 代码中的 clickOnAndroid 函数,clickOnAndroid 函数中又调用页面中的 wave 方法。需要注意的是:这个接口在 Android 2.3 版本的模拟器中运行会导致 WebView 崩溃,目前还没有修复。这是一个非常简单的演示 Java 和 JavaScript 相互调用的例子,在实际应用中可以在页面调用的 clickOnAndroid 函数中再调用摄像头、通讯录、通知提醒等设备功能。

【编辑推荐】

  1. Android WebView Memory Leak WebView内存泄漏
  2. Android Webview Java和Javascript安全交互
  3. 在WebView中如何让JS与Java安全地互相调用
  4. 移动混合应用Hybrid App开发实战
  5. Hybrid App开发 四大主流平台分析
【责任编辑:闫佳明 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Java for Flash动态网站开发手札

本书深入浅出地说明了如何利用Java、Flash及XML进行Flash富媒体应用程序的开发。 本书知识丰富,内容结构合理,包括:Flash影片应用程序与...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× 学习达标赢Beats耳机