使用 jsbridge 实现原生和js相互调用

2024-01-27 20:58
文章标签 实现 使用 js 调用 原生 相互 jsbridge

本文主要是介绍使用 jsbridge 实现原生和js相互调用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看原生和js相互调用的效果（如图,红线以上是webview展示的h5页面，红线以下是app的原生页面）

在这里插入图片描述

项目结构：
在这里插入图片描述

app需要用到的依赖：

//jsbridge
implementation 'com.github.lzyzsd:jsbridge:1.0.4'

MainActivity代码：

package com.shengqf.jsbridgedemo;import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.CallBackFunction;public class MainActivity extends AppCompatActivity {private BridgeWebView mWebView;private EditText mEdt;private Context mContext;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mContext = this;initView();setClick();registerHandlers();}private void initView() {mEdt = findViewById(R.id.edt);initWebView();}private void initWebView() {mWebView = findViewById(R.id.webView);WebViewSettingUtil.initWebView(mWebView);mWebView.loadUrl("file:///android_asset/web/index.html");}//注册js调用原生的方法private void registerHandlers() {mWebView.registerHandler("modifyAppEditValue", new BridgeHandler() {//data是js传递给原生的数据，CallBackFunction是js的回调@Overridepublic void handler(String data, CallBackFunction function) {mEdt.setText(data);function.onCallBack("app的输入框内容已被修改啦");}});mWebView.registerHandler("clearAppEdt", new BridgeHandler() {@Overridepublic void handler(String data, CallBackFunction function) {mEdt.setText("");function.onCallBack("app的输入框内容已被清空啦");}});}//原生调用js的方法private void setClick() {findViewById(R.id.btn1).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {String content = mEdt.getText().toString();//原生调用js的方法(content是传递给js的数据)mWebView.callHandler("modifyH5InputValue", content, new CallBackFunction() {//原生调用完js方法后的回调(data是js回传给原生的数据)@Overridepublic void onCallBack(String data) {Toast.makeText(mContext, data, Toast.LENGTH_LONG).show();}});}});findViewById(R.id.btn2).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//原生调用js的方法mWebView.callHandler("clearH5Input", "", new CallBackFunction() {//原生调用完js方法后的回调(data是js回传给原生的数据)@Overridepublic void onCallBack(String data) {Toast.makeText(mContext, data, Toast.LENGTH_LONG).show();}});}});}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK) {if (mWebView != null && mWebView.canGoBack()) {mWebView.goBack();return true;} else {System.exit(0);}}return super.onKeyDown(keyCode, event);}}

WebViewSettingUtil的代码：

package com.shengqf.jsbridgedemo;import android.annotation.SuppressLint;
import android.os.Build;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
import com.github.lzyzsd.jsbridge.DefaultHandler;public class WebViewSettingUtil {@SuppressLint("SetJavaScriptEnabled")public static void initWebView(BridgeWebView webView) {webView.setDefaultHandler(new DefaultHandler());webView.setWebChromeClient(new WebChromeClient());webView.getSettings().setJavaScriptEnabled(true);webView.setWebViewClient(new BridgeWebViewClient(webView));// 如果不加这一行，当点击界面链接，跳转到外部时，会出现net::ERR_CACHE_MISS错误if (Build.VERSION.SDK_INT >= 19) {webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);}}
}

MainActivity的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.github.lzyzsd.jsbridge.BridgeWebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="240dp" /><Viewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#f00" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="20dp"><EditTextandroid:id="@+id/edt"android:layout_width="match_parent"android:layout_height="44dp"android:hint="请输入" /><Buttonandroid:id="@+id/btn1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="app输入框内容展示到h5输入框" /><Buttonandroid:id="@+id/btn2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="清空h5页面输入框内容" /></LinearLayout></LinearLayout>

index.html：

<html><head><meta content="text/html; charset=utf-8" http-equiv="content-type"><title>page01</title><style type="text/css">* {padding: 0px;margin: 0px;}.container {padding: 20px;}.mt10{margin-top: 10px;}</style></head><body><div class="container"><div><input type="text" id="content" placeholder="请输入" /></div><div class="mt10"><input type="button" onclick="click1()" value="修改app里输入框内容" /></div><div class="mt10"><input type="button" onclick="click2()" value="清空app里输入框内容" /></div></div><script>//responseData为app回传给h5的数据var callback = function(responseData) {alert(responseData);};//修改app里输入框内容function click1() {console.log(123)var content = document.getElementById("content").value;//js调用app的方法window.WebViewJavascriptBridge.callHandler('modifyAppEditValue', content, callback);}//清空app里输入框内容function click2() {console.log(456)//js调用app的方法window.WebViewJavascriptBridge.callHandler('clearAppEdt', "", callback);}//注册事件监听,监听app调用h5(这里只写了android的，ios的没写)function setupWebViewJavascriptBridge(callback) {//android使用if (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge)} else {document.addEventListener('WebViewJavascriptBridgeReady',function() {callback(WebViewJavascriptBridge)},false);}}// 注册回调函数，第一次连接时调用 初始化函数setupWebViewJavascriptBridge(function(bridge) {//初始化bridge.init(function(message, responseCallback) {var data = {'Javascript Responds': 'Hello jarry!'};responseCallback(data);});//注册app调用jsbridge.registerHandler("modifyH5InputValue", function(data, responseCallback) {var content = document.getElementById("content");content.value = data;var responseData = "h5页面输入框内容已被修改啦";responseCallback(responseData);});//注册app调用jsbridge.registerHandler("clearH5Input", function(data, responseCallback) {var content = document.getElementById("content");content.value = "";var responseData = "h5页面输入框内容已被清空啦";responseCallback(responseData);});})</script></body>
</html>

参考：https://www.jianshu.com/p/e37ccf32cb5b
参考：https://www.jianshu.com/p/910e058a1d63/

这篇关于使用 jsbridge 实现原生和js相互调用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/651473。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Python调用Orator ORM进行数据库操作

Python调用Orator ORM进行数据库操作

《Python调用OratorORM进行数据库操作》OratorORM是一个功能丰富且灵活的PythonORM库,旨在简化数据库操作,它支持多种数据库并提供了简洁且直观的API,下面我们就... 目录Orator ORM 主要特点安装使用示例总结Orator ORM 是一个功能丰富且灵活的 python O
阅读更多...
Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Python使用国内镜像加速pip安装的方法讲解

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip？2. 什么是 -i 参数？二、国内镜像源的选择三、如何
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Linux使用nload监控网络流量的方法

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2