zoukankan      html  css  js  c++  java
  • XWalkView+html 开发Android应用

    在Android开发中有时候为了开发简洁和方便移植,采用了Html+WebView的开发模式,然而Android自带的WebView控件是调用的本机的浏览器内核,有些版本较老的手机浏览器和手机性能都不能满足需求(表现在html5不兼容、体验不流畅等地方)。

    XWalkView是一个基于Chrome内核的移动端浏览器控件,官方介绍是为了保证在所有机器上Html体验一致(官方网站:https://crosswalk-project.org/)。

    下面说说集成的方法,开发过程中遇到过很多坑,记录下来希望对同样使用这款控件的人有用,也给自己留个笔记。

    首先,去下载需要的控件版本,地址:https://crosswalk-project.org/documentation/downloads.html,有很多选项可以选,这里我使用Android webview(x86) 32位的(模拟器使用,实体机请下载ARM,如图1)。

    图1

    下载下来后是一个Android工程,打开eclipse,导入这个工程(见图2)。

    图2

    自己新建一个Android项目,加入以下几个权限。

    /*网络访问权限*/
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
        
    /*磁盘访问权限*/
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    再将activity_main.xml中的控件先移除,加入XWalkView控件布局。

    <org.xwalk.core.XWalkView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/xwalk"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
    </org.xwalk.core.XWalkView>
    

    对应的MainActivity.java的OnCreate方法中加入初始化代码。

    //设置允许访问浏览器页面的js方法
    XWalkPreferences.setValue("enable-javascript", true);
    XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
    
    //获取XWalkView 控件,并让它访问百度
    XWalkView xWalkView = (XWalkView) findViewById(R.id.activity_main);				
    xWalkView.load("http://www.baidu.com", null);
    

    此时系统是找不到XWalkView 引用的,需要将下载的crosswalk-webview工程作为library引用(见图3)。

    图3

    到此,运行工程,一般来说应该能看到主页加载了百度首页,这里只是一个测试,表明我们已经集成了XWalkView控件。

     

    下面写下如何实现自定义的Html JS和Java后台互操作。这个和WebView提供的Java和JS互操作写法基本一致,不同点在于引用部分。

    第一部分,JS调用Java

    创建一个类JSServer,代码如下。

    package com.example.Service;
    
    import org.xwalk.core.JavascriptInterface;
    import org.xwalk.core.XWalkView;
    
    import com.example.webview.R;
    
    import android.app.Activity;
    import android.content.Context;
    
    public class JSService {
    	Context context;
    
    	public JSService(Context c) {
    		context = c;
    	}
    	
    	/**
    	 * 跳转到指定的url
    	 * @param url
    	 */
    	@org.xwalk.core.JavascriptInterface
    	public void GoToUrl(String url) {
    		Activity activity = (Activity) context;
    		final XWalkView walkView = (XWalkView)activity.findViewById(R.id.activity_main);
    		final String httpUrl=url;
    		
    		walkView.post(new Runnable() {
    			@Override
    			public void run() {
    				walkView.load(httpUrl, null);
    			}
    		});		
    	}
    }
    

    需要注意的就是引用的是上述两处标黄的地方。然后在MainActivity.java的OnCreate方法中加上初始化方法。

    xWalkView.addJavascriptInterface(new JSService(MainActivity.this),
    				"AndroidJS");
    

    "AndroidJS"就表示Html中js调用时候的方法名,js可以这么写。

    <script>
    	function goto(url){
    		AndroidJS.GoToUrl(url);
    	}
    </script>
    

    第二部分,Java调用Html中JS方法

    假设js中有这么一个方法。

    <script>
    	function showMsg(name,msg){
    		alert(name+"说:"+msg);
    	}
    </script>
    

    Java需要调用这个方法,直接这么写。

    xWalkView.load("javascript:compare('张三','能看到xWalkView弹出的消息吗?')",null);
    

    至此,xWalkView的基本使用方法记录完毕,希望对看到这篇博客的人有所帮助。这应该是在现在公司写下的最后一篇博客了,明天即将离职,愿自己能在新的公司过的更开心一些。

    更多个人工作中的项目请访问我的个人网站:www.88gis.cn

  • 相关阅读:
    Java内置包装类
    for循环思路题
    常用函数
    函数
    冒泡排序
    数组的运用
    for循环中有意思的练习题。
    for循环
    运算中容易出现的错误
    分支的运用
  • 原文地址:https://www.cnblogs.com/tracyjfly/p/5640752.html
Copyright © 2011-2022 走看看