LightWebviewBridge-使用篇

最新推荐文章于 2024-10-10 15:47:02 发布

larry_jay

最新推荐文章于 2024-10-10 15:47:02 发布

阅读量43

点赞数

文章标签： java 前端小程序微信小程序 kotlin

本文链接：https://blog.csdn.net/larry_jay/article/details/132634851

版权

文章目录

LightWebviewBridge-使用篇

LightWebviewBridge-使用篇

介绍

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

开源库链接

效果

解决方案

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

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

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

使用详解-基础场景

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

初始化

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

WebViewBridge.initJsInterface(bridgeContext,mWebview)

场景-创建二维码

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

1.Native端：

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目录下

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

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

3.H5调用

    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方法中，代码如下：

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)中初始化添加

bridgeContext = BridgeContext(this.requireActivity())

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