android JS动态框架,jsBridge

最新推荐文章于 2024-08-21 08:51:32 发布
最新推荐文章于 2024-08-21 08:51:32 发布
阅读量493 收藏 1
点赞数
文章标签： android JS动态框架

原生提供H5调用的函数

序号

方法名

说明

Android

AppleIos

备注

1

setTitle

修改原生的标题

支持

支持

2

navigation

打开原生界面，保留原来界面

支持

支持

3

redirect

打开原生界面，不保留原来界面

支持

支持

4

reLaunch

打开原生界面，关闭其他所有的界面

支持

支持

5

navigateBack

关闭原生界面

支持

支持

6

navigateBackByTag

通过tag关闭原生界面，并跳转到tag指定的界面

支持

支持

7

setResult

设置要返回的上一个界面的数据

支持

支持

8

addBackListener

监听原生的返回键事件

支持

支持

H5只要监听返回键，原生不在处理返回键的事件

9

getUserInfo

获取用户信息

支持

支持

10

addMenu

动态添加标题栏menu

支持

支持

在原来的基础上添加

11

removeMenu

动态移除标题栏指定的menu

支持

支持

通过标题(text)匹配

12

removeAllMenu

动态移除所有的标题栏menu

支持

支持

13

chooseImages

从本地相册选择图片或使用相机拍照

支持

支持

14

imageToBase64

把本地图片转Base64

支持

支持

15

uploadFile

将本地资源上传到服务器

支持

支持

H5提供的回调函数

序号

方法名

说明

Android

AppleIos

备注

1

onNativeBridgeReady

原生Native和H5通信桥梁建立完成时回调

支持

支持

2

onNativeLoad

原生界面初始化完成，相当于windows.onLoad但不等价,在windows.onLoad之后回调

支持

支持

只有首次打开会回调，页面刷新不会回调

3

onNativeResult

接收上一个界面关闭时传递过来的参数

支持

支持

4

onNativeMenuItemSelected

点击原生的Menu时回调

支持

支持

5

onNativeBackListener

点击返回键时回调

支持

支持

只有监听返回键后才会回调

6

onNativeDestroy

原生界面关闭时回调

支持

支持

内置Menu图标

序号

名称

效果

Android

AppleIos

1

add

-

支持

支持

2

search

-

支持

支持

3

more

-

支持

支持

如何使用

在H5中监听各个事件的回调：

// 原生Native和H5通信桥梁建立完成时回调

window.onNativeBridgeReady = function (jsBridge) {

console.log("-------->原生Native和H5通信桥梁建立完成");

};

//原生界面初始化完成时回调，相当于windows.onLoad但不等价

window.onNativeLoad = function (params) {

console.log("-------->收到参数：" + params);

};

// 接收上一个界面返回时传递过来的参数

window.onNativeResult = function (params) {

alert('收到上一个界面传递过来的参数：' + params);

};

// 点击原生的Menu时回调

window.onNativeMenuItemSelected = function (params) {

var menu = JSON.parse(params);

alert('你点击了：' + menu.text);

};

// 点击原生的返回键时回调

window.onNativeBackListener = function (text) {

if (confirm("你确定要退出吗？")) {

jsBridge.call("navigateBack");

} else {

alert("点击了取消");

}

}

// 原生界面销毁，资源释放

window.onNativeDestroy = function (){

console.log("------------>onNativeDestroy页面销毁")

}

注意

1 所有的原生提供的回到函数都是onNative开头的。

2 只有在onNativeBridgeReady回调完成后才可以调用原生的方法，否则调用无效，该函数回调后自动在window中注入一个jsBridge对象可以通过它调用原生的方法。

3 所有的跨平台调用数据传递都使用Json，这样有效解决各个平台数据类型不同的问题。

4 调用原生所有的函数都是通过jsBridge.call(functionName,data,callback)的方式调用，functionName为原生提供的方法名，data是String类型数据，data最终会传递给原生，

callback是JavaScript中的 function(函数)用于接收原生调用成功的反馈。

5 在H5中写JavaScript代码的时候声明变量时用要var 关键字，不能使用let关键字，因为在Android 5.0以前不支持这种写法。

6 在onNativeDestroy不能显示弹窗，因为页面已经销毁，在该函数内清楚数据缓存，或者缓存数据。

H5调原生各个方法演示

1 H5设置原生的标题 "setTitle"

window.jsBridge.call("setTitle", 'APP混合开发');

2 打开原生界面，保留原来界面"navigation"

var launchModel = {

title: "H5打开原生界面",//原生显示的标题

tag:"Main",// 页面标签，如果从其他界面返回到指定的界面就需要用到这个tag

page: "https://m.baidu.com",//原生加载的H5地址

params: {// 需要传递过去的参数

param1: "value1",

param2: "value2",

param3: "value3"

},

menus: [// 原生标题栏右侧的Menu菜单，

{

text: "添加",//菜单显示的文字

icon: "add"//菜单显示的图标

},

{

text: "添加",

icon: "search"

}

]

};

// 把JavaScript中的对象转换为json数据，在传给原生

var launchModelString = JSON.stringify(launchModel);

// 打开原生新的界面

window.jsBridge.call("navigation", launchModelString);

menus 最多能显示3个,多以3个，从第三个开始使用"...表示"，理论上支持无限个menu。

launchModel中的tag，字段为页面标签，如果从其他界面返回到指定的界面就需要用到这个tag，在不设置tag的情况下默认使用正在加载的H5地址作为tag。

tag不能重复，如果当前界面堆栈列表中已经存在了一个被tag标记的界面，使用相同的tag不能再打开原生界面。

通过 navigation传递过去的params参数会在onNativeLoad回调

//原生界面初始化完成时回调，相当于windows.onLoad但不等价

window.onNativeLoad = function (params) {

console.log("-------->收到参数：" + params);

};

3 打开原生界面，不保留原来界面"redirect"

var launchModel = {

title: "redirect",//原生显示的标题

page: "http://10.8.10.15:8080/jsBridge2/jsBridge/MenuDemo.html",//原生加载的H5地址

params: {

name: "张三",

age: "23",

sex: "男"

},

menus: [

{

text: "添加",

icon: "add"

},

{

text: "搜索",

icon: "search"

}

]

};

window.jsBridge.call("redirect", JSON.stringify(launchModel));

如果现在原生界面的堆栈列表如下：A、B、C，在C界面调用redirect启动一个原生界面D时，现在堆栈列表为：A、B、D

4 打开原生界面，关闭其他所有的界面"redirect"

var launchModel = {

title: "reLaunch",//原生显示的标题

page: "http://10.8.10.15:8080/jsBridge2/jsBridge/MenuDemo.html",//原生加载的H5地址

params: {

name: "张三",

age: "23",

sex: "男"

},

menus: [

{

text: "添加",

icon: "add"

},

{

text: "搜索",

icon: "search"

}

]

};

window.jsBridge.call("reLaunch", JSON.stringify(launchModel));

如果现在原生界面的堆栈列表如下：A、B、C，在C界面调用reLaunch启动一个原生界面D时，现在堆栈列表为：D

5 关闭原生界面，并返回参数到上一个界面 "navigateBack"

//直接关闭不返回参数到上一个界面

window.jsBridge.call("navigateBack");

//关闭页面并传递参数到上一个界面

var params = {//需要传递给上一个界面的参数

param1: "value1",

param2: "value2",

param3: "value3"

}

// 把JavaScript中的对象转换为json数据，在传给原生

var paramsString = JSON.stringify(params);

//关闭界面

window.jsBridge.call("navigateBack",paramsString);

通过navigateBack或者navigateBackByTag返回的参数会在上一个界面的onNativeResult函数回调

// 接收上一个界面传递过来的参数

window.onNativeResult = function (params) {

alert('收到上一个界面传递过来的参数：' + params);

};

在关闭界面的时候不传递参数，上一个界面的onNativeResult不会回调，点击物理返回键(android)、标题栏返回键"🔙"，上一个界面的onNativeResult不会回调

6 通过tag关闭原生界面，并跳转到tag指定的界面 "navigateBackByTag"

//关闭页面并传递参数到上一个界面

var params = {

tag: "Main",

params: {// 需要返回到上一个界面的参数

param1: "value1",

param2: "value2",

param3: "value3"

}

}

// 把JavaScript中的对象转换为json数据，在传给原生

var paramsString = JSON.stringify(params);

//关闭界面

window.jsBridge.call("navigateBackByTag",paramsString);

如果调用navigateBackByTag通过Tag关闭指定的界面时，Tag对应的界面不存在时，不会返回任何界面，并系统有有Toast提示

7 设置返回上一个参数"setResult"

window.jsBridge.call("setResult", JSON.stringify({

name: "张三",

age: "23",

sex: "男"

}));

通过setResult设置返回上一个界面参数后，无论是点击物理返回键(Android)、或者标题栏返回键"🔙"、调用navigateBack()原生界面关闭时都可以返回参数到上一页界面，

但是如果使用navigateBack(params)方式关闭原生界面，之前通过setResult设置的参数无效，上一个界面收到的参数为params具体的内容。

8 H5监听原生的返回键"addBackListener"

jsBridge.call("addBackListener");

H5调用原生的方法"addBackListener"就可以监听原生的返回键，当用户点击物理返回键、标题栏返回键"🔙"时回调onNativeBackListener

// 点击原生的返回键时回调

window.onNativeBackListener = function (text) {

if (confirm("你确定要退出吗？")) {

jsBridge.call("navigateBack");

} else {

alert("点击了取消");

}

}

注意：只要H5监听返回键，原生不再处理返回键事件，也就是说H5监听返回键触发onNativeBackListener后H5不做处理就不能返回上一个界面。

9 获取用户信息"getUserInfo"

jsBridge.call("getUserInfo", "", function (userInfo) {

alert(userInfo);

})

注意：jsBridge.call中的第二个参数必须传，否则无法获取用户信息，具体参数说明请查看"如何使用"中的第4点。

10 动态添加标题栏menu菜单"addMenu"

window.jsBridge.call("addMenu", JSON.stringify( [

{

text: "添加1",

icon: "add"

},

{

text: "新增2",

icon: "search"

},

{

text: "新增3",

icon: "add"

}

]));

注意：

1.动态添加标题栏是在原来的基础上添加，也就是所如果现在有2个菜单项，现在又添加3个，现在原生界面一共显示5个菜单项。

2.添加menu的时候text不能重复(同一个界面)

11 动态移除标题栏menu菜单"removeMenu"

window.jsBridge.call("removeMenu", "搜索");

注意：意思是移除标题栏中的menu的text为"搜索"的菜单，如果不存在这样的菜单不做任何处理。

12 动态移除标题栏所有菜单"removeAllMenu"

window.jsBridge.call("removeAllMenu");

13 从本地相册选择图片或使用相机拍照"chooseImages(Object object )"

参数

Object object

属性

类型

默认值

必填

说明

count

number

9

否

最多可以选择的图片张数

sizeType

Array

['original', 'compressed']

否

所选的图片的尺寸

sourceType

Array

['album', 'camera']

否

选择图片的来源

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

接口调用结束的回调函数(调用成功、失败都会执行)

object.sizeType 的合法值

值

说明

最低版本

original

原图

1.1.0

compressed

压缩图

1.1.0

object.sourceType 的合法值

值

说明

最低版本

album

从相册选图

1.1.0

camera

使用相机

1.1.0

object.success 回调函数

Object res

属性

类型

说明

tempFiles

Array

图片的本地临时文件列表

res.tempFiles 的结构

属性

类型

说明

path

String

本地临时文件路径

size

number

本地临时文件大小，单位 B

jsBridge.chooseImage({

count:10,

sizeType: ["compressed", "original"],

sourceType: ["album", "camera"],

success:function(res) {

console.log("----------->图片选择成功");

console.log(res);

console.log(res.tempFiles);

res.tempFiles.forEach(function (element) {

var path = element.path;

var li = '';

li += '

';

li += '+%20element.path%20+%20';

li += "

";

$("#mui22222").append(li);

});

},

fail:function(res) {

console.log("----------->图片选择失败！");

console.log(res)

},

complete:function(res) {

console.log("----------->完成 ok");

console.log(res)

}

});

14 把本地图片转Base64"imageToBase64(Object object )"

参数

Object object

属性

类型

默认值

必填

说明

url

String

是

要转换的本地图片url,url必须是从chooseImages获取

quality

number

80

否

转换的质量，值越大转换Base64越大 建议：10-100之间

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

Object res

属性

类型

说明

data

String

Base64数据,不带： data:img/jpg;base64,

jsBridge.imageToBase64({

url:imageUrl,

quality:30,

success:function(res) {

console.log(res);

console.log("----------->图片转成功");

var li = '';

li += '

';

li += 'jpg;base64,'+res.data+'%5C'';

li += "

";

$("#mui22222").append(li);

},

fail:function(res) {

console.log("----------->图片转失败");

console.log(res)

},

complete:function(res) {

console.log("----------->图片转完成");

console.log(res)

}

});

15 将本地资源上传到服务器"uploadFile(Object object )"

参数

Object object

属性

类型

默认值

必填

说明

url

String

是

开发者服务器地址

filePath

String

是

要上传文件资源的路径

name

string

是

文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容

header

Object

否

HTTP 请求 Header

formData

Object

否

HTTP 请求中其他额外的 form data

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

Object res

属性

类型

说明

data

String

开发者服务器返回的数据

statusCode

number

开发者服务器返回的 HTTP 状态码

jsBridge.uploadFile({

url:"http://10.18.15.58:8002/cloudec/storage/upload/front/upfile",

filePath:localFile,

name:"test",

header:{

jwt:"3333333",

name:"sdfsdfsdfds"

},

formData:{

age:123,

userId:"123455"

},

success: function (res) {

mui.toast("图片上传成功");

},

fail: function (res) {

mui.toast("图片上传失败");

console.log(res)

}

});

周恰恰
关注
Android JSBridge 详解（背景和原理、特性和挑战、应用场景和实现方法）
半夏微凉科技
06-05 884
JSBridge（JavaScript Bridge）是一种用于在 JavaScript 和 Native 代码之间进行通信的技术，常用于在 Web 应用中调用 Native 功能或在 Native 应用中嵌入 Web 页面。在 Android 平台上，JSBridge 可以实现通过 WebView 控件在 JavaScript 和 Java 代码之间进行双向通信，从而实现跨平台的功能交互~~~
android使用JSBridge机制原理
qq_36091581的博客
05-08 3143
android使用JSBridge机制原理 一、什么是JSBridge？ JSBridge（JavaScriptBridge）顾名思义就是用JavaScript搭建的桥梁，那连接的是哪两端呢？–一端是web，一端是native。我们搭建这座桥的目的也很简单，让native可以调用web的js代码，让web可以 “调用” 原生的代码。请注意这个我加了 引号的调用，它并不是直接调用，而是可...
Android JSBridge
04-12
关于Android与javascript之间实现数据互通的JsBridge使用描述
JSbridge android与js交互框架
钟情短发姑娘的博客
12-06 416
原文地址：https://www.imooc.com/article/70143?block_id=tuijian_wz https://www.jianshu.com/p/c80ceb1ff417?from=groupmessage 1.项目build.gradle allprojects { repositories { ...
JSBridge-Android 开源项目教程
gitblog_00221的博客
08-21 976
JSBridge-Android 开源项目教程 JSBridge-AndroidA solution for safe and fast interaction between js and native，it's minimum support API 14;项目地址:https://gitcode.com/gh_mirrors/js/JSBridge-Android 1. 项目的目录结构及介...
探索JSBridge-Android：一款强大的移动端JavaScript与Android交互框架
gitblog_00005的博客
03-28 679
探索JSBridge-Android：一款强大的移动端JavaScript与Android交互框架 JSBridge-AndroidA solution for safe and fast interaction between js and native，it's minimum support API 14;项目地址:https://gitcode.com/gh_mirrors/js/JSB...
JSBridge-Android:js与本机之间安全，快速交互的解决方案，最低支持API 14；
03-21
JSBridge-Android 简介 本项目索引lzyzsd的 ，由于作者连续未修复的部分代码丢失问题，所以目前存在的调用丢失问题以及效率问题无法在原项目得到响应，因此替换了现有的js文件以及java类； 主要修改如下： 不再使用URL SHEME拦截方式，直接采用webview的addJavaScriptInterface，此方法根据Android跟踪，是目前采用webview方案js与原生交互效率最高的一种系统实现；对于API小于17的用户，1.0.3版本将支持版本降低到14，满足一些朋友的需要，为了安全主要实现方式利用JsPrompt方法让H5可以和原生进行交互，并消除了低版本的三个危险漏洞； //4.2之前addJavascriptInterface有安全泄漏风险，进行移除 webView.removeJavascriptInterface("searchBoxJavaBrid
快速混合开发框架，JSBridge提供核心Android、iOS功能。多平台API支撑，部分兼容浏览器.zip
02-08
JSBridge正是这种开发模式的核心组件，它在Android和iOS之间架起了一座桥梁，允许JavaScript代码调用原生平台的API，从而实现丰富的功能。 在iOS开发中，JSBridge扮演着至关重要的角色。通过JSBridge，开发者可以...
Android JsBridge的集成
SkunkLuck
09-10 841
1：官网  https://github.com/lzyzsd/JsBridge 2：根据官网，集成JsBridge 3：代码 package com.hades.xq.jsbridge import android.net.Uri import android.os.Bundle import android.support.v7.app.AppCompatActivity impor...
android js 框架,简化Android与JS交互，JsBridge框架全面解析
weixin_42355204的博客
05-27 516
原标题：简化Android与JS交互，JsBridge框架全面解析近日，滴滴顺风车披露了一组数字，预测春运前后，跨城出行以7天为一个周期，呈“潮汐式”变化。2月13号，有将近100万人乘滴滴顺风车踏上归途；除夕当天，还有近40万在回家的顺风车上。返程巅峰集中在2月23日前后，23日预计有超过110万人乘坐滴滴顺风车返回工作岗位。作者简介本篇文章来自juexingzhe的投稿。主要介绍了Androi...
JSBridge-Android 使用指南
最新发布
gitblog_00612的博客
08-21 734
JSBridge-Android 使用指南 JSBridge-AndroidA solution for safe and fast interaction between js and native，it's minimum support API 14;项目地址:https://gitcode.com/gh_mirrors/js/JSBridge-Android 项目介绍 JSBridge-...
Android JSBridge的原理与实现
02-28
博客地址 http://blog.csdn.net/sbsujjbcy/article/details/50752595
AndroidJSBridgeDemo
09-20
Android与H5，js通信框架使用，主要展示了 JSBridge调用Android端时，Android端数据的返回处理和回调处理，与js进行通信。
安卓webview 的JsBridge连接桥（跟html交互）
12-04
HTML调用安卓的方法，要用的连接桥，使用方法在我的博客里可以查看，欢迎大家相互交流
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互
04-18
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互，博客地址：http://blog.csdn.net/dickyqie/article/details/70225676
android-JsBridge实战一
阿文的博客
07-03 417
https://blog.csdn.net/u012230055/article/details/69389455
Android jsbridge 实现JS交互（代码）
zqd1984309864的博客
09-08 414
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private BridgeWebView webView; private Button javaToJsDefault; private Button javaToJsSpec; @Override protected void onCreate(Bundle savedInstanceS.
Android 与 JavaScript 相互调用桥梁 JSBridge
热门推荐
ejinxian的专栏
03-27 2万+
JSBridge 什么是JSBridge JSBridge：听其取名就是js和Native之前的桥梁，而实际上JSBridge确实是JS和Native之前的一种通信方式。简单的说，JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS也只通过固定的桥对象调用Native。JSBridge另一个叫法及大家熟知的Hybrid app技术。
随便说说android的jsBridge
weixin_33811961的博客
08-02 132
初衷 最初我们寻求bridge方案是基于H5和Native之间的桥接，首先想到的是jsBridge。两种方式： javaInterface 注入对象; alert/prompt/confirm 如我们所知，第1种方法在android 4.2以下存在XSS漏洞，具体是因为，往js的Window注入的是原始java对象，这就导致可以通过获取Class对象反射出任何对象进行调用,相当危险。 ...
js与ios和android交互,使用jsBridge和原生IOS、Android交互
05-26
在iOS中，可以使用JavaScriptCore框架和WKWebView来实现JSBridge。在Android中，可以使用WebView和JavaScriptInterface来实现JSBridge。 具体来说，需要在原生应用程序中创建一个JavaScriptInterface类，该类可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值