### 前言

在`Android`开发过程中，经常会遇到 `Android`与` js `交互的问题。但是由于原始的`Android`与` js `交互存在很多安全性问题，今天给大家介绍一个第三方的库

[JsBridge](https://github.com/lzyzsd/JsBridge)

在`Android`与` js `交互的使用。鉴于原库在介绍使用的时候十分简略，对于一个`js`本来就不怎么熟悉的`Android`开发人员而言，更是不好理解。因此，本篇将详细介绍此库的使用。

今天涉及内容：

1. `JsBridge`库引用

2. `JsBridge`库在`MainActivity`中使用代码

3. `JsBridge`与`Android`交互注意的问题

4. 效果图和项目结构图

先来波效果图


项目结构图


#### 一. JsBridge库引用

[`JsBridge`官网](https://github.com/lzyzsd/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交互注意的问题

我们需要注意的是：

1. 当`js`调用`android`方法时，需要在`android`中写好注册方法供`js`调用。当`android`调用`js`方法时，需要在`js`中写好注册方法供`android`调用。

2. `js`中必须写两个关于初始化`jsBridge`库的方法，`js`调用`android`方法时，`js`方法的书写要与初始化方法同层级。`js`注册方法供`android`调用时，`js`方法要写到`jsbridge`库初始化之内

3. 无论怎么调用，`js`和`android`中涉及`tag`方法调用时，两边的`tag`都要一 一对应

#### 四. 效果图和项目结构图


项目结构图


ok,今天就讲到这里了，谢谢大家。