写点什么

安卓跨平台开发实践

  • 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:26627

评论

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

前端开发培训机构怎么样

小谷哥

openGauss都做了哪些算子优化工作?

openGauss

盘点 8 款好用的 API 接口文档管理工具

Liam

程序员 接口文档 API 接口规范 接口编写

车企外卷:一个关于智能手机的“围城故事”

脑极体

手机 车企

华中科技大学网络空间安全学院正式加入openGauss社区

openGauss

openGauss 5.0.0版本正式发布!

openGauss

5 分钟带你小程序入门 [实战总结分享]

程序员海军

小程序 微信小程序 前端 三周年连更

达观助手AI写作下载安装教程及特色功能详解,速速收藏体验!

NLP资深玩家

devops|中小公司不要做研发效能度量

laofo

DevOps 研发效能 效能度量 DevOps工具链 研发效能度量

【坚果派-坚果】获取OpenHarmony 3.2 Release源码的两种方式

坚果

HarmonyOS OpenHarmony OpenHarmony3.2 三周年连更

别再吐槽公厕了!杭州智慧公厕解决方案带来惊喜

光明源智慧厕所

智慧城市

Node.js实现JWT应用到服务器

格斗家不爱在外太空沉思

node.js 三周年连更

zookeeper的节点加密方式及分布式锁实现过程

浅羽技术

三周年连更

一文读懂封装

断墨寻径

#java 三周年征文

对话ChatGPT:Prompt是普通人“魔法”吗?

Alter

除了价格降70%,关于对象存储预留空间你还需要了解这些

云布道师

云存储

一文读懂Annotation

老周聊架构

三周年连更

软件测试/测试开发丨基于 JMeter 完成 Dubbo 接口的测试

测试人

dubbo 软件测试 Jmeter 自动化测试 测试开发

加速文件传输协议如何工作

镭速

大数据学习培训机构该怎么去选择

小谷哥

MobTech ShareSDK|如何从分享到回流

MobTech袤博科技

HuggingGPT 强势来袭,LLM+ 专家模型,迈向更通用的AI

Zilliz

Zilliz Towhee ChatGPT LLM huggingface

一文读懂域名注册

火山引擎边缘云

证书 域名 域名服务器

江苏智慧公厕:让厕所成为城市新名片

光明源智慧厕所

智慧园区

慌了?ChatGPT吃我的饭,还要掀我碗

引迈信息

AI 低代码 ChatGPT JNPF

云原生时代全链路观测体系构建

嘉为蓝鲸

vue3 +ts 如何安装封装axios

肥晨

Vue3 三周年连更

全球首个完全开源的指令跟随大模型;T5到GPT-4最全盘点

OneFlow

openGauss社区三月运作报告

openGauss

DevOps系列之 —— 持续规划与设计(三)敏捷项目管理的方法【Kanban 与 Scrum】

若尘

DevOps #DevOps 三周年连更

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