前言
在Android开发过程中，经常会遇到 Android与js交互的问题。但是由于原始的Android与js交互存在很多安全性问题，今天给大家介绍一个第三方的库
JsBridge
在Android与js交互的使用。鉴于原库在介绍使用的时候十分简略，对于一个js本来就不怎么熟悉的Android开发人员而言，更是不好理解。因此，本篇将详细介绍此库的使用。
今天涉及内容：
-
JsBridge库引用 -
JsBridge库在MainActivity中使用代码 -
JsBridge与Android交互详细介绍
3.1 Android调用js初始化方法(无返回值)
3.2 Android调用js初始化方法(有返回值)
3.3 Android调用js带tag方法
3.4 Js调用Android方法(默认方法)
3.5 Js调用Android方法(带Tag标志) -
JsBridge与Android交互注意的问题 - 效果图和项目结构图
-
Html中js书写规范及test.html源码
先来波效果图
1.gif
项目结构图
image.png
一. JsBridge库引用
JsBridge官网
库导入如下，先在你项目的project对应的build.gradle中添加如下代码：
allprojects {
repositories {
//其他代码省略
//......
maven { url 'https://jitpack.io' }
}
}
然后在app_module对应的build.gradle中添加如下引用：
dependencies {
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
}
至此，JsBridge库引用完毕。
二. JsBridge库在MainActivity中使用代码
先在MainActivity对应的布局activity_main.xml中添加BridgeWebView控件。(注:BridgeWebView继承自WebView，在需要用到webview的地方直接用BridgeWebView控件)：
下面贴出MainActivity代码：
package com.testdemo;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.Manifest;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.permision.PermissionHelper;
import com.util.LogUtil;
import kr.co.namee.permissiongen.PermissionFail;
import kr.co.namee.permissiongen.PermissionSuccess;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private static final int PERMISSION_CODE = 1234;
private TextView mTextView;
private Button mButton1;
private BridgeWebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
initView();
//初始化数据
initData();
//设置监听
setListener();
// //申请权限
// requestPermission(MainActivity.PERMISSION_CODE);
}
private void requestPermission(int requestCode) {
String permissions[] = {
Manifest.permission.CAMERA,
Manifest.permission.INTERNET,
Manifest.permission.READ_EXTERNAL_STORAGE,
Manifest.permission.WRITE_EXTERNAL_STORAGE};
PermissionHelper.getInstance().checkPermissions(permissions, requestCode, MainActivity.this);
}
@PermissionSuccess(requestCode = MainActivity.PERMISSION_CODE)
public void requestSuccess() {
//申请到权限后的处理
//......
LogUtil.i("=====权限申请成功======");
}
@PermissionFail(requestCode = MainActivity.PERMISSION_CODE)
public void requestFail() {
//未获取到权限的处理
//......
LogUtil.i("=====权限申请失败======");
}
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String permissions[], @NonNull int[] grantResults) {
PermissionHelper.getInstance().onRequestPermissionsResult(requestCode, permissions, grantResults);
}
private void initView() {
mTextView = findViewById(R.id.tv);
mButton1 = findViewById(R.id.btn1);
webView = findViewById(R.id.webView);
}
private void initData() {
//webView基本设置
setWebViewConfig(webView,MainActivity.this);
//设置webview背景色
webView.setBackgroundColor(Color.BLUE);
//设置WebChromeClient,用以支持webview显示对话框,网站图标,网站title,加载进度等等
webView.setWebChromeClient(new WebChromeClient());
// webView.loadUrl("file:///android_asset/demo.html");
webView.loadUrl("file:///android_asset/test.html");
}
private void setListener(){
mButton1.setOnClickListener(this);
//注册默认方法供js调用
webView.setDefaultHandler(new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
LogUtil.i("====收到web数据====" + data);
//发送数据给js
function.onCallBack("====Android给js数据回传===");
}
});
//注册带tag的方法供js调用
webView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
LogUtil.i("得到JS传过来的数据 data ="+data);
//发送消息给js
function.onCallBack("传递数据给JS");
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn1://测试
LogUtil.i("=====测试====");
test();
break;
default:
break;
}
}
private void test() {
LogUtil.i("android开始调用js");
// webView.send("=====到底啥玩意=====");
webView.send("=====到底啥玩意=====", new CallBackFunction() {
@Override
public void onCallBack(String data) {
LogUtil.i("======返回结果啊====="+data);
mTextView.setText(data);
}
});
// webView.callHandler("functionJs", "我是王者荣耀", new CallBackFunction() {
// @Override
// public void onCallBack(String data) {
// LogUtil.i("=======调用js返回数据====data="+data);
// }
// });
}
/**webview基本设置**/
public void setWebViewConfig(WebView webView, Context context) {
if (webView == null) {
return;
}
WebSettings webviewSettings = webView.getSettings();
webviewSettings.setSupportZoom(false);//不支持缩放
webviewSettings.setJavaScriptEnabled(true);//设置WebView允许执行JavaScript脚本
// 自适应屏幕大小
webviewSettings.setUseWideViewPort(true);//当前页面包含viewport属性标签，在标签中指定宽度值生效
webviewSettings.setLoadWithOverviewMode(true);//设置WebView使用预览模式加载界面
String cacheDirPath = context.getFilesDir().getAbsolutePath() + "cache/";
webviewSettings.setAppCachePath(cacheDirPath);
webviewSettings.setAppCacheEnabled(true);//设置Application缓存API开启
webviewSettings.setDomStorageEnabled(true);//设置开启DOM存储API权限,WebView能够使用DOM storage API
webviewSettings.setAllowFileAccess(true);//设置在WebView内部允许访问文件
webviewSettings.setAppCacheMaxSize(1024 * 1024 * 8);
webviewSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存加载模式
webviewSettings.setTextZoom(100);//设置WebView中加载页面字体变焦百分比，默认100.
webviewSettings.setSupportMultipleWindows(true);//设置webview支持多屏窗口
//webView支持https和http混合加载模式
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
webviewSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
}
}
}
三. JsBridge与Android交互详细介绍
通过MainActivty的代码，我们只能有个模糊的交互使用概念。那么，下面让我们对Android与Js交互，做一个详细的梳理。
Android与Js交互主要分为以下两个板块：
- Android 调用 js
- js 调用 Android
那么接下来就详细讲解这些调用的使用。
3.1 Android调用js初始化方法(无返回值)
在Android中可以调用js初始化时的方法，此方法主要用于Android向js传值，具体在Android中调用方法传值给js如下：