Hybrid混合开发 和 Android平台JSBridge的原理

书接上篇:移动端研发技术的进化历程 

纯原生开发主要面临动态化和开发成本两个问题,而针对这两个问题,诞生了一些跨平台的动态化框架。
针对原生开发面临的问题,业界一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架(“跨平台”特指 Android 和 iOS 两个平台),根据其原理,主要分为三类:

  • H5 + 原生(Cordova、Ionic、微信小程序)
  • JavaScript 开发 + 原生渲染 (React Native、Weex)
  • 自绘UI + 原生 (Qt for mobile、Flutter)

Hybrid混合开发

将 App 中需要动态变动的内容通过HTML5(简称 H5)来实现,通过原生的网页加载控件WebView 来加载。 H5 + 原生 的开发模式为混合开发 ,App我们称之为混合应用或 Hybrid App ,如果一个应用的大多数功能都是 H5 实现的话,我们称其为 Web App。

优点:
混合开发中,H5 部分是可以随时改变而不用发版,动态化需求能满足;同时,由于 H5 代码只需要一次开发,就能同时在 Android 和 iOS 两个平台运行,这也可以减小开发成本。

缺点:
混合开发中,H5代码是运行在原生WebView 中,其 JavaScript 依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。且性能体验不佳,对于复杂用户界面或动画,WebView 有时会不堪重任。

在此,我们需要提一下小程序,目前国内各家公司小程序应用层的开发技术栈是 Web 技术栈,而底层渲染方式基本都是 WebView 和原生相结合的方式。


 Android 平台使用JSBridge

JSBridge 简单来讲,主要是 给 JavaScript 提供调用 Native 功能的接口,让混合开发中的『前端部分』可以方便地使用平台的地图定位、相册、摄像头等 Native 功能。
实际上,JSBridge 就像其名称中的『Bridge』的意义一样,是 Native 和非 Native 之间的桥梁,它的核心是 构建 Native 和非 Native 间消息通信的通道,而且是“双向通信”的通道。


原生调用H5的方法

WebView调用loadUrl(),会重新刷新页面,无返回结果。

// 调用js中的函数:jsFun(msg)
webView.loadUrl("javascript:jsFun('" + msg + "')"); 

evaluateJavascript(),不会使页面刷新,有返回结果。

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//此处为 js 返回的结果}});
} 

JS调用原生的方法

WebView通过调用addJavascriptInterface()方法(推荐)
// 参数1:Android的本地对象、 参数2:JS的对象
mWebView.addJavascriptInterface(new MyJSInterface(),"androidJsInterface");
private static class MyJSInterface{public void showMessage(String msg){Toast.makeText(WebViewActivity.this, "成功"+ msg, Toast.LENGTH_LONG).show();}
}

原理: 通过对象映射的方式将Android中的本地对象和JS中的对象进行关联,从而实现JS调用Android的对象和方法。

漏洞:因为addJavascriptInterface绑定了一个Java对象实例,根据Java的反射机制,就可以获得更多方法,甚至间接获得更多的实例对象。Android 4.2版本之后,Google 在Android 4.2 版本中规定对被调用的函数以 @JavascriptInterface进行注解从而避免漏洞攻击。

@JavascriptInterface
public void showMessage(String msg)...

通过WebViewClient.shouldOverrideUrlLoading拦截url,分析意图执行相应操作。

需要与前端人员沟通如何定义Url,此url可以作为内部交互的意图,当网页加载后有一个url,可以进行判断后执行native的逻辑处理。

webView.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {//a.比如,点击网页按钮关闭Activity。这里url字符串查找是否包含“finish_app”关键字。if(url.contains("finish_app")) {//退出Activityfinish();}//b.比如,这个是从WebView页面跳转另外一个Activity页面。if (url.contains("MyLuckLog")){//会员页面startActivity(new Intent(WebViewActivity.this,NewActivity.class));}return true;}
});

例如,网易云音乐的app 里面的积分商城就是使用这种方式实现H5与native交互。微信和网易一样通过拦截url分析意图来执行相应的操作的。

缺陷:因为url是可以伪造的,存在一定的风险。例如,微信自己会在native代码里验证他的appid,所以一定程度上可以避免大部分的攻击。


通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调,拦截JS对话框alert()、confirm()、prompt() 消息。

Android通过 WebChromeClient 的onJsAlert()onJsConfirm()onJsPrompt()方法回调分别拦截JS对话框 。得到他们的消息内容,然后分析意图执行相应操作。

同样,也需要和前端开发人员做好约定好消息内容的意图。推荐prompt方法拦截意图。

  • 因为onJsPrompt调用较少,而onJsAlert、onJsConfirm可能调用频繁。
  • 只有prompt()可以返回任意类型的值,而alert()没有返回值、confirm()只能返回两种状态(确定 / 取消)两个值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/801135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Shell语言学堂】Shell 脚本练习1

Shell 脚本练习 shell语言实战 Shell 脚本练习&#x1f4a7;CSDN划过手的泪滴t现有一个脚本可传入n个参数&#xff0c;要求在脚本中实现在终端输出第n个参数之前的所有参数(不包含第n个参数)编写一个计算bmi体质指数的脚本&#xff0c;该脚本需要用户输入身高和体重信息&#x…

Lakehouse 大数据概念

“Lakehouse” 是一个相对新的概念,是大数据理论中的一个重要发展方向。它试图结合传统的数据湖(Data Lake)和数据仓库(Data Warehouse)的优点,以创造一种更为灵活和强大的数据管理体系。 在传统的大数据架构中,数据湖用于存储原始、未加工的数据,而数据仓库则用于存储…

代码随想录day34 | 贪心算法P3 | ● 1005 ● 134 ● 135

1005.K次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后&#xff0c;返回数组 可能…

机器人客户端如何配置同步消息至多个群中

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 前言 由于微信群的人数&#xff0c;最多是500人&#xff0c;如果有人的业务做的大&#xff0c;可能会同步创建好多个群&#xff0c;但是资料的不想多个群一起发&#xff0c;发给某个群&a…

[计算机网络] 当输入网址到网页

HTTP 首先&#xff0c;对URL进行解析&#xff0c;URL包含了Web服务器和对应的文件&#xff08;文件路径&#xff09; URL是请求服务器中的文件资源 通过Web服务器和对应文件来生产HTTP包&#xff08;超文本传输协议&#xff09; DNS 根据域名查询对应的IP地址 域名的层级 根…

下一代分层存储方案:CXL SSD

近日&#xff0c;在Memcon 2024大会上&#xff0c;三星推出了一款名为CXL Memory Module-Hybrid for Tiered Memory&#xff08;CMM-H TM&#xff09;&#xff0c;这款扩展卡配备了高速DRAM和NAND闪存&#xff0c;允许CPU和加速器远程访问额外的RAM和闪存资源。 那么&#xff0…

Kafka 线程模型痛点攻克: 提升分区写入 2 倍性能

01 引言 单分区写入在一些需要全局顺序消息的场景中具备重要应用价值。在一些严格保序场景下&#xff0c;需要将分区数设置为 1&#xff0c;并且只用单个生产者来发送数据&#xff0c;从而确保消费者可以按照原始顺序读取所有数据。此时&#xff0c;Kafka 的单分区写入性能将会…

Data Shapley Value 笔记

本文为 Data Shapley: Equitable Valuation of Data for Machine Learning 的阅读笔记&#xff0c;涉及论文中的 Data Shapley Value 计算公式、两种实现算法、实验应用部分的梳理。 为理解 Data Shapley Value&#xff0c;本文首先讨论 Shapley Value的相关内容&#xff0c;利…

Python基于Django的微博热搜、微博舆论可视化系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

K8s学习九(配置与存储_存储)

存储管理 Volumes HostPath 将节点上的文件或目录挂载到 Pod 上&#xff0c;此时该目录会变成持久化存储目录&#xff0c;即使 Pod 被删除后重启&#xff0c;也可以重新加载到该目录&#xff0c;该目录下的文件不会丢失 效果就是容器里的数据和主机里的数据进行共享 配置文…

蓝桥杯gcd汇总

gcd3014 问题描述 小明和小红是一对恋人&#xff0c;他们相爱已经三年了&#xff0c;在今年的七夕节&#xff0c;小明准备给小红一个特殊的礼物。他想要送给小红一些数字&#xff0c;让小红算出有多少对正整数 (a,b) 满足以下条件&#xff1a; clcm(a,b)−dgcd(a,b)x其中 c,…

JS-25-浏览器和浏览器对象

一、浏览器 由于JavaScript的出现就是为了能在浏览器中运行&#xff0c;所以&#xff0c;浏览器自然是JavaScript开发者必须要关注的。 目前主流的浏览器分这么几种&#xff1a; IE 6~11&#xff1a;国内用得最多的IE浏览器&#xff0c;历来对W3C标准支持差。从IE10开始支持E…

无人售货奶柜:开启便捷生活的新篇章

无人售货奶柜&#xff1a;开启便捷生活的新篇章 在这个快节奏的现代生活中&#xff0c;科技的革新不仅为我们带来了前所未有的便利&#xff0c;更在不经意间改变着我们的日常。其中&#xff0c;无人售货技术的出现&#xff0c;尤其是无人售货奶柜&#xff0c;已经成为我们生活…

项目管理中的估算活动资源

在项目管理中,资源估算是一项至关重要的任务。正确地估算活动资源可以确保项目的顺利进行,避免资源浪费和不必要的延误。以下是对项目管理中常见的活动资源类型的详细分析。 一、人力资源 人力资源是项目管理中最基本的资源之一。它包括项目团队成员的技能、知识和经验。在…

Java Web

1.GET方式请求 (1).普通URL get请求 1 2 3 http://localhost:8080/ajaxGet?id1&username用户名&userTrueName真实姓名 //get也可以传json,通过参数传json字符串,然后后端进行解析(不过一般都不这么做) http://localhost:8080/ajaxGet?user{"id":"1&…

【C语言】函数相关选择题

前言 关于函数相关的选择题。 题目一&#xff1a; C语言规定&#xff0c;在一个源程序中&#xff0c;main函数的位置&#xff08; &#xff09; A .必须在最开始 B .必须在库函数的后面 C .可以任意 D .必须在最后 题解&#xff1a;选择C。 main函数为C语言中整个工程的程序入…

ngnix的反向代理是什么?有什么作用?

1、Nginx的反向代理是什么&#xff1f; Nginx的反向代理是一种网络架构模式&#xff0c;其中Nginx服务器作为前端服务器&#xff0c;接收客户端的请求&#xff0c;然后将这些请求转发给后端服务器&#xff08;例如Java应用程序服务器&#xff09;。在这个过程中&#xff0c;客…

北京--面试1(设计模式、反射、队列、线程、锁、Linux命令、JVM调优参数)

1、写三个设计模式&#xff08;代码&#xff09; //单例懒汉模式&#xff1a;单例模式确保一个类只有一个实例&#xff0c;并提供一个全局访问点。在Java中&#xff0c;单例模式被广泛用于控制资源访问&#xff0c;配置管理器等场景。实现单例模式的方式包括懒汉式、饿汉式、双…

Leetcode56_合并区间

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数…

Stable Diffusion|Ai赋能电商 Inpaint Anything

1. 背景介绍 随着人工智能技术的不断发展&#xff0c;其在电商领域的应用也越来越广泛。其中&#xff0c;图像修复技术在电商领域有着重要的应用价值。例如&#xff0c;在商品图片处理中&#xff0c;去除图片中的水印、瑕疵等&#xff0c;可以提高商品图片的质量和美观度。 2…