Android JS 通过X5WebView相互调用详解

腾讯官网:https://x5.tencent.com/tbs/guide/sdkInit.html

 

 

 

一.AndroidStudio接入X5WebView

 

 

1.添加so以及lib文件

 

 

 

2.Gradle配置

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        
        ndk {
            abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
        }
    }


    sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }


}

 

 

3.权限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

 

 

4.自定义X5WebView

public class X5WebView extends WebView {
	TextView title;
	private WebViewClient client = new WebViewClient() {
		/**
		 * 防止加载网页时调起系统浏览器
		 */
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			view.loadUrl(url);
			return true;
		}
	};

	@SuppressLint("SetJavaScriptEnabled")
	public X5WebView(Context arg0, AttributeSet arg1) {
		super(arg0, arg1);
		this.setWebViewClient(client);
		// this.setWebChromeClient(chromeClient);
		// WebStorage webStorage = WebStorage.getInstance();
		initWebViewSettings();
		this.getView().setClickable(true);
	}

	private void initWebViewSettings() {
		WebSettings webSetting = this.getSettings();
		webSetting.setJavaScriptEnabled(true);
		webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
		webSetting.setAllowFileAccess(true);
		webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
		webSetting.setSupportZoom(true);
		webSetting.setBuiltInZoomControls(true);
		webSetting.setUseWideViewPort(true);
		webSetting.setSupportMultipleWindows(true);
		// webSetting.setLoadWithOverviewMode(true);
		webSetting.setAppCacheEnabled(true);
		// webSetting.setDatabaseEnabled(true);
		webSetting.setDomStorageEnabled(true);
		webSetting.setGeolocationEnabled(true);
		webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
		// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
		webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
		// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
		webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);

		// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
		// settings 的设计
	}

	@Override
	protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
		boolean ret = super.drawChild(canvas, child, drawingTime);
		canvas.save();
		Paint paint = new Paint();
		paint.setColor(0x7fff0000);
		paint.setTextSize(24.f);
		paint.setAntiAlias(true);
		if (getX5WebViewExtension() != null) {
			canvas.drawText(this.getContext().getPackageName() + "-pid:"
					+ android.os.Process.myPid(), 10, 50, paint);
			canvas.drawText(
					"X5  Core:" + QbSdk.getTbsVersion(this.getContext()), 10,
					100, paint);
		} else {
			canvas.drawText(this.getContext().getPackageName() + "-pid:"
					+ android.os.Process.myPid(), 10, 50, paint);
			canvas.drawText("Sys Core", 10, 100, paint);
		}
		canvas.drawText(Build.MANUFACTURER, 10, 150, paint);
		canvas.drawText(Build.MODEL, 10, 200, paint);
		canvas.restore();
		return ret;
	}

	public X5WebView(Context arg0) {
		super(arg0);
		setBackgroundColor(85621);
	}

}

 

 

 

5.Application代码

package com.wjn.customwebviewjs;

import android.app.Application;
import android.util.Log;

import com.tencent.smtt.sdk.QbSdk;

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        //搜集本地tbs内核信息并上报服务器,服务器返回结果决定使用哪个内核。
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {

            @Override
            public void onViewInitFinished(boolean arg0) {
                // TODO Auto-generated method stub
                //x5內核初始化完成的回调,为true表示x5内核加载成功,否则表示x5内核加载失败,会自动切换到系统内核。
                Log.d("app", " onViewInitFinished is " + arg0);
            }

            @Override
            public void onCoreInitFinished() {
                // TODO Auto-generated method stub
            }
        };
        //x5内核初始化接口
        QbSdk.initX5Environment(getApplicationContext(),  cb);

    }
}

 

 

6.Activity代码

package com.wjn.customwebviewjs;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ProgressBar;

import com.tencent.smtt.sdk.WebChromeClient;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;

public class X5WebViewActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private X5WebView x5WebView;
    private String url = "https://blog.youkuaiyun.com/weixin_37730482";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_x5webview);
        initHardwareAccelerate();
        initView();
    }

    /**
     * 启用硬件加速
     */

    private void initHardwareAccelerate() {
        try {
            if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
                getWindow()
                        .setFlags(
                                android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
                                android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
            }
        } catch (Exception e) {
        }
    }

    /**
     * 初始化各种View
     * */

    private void initView() {
        progressBar=findViewById(R.id.activity_x5webview_progressbar);
        x5WebView = findViewById(R.id.activity_x5webview_x5webview);
        x5WebView.loadUrl(url);
        x5WebView.setWebViewClient(new myWebViewClient());
        x5WebView.setWebChromeClient(new myWebChromeClient());
    }

    /**
     * WebViewClient监听
     * */

    private class myWebViewClient extends WebViewClient{

        @Override
        public boolean shouldOverrideUrlLoading(WebView webView, String s) {
            webView.loadUrl(s);
            return true;
        }
    }

    /**
     * WebChromeClient监听
     * */

    private class myWebChromeClient extends WebChromeClient{

        @Override
        public void onProgressChanged(WebView webView, int i) {
            super.onProgressChanged(webView, i);
            if (i == 100) {
                progressBar.setVisibility(View.GONE);//加载完网页进度条消失
            } else {
                progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
                progressBar.setProgress(i);//设置进度值
            }
        }
    }

    /**
     * onKeyDown方法
     */

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (x5WebView != null && x5WebView.canGoBack()) {
                x5WebView.goBack();
                return true;
            } else {
                return super.onKeyDown(keyCode, event);
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * onDestroy方法
     * */

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(null!=x5WebView){
            x5WebView.destroy();//释放资源
        }
    }

}

 

 

7.效果

 

 

 

 

 

 

 

 

二.Android与JS通过X5WebView完成交互

 

X5WebView是腾讯封装的WebView,增加了很多的功能。但是Android与JS通过X5WebView交互和原生的WebView是一样的。

 

 

1.Android 调用 JS (loadUrl为例)

JS代码

<script language="JavaScript" type="text/javascript">

    var nowDate = new Date();

    var nH=nowDate.getHours();

    var nM=nowDate.getMinutes();

    var nS=nowDate.getSeconds();

    function MyOnclick() {

        document.write("当前时间:" + nH+ ":" + nM + ":" + nS);

   }

</script>

 

Android代码

package com.wjn.customwebviewjs;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.tencent.smtt.sdk.WebChromeClient;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;

public class X5WebViewActivity extends AppCompatActivity {

    private TextView textView;
    private ProgressBar progressBar;
    private X5WebView x5WebView;
    private String url = "file:///android_asset/abc.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_x5webview);
        initHardwareAccelerate();
        initView();
    }

    /**
     * 启用硬件加速
     */

    private void initHardwareAccelerate() {
        try {
            if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
                getWindow()
                        .setFlags(
                                android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
                                android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
            }
        } catch (Exception e) {
        }
    }

    /**
     * 初始化各种View
     * */

    private void initView() {
        textView=findViewById(R.id.activity_x5webview_textview);
        progressBar=findViewById(R.id.activity_x5webview_progressbar);
        x5WebView = findViewById(R.id.activity_x5webview_x5webview);
        x5WebView.loadUrl(url);
        x5WebView.setWebViewClient(new myWebViewClient());
        x5WebView.setWebChromeClient(new myWebChromeClient());

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                x5WebView.loadUrl("javascript:MyOnclick()");
            }
        });
    }

    /**
     * WebViewClient监听
     * */

    private class myWebViewClient extends WebViewClient{

        @Override
        public boolean shouldOverrideUrlLoading(WebView webView, String s) {
            webView.loadUrl(s);
            return true;
        }
    }

    /**
     * WebChromeClient监听
     * */

    private class myWebChromeClient extends WebChromeClient{

        @Override
        public void onProgressChanged(WebView webView, int i) {
            super.onProgressChanged(webView, i);
            if (i == 100) {
                progressBar.setVisibility(View.GONE);//加载完网页进度条消失
            } else {
                progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
                progressBar.setProgress(i);//设置进度值
            }
        }
    }

    /**
     * onKeyDown方法
     */

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (x5WebView != null && x5WebView.canGoBack()) {
                x5WebView.goBack();
                return true;
            } else {
                return super.onKeyDown(keyCode, event);
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * onDestroy方法
     * */

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(null!=x5WebView){
            x5WebView.destroy();//释放资源
        }
    }

}

 

 

效果

点击前

 

点击后

 

 

 

 

 

2.JS 调用 Android (addJavascriptInterface为例)

 

JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-cn"/>

<title>Android WebView 与 Javascript 交互</title>
<head>
    <style>
  body {background-color:#e6e6e6}
 
  .rect
  {
    color:white;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    width:100px;
    padding:6px;
    background-color:#98bf21;
    text-decoration:none;
    text-align:center;
    border:none;
    cursor:pointer;
  }
 
  .inputStyle {font-size:16px;padding:6px}


    </style>
</head>

<body>
<p>测试Android WebView 与 Javascript 交互</p>
<input id="name_input" class="inputStyle" type="text"/>
<a class="rect" onclick="sendInfoToJava()">JS调用Java</a>

<script>

  function sendInfoToJava(){
    //调用android程序中的方法,并传递参数
    var name = document.getElementById("name_input").value;
    window.AndroidWebView.showInfoFromJs(name);
  }


</script>

</body>
</html>

 

Android代码

package com.wjn.customwebviewjs;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

import com.tencent.smtt.sdk.WebChromeClient;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;

public class X5WebViewActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private X5WebView x5WebView;
    private String url = "file:///android_asset/hhh.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_x5webview);
        initHardwareAccelerate();
        initView();
    }

    /**
     * 启用硬件加速
     */

    private void initHardwareAccelerate() {
        try {
            if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
                getWindow()
                        .setFlags(
                                android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
                                android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
            }
        } catch (Exception e) {
        }
    }

    /**
     * 初始化各种View
     * */

    private void initView() {
        progressBar=findViewById(R.id.activity_x5webview_progressbar);
        x5WebView = findViewById(R.id.activity_x5webview_x5webview);
        x5WebView.loadUrl(url);
        x5WebView.setWebViewClient(new myWebViewClient());
        x5WebView.setWebChromeClient(new myWebChromeClient());
        // 添加js交互接口类,并起别名 AndroidWebView
        x5WebView.addJavascriptInterface(new JavascriptInterface(this), "AndroidWebView");
    }

    /**
     * Native JS 接口
     */

    @SuppressLint("JavascriptInterface")
    public class JavascriptInterface {

        /**
         * 构造方法
         */

        private Context context;
        public JavascriptInterface(Context context) {
            this.context = context;
        }

        /**
         * JS 调用 Android
         */

        @android.webkit.JavascriptInterface
        public void showInfoFromJs(String name) {
            Toast.makeText(context, "JS页面输入内容:" + name, Toast.LENGTH_LONG).show();
        }

    }

    /**
     * WebViewClient监听
     * */

    private class myWebViewClient extends WebViewClient{

        @Override
        public boolean shouldOverrideUrlLoading(WebView webView, String s) {
            webView.loadUrl(s);
            return true;
        }
    }

    /**
     * WebChromeClient监听
     * */

    private class myWebChromeClient extends WebChromeClient{

        @Override
        public void onProgressChanged(WebView webView, int i) {
            super.onProgressChanged(webView, i);
            if (i == 100) {
                progressBar.setVisibility(View.GONE);//加载完网页进度条消失
            } else {
                progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
                progressBar.setProgress(i);//设置进度值
            }
        }
    }

    /**
     * onKeyDown方法
     */

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (x5WebView != null && x5WebView.canGoBack()) {
                x5WebView.goBack();
                return true;
            } else {
                return super.onKeyDown(keyCode, event);
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * onDestroy方法
     * */

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(null!=x5WebView){
            x5WebView.destroy();//释放资源
        }
    }

}

 

 

效果

 

由于X5WebView与原生WebView在Android与JS交互方式上是一样的,所以在这里就简单举例。

Android与JS通过WebView交互详解 请看 Android与JS通过WebView相互调用详解

 

 

 

附:代码下载:https://github.com/wujianning/CustomWebViewJS

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值