LightWebviewBridge-使用篇

介绍

LightWebviewBridge定位为一个轻量级、小而美的Hybrid混合APP解决方案工具，帮助开发者快速实现H5APP或内嵌H5界面功能，只聚焦于业务功能开发，而不用关注H5和Native的通信实现，便可快速实现相应业务功能，达到类似小程序、公众号的效果；

开源库链接

效果

解决方案

目前市面上平台APP中的H5应用(如小程序、快应用、流应用...)，这类程序或应用的概念的实现大都是围绕WebView而开展，实现H5与Native的通信能力，可能各自的具体细节和标准不同。

如果只需要实现H5调用原生能力，比如小程序的秒开、扫码获取信息、分享链接获取应用等众多场景，目前主流的方案要么过大，得深度集成；要么只是一个实现介绍，具体得自己从头实现，而与业务侧深度绑定；

有没有一个即能快速集成，又将H5-Native通信的能力封装完成，而让开发者只轻松地关注业务实现，同时将公用能力模块化，LightWebviewBridge正是出于这个目的而诞生。

使用详解-基础场景

文字介绍得比较详细，尽量让闭环流程中的每个细节都解释到位，实际开发中代码比较少。

初始化

将框架上下文对象BridgeContext和webview(案列中是BaseWebView)绑定。

scss 复制代码

 WebViewBridge.initJsInterface(bridgeContext,mWebview)

场景-创建二维码

这是一个典型且常用的业务场景，实现如何从H5输入数据，通过原生实现，再返回H5执行的过程。

1.Native端：

kotlin 复制代码

 class Qr : NativeFunc{    
     fun createQr(data : String){
         val bitmap = CodeUtils.createQRCode(data,600)
         val bytes = ConvertUtils.bitmap2Bytes(bitmap)
         val base64 = EncodeUtils.base64Encode2String(bytes)
         callbackToJS(base64)
     }
 }

类：Qr；继承NativeFunc。
方法：createQr；与类一起配置到bridgeConfig.json。
方法参数：data : String；从H5端的API中传入，数据格式根据业务功能约定。
回调方法：callbackToJS；固定API，实现从Native端将数据返回给H5。
回调方法参数：base64：String；从Native端返回，数据格式根据业务功能约定。

2.配置

文件bridgeConfig.json，位于assets目录下

json 复制代码

 {
   "functions": {
     ...
     "createQr": {
       "methodName": "createQr",
       "className": "com.rj.lightwebviewbridge.functions.Qr"
     },
     ...
   }
 }

"createQr":调用原生能力的唯一ID
"methodName"：方法名
"className"：类名(包路径)

3.H5调用

javascript 复制代码

     function createQr(){
         let data = document.getElementById("qrData").value
         callToNative("createQr",data,function (response) {
             document.getElementById("qrImg").src = "data:image/jpeg;base64," + response
         })
     }

callToNative：API，调用原生能力，与Native通信；三个参数，即请求体(Request)3元素。
"createQr"(必填)：3元素之一，原生能力的唯一ID，与bridgeConfig.json中配置对应。
data(可选)：3元素之二，传给Native端的数据，与Native中的 **方法参数*data对应。
function(可选) ：3元素之三，JS回调函数，接收Native端的回调数据再执行。
response：Native端的返回的业务数据，对应Native中的回调方法参数base64。

使用-进阶

场景-扫码

借助相机扫码二维码、条形码等，然后将数据返回给H5再处理。其中相机能力H5端是无法实现的。

流程过程与创建二维码是一样的，在调用Native、config配置、回调函数、数据传输等环节在框架里完全相同。唯一不同点是扫码调用了另外的原生界面，如果新增一个步骤。

需要通过ActivityStarter+LifecycleObserver，将唤起能力放入scanQR方法中，代码如下：

kotlin 复制代码

 fun scanQR(){
 toScan()
 }
 
 private fun toScan(){
         val intent = Intent(context.getContext(),FullScreenQRCodeScanActivity::class.java)
         scanStarter = context.getActivityStarter("scanQr")!!
         scanStarter.startActivity(intent){
                 result: ActivityResult ->
             if (result.resultCode == Activity.RESULT_OK) {
                 val intent = result.data
                 val result = intent!!.getStringExtra(CameraScan.SCAN_RESULT)
                 callbackToJS(result)
             }
         }
 
     }

在加载WebView的上下文对象(Activity|Fragment)中初始化添加

kotlin 复制代码

 bridgeContext = BridgeContext(this.requireActivity())
 
 val scanObserver = ScanObserver(this.requireActivity().activityResultRegistry)
 lifecycle.addObserver(scanObserver)
 bridgeContext.addActivityStarter("scanQr",scanObserver)

后记

H5的资源可以放在本地，也可以部署到服务器；本地的效果就类似小程序，秒开；远端的效果是类似公众号，需要加载。

如果大家觉得有用，请关注GitHub或码云，欢迎大家留言，谢谢！