騰訊官網：https://x5.tencent.com/tbs/guide/sdkInit.html

?

?

?

一.AndroidStudio接入X5WebView

?

?

1.添加so以及lib文件

?

?

?

2.Gradle配置

apply plugin: 'com.android.application'android {compileSdkVersion 28defaultConfig {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 的設計}@Overrideprotected 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 {@Overridepublic void onCreate() {super.onCreate();//搜集本地tbs內核信息并上報服務器，服務器返回結果決定使用哪個內核。QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {@Overridepublic void onViewInitFinished(boolean arg0) {// TODO Auto-generated method stub//x5內核初始化完成的回調，為true表示x5內核加載成功，否則表示x5內核加載失敗，會自動切換到系統內核。Log.d("app", " onViewInitFinished is " + arg0);}@Overridepublic 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.csdn.net/weixin_37730482";@Overrideprotected 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{@Overridepublic boolean shouldOverrideUrlLoading(WebView webView, String s) {webView.loadUrl(s);return true;}}/*** WebChromeClient監聽* */private class myWebChromeClient extends WebChromeClient{@Overridepublic 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方法*/@Overridepublic 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方法* */@Overrideprotected 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";@Overrideprotected 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() {@Overridepublic void onClick(View v) {x5WebView.loadUrl("javascript:MyOnclick()");}});}/*** WebViewClient監聽* */private class myWebViewClient extends WebViewClient{@Overridepublic boolean shouldOverrideUrlLoading(WebView webView, String s) {webView.loadUrl(s);return true;}}/*** WebChromeClient監聽* */private class myWebChromeClient extends WebChromeClient{@Overridepublic 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方法*/@Overridepublic 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方法* */@Overrideprotected 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";@Overrideprotected 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交互接口類，并起別名 AndroidWebViewx5WebView.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.JavascriptInterfacepublic void showInfoFromJs(String name) {Toast.makeText(context, "JS頁面輸入內容：" + name, Toast.LENGTH_LONG).show();}}/*** WebViewClient監聽* */private class myWebViewClient extends WebViewClient{@Overridepublic boolean shouldOverrideUrlLoading(WebView webView, String s) {webView.loadUrl(s);return true;}}/*** WebChromeClient監聽* */private class myWebChromeClient extends WebChromeClient{@Overridepublic 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方法*/@Overridepublic 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方法* */@Overrideprotected void onDestroy() {super.onDestroy();if(null!=x5WebView){x5WebView.destroy();//釋放資源}}}

?

?

效果

?

由于X5WebView與原生WebView在Android與JS交互方式上是一樣的，所以在這里就簡單舉例。

Android與JS通過WebView交互詳解 請看?Android與JS通過WebView相互調用詳解

?

?

?

附：代碼下載：https://github.com/wujianning/CustomWebViewJS

總結

以上是生活随笔為你收集整理的Android JS 通过X5WebView相互调用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。