六虎

LightWebviewBridge-使用篇

作者：

四次元口袋

在

LightWebviewBridge-运用篇

介绍

LightWebviewBridge定位为一个轻量级、小而美的Hybrid混合APP解决方案工具，帮助开发者快速完结H5APP或内嵌H5界面功用，只聚焦于事务功用开发，而不用重视H5和Native的通讯完结，便可快速完结相应事务功用，达到相似小程序、大众号的作用；

开源库链接

作用

demo

解决方案

目前市面上渠道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)

后记

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

假如我们觉得有用，请重视GitHub或码云，欢迎我们留言，谢谢！

更多文章