JsBridge实现

一、前言

根据业务需求很多app都会涉及到原生和H5的结合,加上手机性能越来越好,H5的性能和体验的劣势已经不再那么明显,混合式开发早已漫山遍野。怎按耐不住,探索探索...

学习知识点:

html + css + java基础知识

angularJs基础框架、前端构建打包脚本gulp

实现目标:

使用angularJs框架编写应用详情页H5(应用详情、评论、评论上拉加载更多、回复等功能)

编写通用H5与Android交互框架JsWebView

编写Sample实现各种场景下的与JS交互,并实现手机端通过H5与本地数据交互展示应用详情页

二、前端知识

1.h5基础知识的学习

html + css + java 这些都是大家所熟知的前端基础知识点,可以在下面两个网站系统的学习和查阅前端相关的所有基础知识点http://www.w3school.com.cn/http://www.runoob.com/

2.前端框架AngularJs

前端框架(UI框架、JS框架)有很多,一般它包含了HTML 元素、CSS 组件、JS函数等一系列实现好的通用效果和功能,如bootstrap、jquery等。

针对移动端只适合一些体积小功能全的框架,比如zepto.js、angular.js,这里我选择了学习AngularJs1.0。http://www.runoob.com/angularjs/angularjs-tutorial.html

3.自动化构建工具gulp

在我们编写好H5后,发布的时候我们需要将html\js\css\img等资源文件进行压缩合并优化等操作,这个时候就体现了gulp的作用,可以理解成gradle的角色http://www.gulpjs.com.cn/http://www.tuicool.com/articles/Uzq6Fr

三、 JsBridge实现

场景一:JS调用Java

我们知道Android与JS交互会通常会使用addJavaInterface的方式,通过向Js中注入全局java对象,从而操作java,这种方式比较方便且直观。

但是存在着一个安全问题,大概就是js可以通过注入的Java对象反射得到Runtime等Android系统对象,从而做其它的事情。

在4.2及以上Android修复了这个问题,在注入的对象的java方法前加上 @JavaInterface注解,才能被JS调用。

通常在4.2以下,我们采用js执行prompt方法时,会回调WebChromeClient的onJsPrompt方法来实现JS调用Java层代码。

这两种方式都只能得到Java方法同步返回值,如果是Java层异步操作,则只能通过阻塞的方式返回,因为JS是单线程,所以这样会导致做其他操作时,页面卡顿的问题。

场景二:Java调用JS

通常我们会通过WebView的loadUrl("java:")的方式去调用JS方法,但这种方式无法得到JS方法的返回值。

我们可以通过WebView的evaluateJava方法调用JS,然后通过设置的callback得到返回值,但是这种方法在Android4.4及以上版本才有。

所以考虑兼容问题,我们还是无法直接得到JS方法的返回值

由上面两种场景,得到如下三个问题:

问题一:JS调用Java的方式,考虑兼容问题后,步骤繁琐,且Java和JS代码都很臃肿

问题二:JS调用Java方法无法异步返回结果

问题三:Java调用JS,考虑兼容问题,无法直接得到JS方法的返回值

实现JsBridge,解决上面三个问题

1. Js调用Java,并统一调用方式

因为直接操作注入Java对象的方法是最方便和直观的,所以这里也模拟这种方式去实现。

Java端注入Java对象到JS的方法 addJsInterface,将对象实例保存在jsInterfaces中

Java层的callNativeMethod方法的实现(当传递function时异步返回,不传时异步返回,返回值均为String类型)

实现后的使用方式如下:

2. Java调用Js

文/Mob开发者平台 Android开发专家 吴文军

Mob 一直秉承全心全意为移动开发者服务的宗旨,专注于提供专业优质的服务,愿与开发者共同成长。

ShareSDK 轻松实现社会化功能,以其强大的 App 社交分享功能深受开发者熟知和好评;

SMSSDK 可快速集成短信验证功能,帮助开发者打通手机通讯录好友的社交圈;

ShareREC 手游录像分享则是 ShareSDK 图文分享的延伸,可为手游实现边玩边录的功能,以此提升玩家黏度并有效促进推广;

MobLink 打破了 App 孤岛,实现了 Web 与 App 的无缝链接,新用户在首次打开 App 时,大大提高用户转化率;

BBSSDK 是 Discuz 论坛移动化解决方案,同步 Discuz 论坛数据实现论坛移动化;

MobAPI 为开发者提供各种所需的原始数据及稳定的 API SERVICE,也免去了自己收集数据的繁琐步骤;

MobPush 快速集成推送服务,应对多样化推送场景;

MobPay 多种主流支付渠道可一键接入,满足企业多样化需求;

ShopSDK 2小时快速搭建您的商城系统,商品管理 - 订单交易 - 售后退款 - 整套解决方案,丰富您APP的应用场景;

Mob统计分析 用数据驱动产品,精准化行为分析 + 多维数据模型 + 匹配全网标签 + 垂直行业分析顾问;

截止 2017 年 12 月,Mob 开发者服务平台全球设备覆盖已经 74 亿,其中海外市场占比约 30%,服务超过 36 万款移动应用,设备覆盖行业第一。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180104A0B6UF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券