【QCon】精华内容上线92%,全面覆盖“人工智能+”的典型案例!>>> 了解详情
写点什么

安卓跨平台开发实践

  • 2020-02-12
  • 本文字数:3588 字

    阅读完需:约 12 分钟

安卓跨平台开发实践

移动端目前市面上主流的平台主要有 Android 和 IOS 两大平台,为了尽可能复用代码和节省开发成本,各大巨头都开发了自己的跨平台框架,比如 Facebook 的 React-Native,阿里的 Weex,Cordova,以及今年 Google 开发者大会上介绍的 Flutter 框架。这些框架各有优缺点,但是到目前为止都没有大规模的推广开来,在我看来主要有一下几个原因:


1、开发者生态圈还不够成熟,RN 是三大跨平台框架关注人最多,生态最活跃的框架, 但是到目前为止也没有到 1.0 版本(最新的 release 是 0.57.8),更别说后来者的 Weex 和 Flutter 了。生态不成熟,意味着开发文档少,可以使用的开源控件少,比如在 RN 上想做一个最基本的下拉刷新和上拉加载更多的 listview 都比较费劲。Weex 已经贡献给 Apache,已经很久没有更新 release 了。Flutter 现在还在 beta 版本,其发展还有待观察。


2、性能问题,虽然这几大框架都对渲染性能做了优化,但是相比原生还是差一些,RN 和 weex 都自己实现来了一个浏览器内核(JSCore),因此多了一层 js 解析,渲染会慢一些。比如 RN 的 listview 如果数据量太大就会出现卡顿。Flutter 虽然自带绘制引擎,但是跟原生比起来还是有一些距离。


3、兼容问题,虽然这三大平台的初衷都是为了跨平台(Write/Learn once, run everywhere),但是实际应用中还是需要耗费很多的精力去兼容和适配,比如 RN 在 Android 低端机器上表现就不尽如人意,连曾经 RN 的坚实拥护者 Airbnb 都宣布放弃使用 RN 了。


4、开发集成成本,三个框架都需要学习新的语言 React,vue,dart,weex 的最大优势就是入门简单,但是版本迭代慢,RN 上手门槛高,开发调试难度大,集成 RN 和 weex 框架还会加入很多 so 文件,增加安装包的大小至少在 10M 左右,这还不包括第三方的 library。Flutter 因为刚出来,应用的还不多,其效果还有待观察。


但是移动开发的跨平台是大势所趋,可以节省开发成本,提高开发效率,迅速响应业务变化,现在主流的应用还是使用 H5 和原生的通信来实现跨平台的开发。Android 和 IOS 平台都有自己内置的浏览器内核 webkit 框架,跨平台的本质就是用 H5/JS 编写的代码能够分别运行在 Android 和 IOS 的 WebView 中,从而实现了一套代码两个平台都能运行的目的。


1547108123246047167.png


在 Android 平台上要实现 Native 和 JS 的通信主要通过 WebViewClient 和 WebChromeClient 两个类来实现。WebViewClient 的作用是帮助 WebView 处理各种通知,事件请求,其主要的方法有:onLoadResource,onPageStart,onPageFinished,onReceiveError,shouldOverrideUrlLoading 等方法;WebChromeClient 处理 JS 页面的事件响应,比如网页中的对话框,网页图标,网站标题,网页的加载进度等事件,对应的响应方法有 onJsAlert, onJsConfirm, onJsConsole, onProgressChanged, onReceiveIcon, onReceiveTitle 等。


要实现 Java 和 JS 通信就要:


1,解决 Java 调 JS;


2,JS 调 Java。


Java 调用 JS 通过 loadUrl 和 evaluateJavaScript 两个方法。


通过 webview.loadUrl(“javascript:alert(‘hello world’)”),可以在 android 平台将 js 代码注入到 html 页面,loadUrl 方法可以直接调用 js 中定义的函数,也可以把 android 本地的 assets 目录下的 js 文件以字符串的形式注入到 html 页面中,但是这个注入时机一定要等到 html 页面加载完毕才能做,即在 WebViewClient.onPageFinished 的回调函数中调用,这样就相当于在 html 页面中直接引用了 js 资源文件。对于客户端来说,java 调用 js 本质上是拼接 js 字符串的过程,但是调用 loadUrl 不能直接获取 js 函数的返回值。要实现 Java 调用 js 函数后,可以获取 js 函数的返回值可以使用 webview.evaluateJavaScript 方法,但是该方法只有在 android4.4 及以上的版本才可以使用。其他用法和 loadUrl 一致。


JS 调用 Java 可以分为三种:1,对象映射;2,URL 拦截;3,JS 方法拦截。


对象映射是通过 webview.addJavascriptInterface(new JSObject(), “javaObject”),这样可以 js 代码中可以直接调用 javaObject 对象,从而实现 JS 调用 Java 的功能,但是这个方法在 android4.2 以下会有安全漏洞,利用反射机制调用 Android API getRuntime 执行 shell 命令进行攻击,比如遍历 sdcard,发送短信,安装木马 APK 等。


URL 拦截是指在 html 页面通过 iframe.src,window.open,documention.location 或者 href,这四种方法都可以在 html 页面中打开一个连接,从而会触发 Java 中的 WebViewClient.shouldOverrideUrlLoading 方法。例如在 js 中执行


1547108153585008923.png


在 shouldOverrrideUrlLoading 中可以根据约定的协议格式(Scheme)和协议名(Authority)获取从 JS 中传输过来的数据(Data)。


在 JS 中调用 alert,console,prompt,confirm 等方法就会触发 WebChromeClient 的 onJsAlert,onConsoleMessage,onJsPrompt,onJsConfirm 方法的回调。比如在 js 中可以调用


1547108181168094048.png


在 onJsPrompt 的 message 中可以获取 prompt 的内容,然后根据约定的协议格式可以获取数据。


为了解决 JS 和 Native 的通信问题,需要使用一个 JSBridge 框架(https://github.com/lzyzsd/JsBridge)用来负责H5和Java之间的通信,需要解决的问题:


1、JS 互相 Java 调用后如何回调,将 responseData 传递回去;


2,JS 调用 Java 有三种方法,如果选择哪一种方法比较合适。


针对问题 1,可以在 java 端和 js 端定义一个数据结构: Message={callbackId:xxx, handleName:xxx,responseData:xxx,responseId:xxx}。将回调函数保存在 callbackId 中,当 JS 或者 Java 处理完数据回调的时候再讲保存在 callbackId 的回调函数存放在 responseId,相应的回调的数据存放在 responseData 中,这样就能响应 JS 或者 Java 调用后的回调消息。


Js 调用 Java 的方法虽然有三种,但是 addJavaScriptInterface 存在安全性问题一般不建议使用,JS 中的 alert,console 方法都会在 Html 页面比较常用,confirm 和 prompt 虽然不常用但是某些手机系统版本上会有对话框弹出,不通用,所以比较好的选择是 url 拦截,可以通过 iframe.src 触发 shouldOverrideUrlLoading。


JsBridge 框架的使用主要分为:


1,在 H5 页面加载完毕注入一个本地的 js 文件;


2,Java 代码中注册 BridgeHandler,用来处理 JS 发送过来的消息;


3,在本地注入的 js 文件中定义_handleMessageFromNative,用来接收 java 传递过来的消息;


4,因为客户端注入 js 是异步的,所以需要在 js 文件中注册 Event 监听器,成功后通知 H5。


Native 调用 JS,例如通过


col 1col 2


1


2


3


4 | webview.loadUrl(


"javascript:WebViewJavascriptBridge._handleMessageFromNative('{


\"callbackId\":\"JAVA_CB_2_559\",\"data\":\"just data from java\"


}')");


这样就可以调用 JS 的 handleMessageFromNative 方法,传递的数据格式是 Message,callBackId 响应 js 的回调,发送前会存储到 HashMap 中,js 回调的时候根据 JAVA_CB_2_559 找到对应的的回调函数处理 js 的响应数据,具体流程如下:


1547108235710003647.jpg


Js 调用 Java,通过 sendMessageQueue 将传递的信息转换成


col 1col 2
1Message= {data: {…}, callbackId: ``"cb_1_1234"``}


其中 callbackId 是 js 的回调函数。然后通过


col 1col 2
1iframe.src=’yy:``//return/_fetchQueue/[{"data":"xxxx","callbackId":"cb_1_4321"}]’,


触发 shouldOverrideUrlLoading 方法,java 处理完 js 传递过来的 data 后,将回调函数 cb_1_4321 设置到


col 1col 2
1Message={responseId: cb_1_4321, responseData:XXX},


这样在 js 中就能处理回调函数。具体的流程图如下:


1547108327553011057.jpg


JsBridge 框架提供两种 Handler 方法,registerHandler 方法需要传入 handler 的名字,这样需要 IOS,Android,H5 三方约定这个名字,因为 H5 开发的的业务需求变化比较快,而且 H5 调用原生的方法也是随机的,所以每次都用 registerHandler 约定名字需要使用全局变量存放这些 handler 方法名不便于扩展,所以实际开发中使用 defaultHanlder,H5 调用原生方法的的时候约定一个 cmd,即约定 data={cmd:xxx,time:data:{…}},只要在原生代码中对 cmd 命令有对应的功能,那么 H5 页面就可以随时调用原生的方法。


JSBridge 的改进建议,由于 webview 调用 js 方法的时候必须在主线程才能生效,所以偶然会出现 java 调用 js 失败。另外,Js 调用 Java 偶尔也会失败,因为 iframe 机制不能保证每次都能触发 shouldOverrideUrlLoading 回调。目前 JSBridge 采用的是 url scheme 的方式,如果不考虑 Android4.2 以下,IOS7 以下,可以采用的交互,比如直接使用 addJavaScriptInterface 在 JS 页面注入一个 Native 对象,将之前触发 u 步骤变为使用这个 Native 对象向 Native 发送消息。这种方法只是一个可行的方案,实际使用过程中目前的 JSBridge 方案基本上满足业务需求了。


本文转载自宜信技术学院网站。


原文链接:http://college.creditease.cn/detail/211


2020-02-12 15:26527

评论

发布
暂无评论
发现更多内容

接口测试快速入门-1

度假的小鱼

接口测试 11月月更

【愚公系列】2022年12月 微信小程序-页面栈和页面路由

愚公搬代码

12月月更

华为自研分布式时序数据库集群:初始GaussDB(for Influx)

清欢科技

架构实战营 1-3 面向复杂度架构设计随堂测验

西山薄凉

Zig语言初探

Yuet

移动开发跨平台框架,你了解多少?

FinClip

04 Redis sentinel 模式存储试卷

神奇的叶叔叔

测试如何发展副业,提升斜杠收入

老张

码农副业 斜杠

一文了解 Go 方法

陈明勇

Go golang 方法

深入浅出Seata的AT模式

Java 架构

2022-12-01:从不订购的客户。找出所有从不订购任何东西的客户,以下数据的答案输出是Henry和Max,sql语句如何写? DROP TABLE IF EXISTS `customers`; C

福大大架构师每日一题

数据库 福大大

WeLink互动直播:维护网课秩序,杜绝外人乱入

与时俱进的时代

App长登录思考与实现

石君

信息安全 APP开发 认证

Web Development Technology Trends for 2023

Mahipal_Nehra

UI UX AI Codec Metaverse

50亿海量数据如何高效存储和分析? 华为云数据库GaussDB (for Cassandra) 3个秘诀搞定

IT科技苏辞

极客时间运维进阶训练营第四周作业

LiaoWD

pipeline SonarQube jenkins高级用法

Flink on Yarn三部曲之一:准备工作

程序员欣宸

大数据 flink hadoop YARN 12月月更

小令观点 | 不希望我的身份被别人冒用,该怎么办呢?

令牌云数字身份

网络安全 人脸识别 芯片技术

国产自研、安全、高可用——袋鼠云大数据基础平台EasyMR筑基企业数字化转型

袋鼠云数栈

大数据 hadoop 数据中台 基础数据平台 12 月 PK 榜

火山引擎边缘云荣获2022全球分布式云大会两项大奖

火山引擎边缘云

云原生 边缘计算 边缘云 火山引擎边缘计算

华为云数据库GaussDB(for Influx)与开源企业版性能对比

清欢科技

常用的十大Python开发工具

千锋IT教育

华为云数据库GaussDB(for Cassandra)揭秘:内存异常增长的排查经历

科技说

架构实战营 1-1 架构概念随堂测验

西山薄凉

「架构实战营」

架构实战营 1-2 架构图随堂测验

西山薄凉

「架构实战营」

架构实战营 1-4 架构设计三原则随堂测验

西山薄凉

照亮无尽前沿之路:华为正成为科技灯塔的守护者

脑极体

华为云数据库GaussDB(for Cassandra)揭秘:高性能低成本是什么样的体验?

科技说

华为云数据库GaussDB (for Cassandra) 数据库治理 -- 大key与热key问题的检测与解决

IT科技苏辞

架构解析:Dubbo3 应用级服务发现如何应对双11百万集群实例

Apache Dubbo

Java 开源 微服务 dubbo

架构实战营模块 7 作业

陌生流云

架构实战营

安卓跨平台开发实践_文化 & 方法_周智_InfoQ精选文章