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 万款移动应用，设备覆盖行业第一。