Jsbridge实现Android与js交互

前言

在Android开发过程中，经常会遇到 Android与js交互的问题。但是由于原始的Android与js交互存在很多安全性问题，今天给大家介绍一个第三方的库
JsBridge
在Android与js交互的使用。鉴于原库在介绍使用的时候十分简略，对于一个js本来就不怎么熟悉的Android开发人员而言，更是不好理解。因此，本篇将详细介绍此库的使用。

今天涉及内容：

  1. JsBridge库引用
  2. JsBridge库在MainActivity中使用代码
  3. JsBridge与Android交互详细介绍
    3.1 Android调用js初始化方法(无返回值)
    3.2 Android调用js初始化方法(有返回值)
    3.3 Android调用js带tag方法
    3.4 Js调用Android方法(默认方法)
    3.5 Js调用Android方法(带Tag标志)
  4. JsBridge与Android交互注意的问题
  5. 效果图和项目结构图
  6. 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控件)：

    <!-- webview 演示web调用Java -->
    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

下面贴出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如下：

还有 67% 的精彩内容
©著作权归作者所有,转载或内容合作请联系作者
支付 ¥5.00 继续阅读
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,204评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,091评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,548评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,657评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,689评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,554评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,302评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,216评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,661评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,697评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,306评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2赞 355