腾讯X5WebView+JsBridge交互 作者：pandali 时间：2021年09月15日 分类：计算机技术,Android 字数：7060 warning: 这篇文章距离上次修改已过252天，其中的内容可能已经有所变动。 ### 材料： JsBridge地址：https://github.com/lzyzsd/JsBridge 腾讯X5WebView地址：http://x5.tencent.com/tbs/guide/sdkInit.html ### 步骤： ##### 1、下载JsBridgedemo 拷贝 library/src/main/java/com/github/lzyzsd/jsbridge 下源码到自己的项目中 拷贝 library/src/main/assets/ 目录下WebViewJavascriptBridge.js 到项目资源(assets)目录 <font color='red'>注意：需要将JSBridgedemo 中的webview,webviewClient对象全部用x5内核替换</font> ##### 2、下载x5内核Android SDK（完整版） [下载x5内核Android SDK](https://blog.xskymm.com/archives/16/ "下载x5内核Android SDK") ### webView 常用的配置项 ``` WebSettings settings = mWebView.getSettings(); settings.setUseWideViewPort(true); // 允许js弹出窗口 settings.setJavaScriptCanOpenWindowsAutomatically(true); //设置编码 settings.setDefaultTextEncodingName("UTF-8"); //设置支持DomStorage settings.setDomStorageEnabled(true); // 实现8倍缓存 settings.setAppCacheMaxSize(Long.MAX_VALUE); settings.setAllowFileAccess(true); // 开启Application Cache功能 settings.setAppCacheEnabled(true); //取得缓存路径 String appCachePath = context.getCacheDir().getAbsolutePath(); // String chejusPath = getFilesDir().getAbsolutePath()+ APP_CACHE_DIRNAME; //设置路径 //API 19 deprecated settings.setDatabasePath(appCachePath); // 设置Application caches缓存目录 settings.setAppCachePath(appCachePath); //是否启用数据库 settings.setDatabaseEnabled(true); //设置存储模式 建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT,无网络时，使用LOAD_CACHE_ELSE_NETWORK settings.setCacheMode(WebSettings.LOAD_DEFAULT); //设置不支持字体缩放 settings.setSupportZoom(false); //设置对应的cookie具体设置有子类重写该方法来实现 //还有一种是加载https的URL时在5.0以上加载不了，5.0以下可以加载，这种情况可能是网页中存在非https得资源，在5.0以上是默认关闭，需要设置， // loadWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { settings.setAllowUniversalAccessFromFileURLs(true); } ``` ### 代码 ##### mainActivity ``` package com.xskymm.xskymmvideo; import androidx.appcompat.app.ActionBar; import androidx.appcompat.app.AppCompatActivity; import android.content.pm.ActivityInfo; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; import com.tencent.smtt.sdk.WebChromeClient; import com.xskymm.xskymmvideo.utils.BridgeHandler; import com.xskymm.xskymmvideo.utils.BridgeWebView; import com.xskymm.xskymmvideo.utils.CallBackFunction; import com.xskymm.xskymmvideo.utils.DefaultHandler; public class MainActivity extends AppCompatActivity { private EditText et; private Button bt; private BridgeWebView webview; @Override protected void onCreate(Bundle savedInstanceState) { this.setTheme(R.style.Theme_AppCompat_NoActionBar); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar=getSupportActionBar(); if(actionBar !=null) { actionBar.hide(); } this.init(); } private void init() { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); et = (EditText) findViewById(R.id.et); bt = (Button) findViewById(R.id.bt); webview = (BridgeWebView) findViewById(R.id.webview); webview.setDefaultHandler(new DefaultHandler()); webview.setWebChromeClient(new WebChromeClient()); webview.loadUrl("file:///android_asset/test.html"); // 注册监听方法当js中调用callHandler方法时会调用此方法（handlerName必须和js中相同） webview.registerHandler("submitFromWeb", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { Log.e("TAG", "js返回：" + data); //显示js传递给Android的消息 Toast.makeText(MainActivity.this, "js返回:" + data, Toast.LENGTH_LONG).show(); //Android返回给JS的消息 function.onCallBack("我是js调用Android返回数据：" + et.getText().toString()); } }); bt.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // 调用js中的方法（必须和js中的handlerName想同） webview.callHandler("functionInJs", "Android调用js66", new CallBackFunction() { @Override public void onCallBack(String data) { Log.e("TAG", "onCallBack:" + data); Toast.makeText(MainActivity.this, data, Toast.LENGTH_LONG).show(); } }); } }); } } ``` ##### test.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Test</title> </head> <body> <div class="input-field col s6"> <input placeholder="请输入数据" id="text1" type="text" class="validate"> </div> <a class="waves-effect waves-light btn" onclick="testClick();">button</a> </body> <script> //js调用Android方法：接收Android传递过来的数据，并做处理 function testClick() { //参数一：调用java中的方法 submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致 //参数二：返回给Android端的数据，可以为字符串，json等信息 //参数三：js接收到Android传递过来的数据之后的相应处理逻辑 window.WebViewJavascriptBridge.callHandler( 'submitFromWeb' , {'param': "JS成功接收到数据---"} , function(responseData) { alert(responseData) } ); } //JS注册事件监听 function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } //注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge(function(bridge) { //初始化 bridge.init(function(message, responseCallback) { var data = { 'Javascript Responds': 'Wee!' }; alert("jasdashjd"); responseCallback(data); }); //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知 bridge.registerHandler("functionInJs", function(data, responseCallback) { alert(data); var data2 = document.getElementById("text1").value; var responseData = "我是Android调用js方法返回的数据---"+ data2; responseCallback(responseData); }); }) </script> </html> ```