Hybrid App（原生+H5）开发

介绍

市面上主流的hybrid app框架主要有

  • React Native：由FaceBook开发，使用JavaScript和React来构建原生应用程序
  • Flutter：由Google开发，使用Dart语言。Flutter使用自己的渲染引擎
  • Ionic：基于 Web 技术（HTML、CSS 和 JavaScript），使用 Angular 框架。Ionic 提供了一组 UI 组件和工具，使开发人员能够构建跨平台移动应用程序。

还有hybrid app框架，但是我本人没有进行过多的涉及，这里就不展开了，想要进一步了解的友友们可以自行查阅资料哈。我在这主要是想讲讲使用hybrid app开发时的一些使用方案，并且结合自己现在做的，总结一下自己的心得。

要解决的问题

  • web调用原生（实质是JavaScript调用Java）
  • 原生调用web（实质是Java调用Java）
  • 数据通道的搭建---性能及易用性

原生+webVview方案

这是最常用的Hybrid方案之一。应用的主要框架由原生代码构建，同时在应用的某些部分内嵌入WebView组件，用于显示Web页面加载Web应用。Web页面通过WebView运行，并可以与原生代码进行通信。通俗点来说，就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部分构成。混合开发是一种取长补短的开发模式，原生代码部分利用WebView插件或者其他框架为H5提供容器。

优点：

  1. 开发效率高，节约时间。同一套代码在Android和IOS上基本都可以使用
  2. 更新迭代以及部署比较方便，每次升级版本只需要在服务器端升级即可，不需要再上次App Store进行审核
  3. 代码维护方便，版本更新快，节约产品成本
  4. 基于web，但是同时也可用拥有原生支持的业务
  5. 可离线运行

缺点：

  1. 功能/界面无法自定：所有内容都是固定的，不能换界面或者增加功能
  2. 加载缓慢/网络要求高：混合APP数据需要全部从服务器获取，每个页面都需要重新加载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感

但是webview也是有一定的缺点的，即web应用的体验无法达到原生应用的体验。但是开发效率高，被很多app所用。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。这也是目前笔者开发团队中开发APP时最经常使用到的方案。

H5和原生如何交互的呢？

        H5与原生APP的交互指的是在原生APP中嵌入H5页面，是的用户可以在原生APP中直接访问H5页面并进行交互操作。H5与原生APP交互原理是通过webview实现的。那么webview又是什么呢？

webview

webview是Android和IOS系统中提供的一个组件，使得可以在原生APP中嵌入H5页面。webview可以加载HTML、CSS、JavaScript等web技术，同时也可以调用原生APP提供的API，实现与原生APP的交互

H5与原生交互方式

        在H5页面中，可以通过JavaScript调用原生提供的API，实现与原生的交互。原生APP需要提供一个JavaScriptBridge类，用来接收H5页面发来的请求，并执行相应的操作。

        我这里主要想讲一下如何应用第三方框架实现H5与原生之间的交互。目前比较流行的支持H5与原生App之间交互的框架有：WebViewJavaScriptBridge、JSBridge、HybridBridge等。这些框架都提供了API接口，方便H5页面与原生APP的交互，同时也提供了一些辅助功能，如：H5页面的路由跳转、原生APP的Toase提示、H5页面的Loading动画等。

        笔者主要是从事前端开发的，那么也就是在进行Hybrid APP开发时负责的是H5页面的开发，然后我们团队用到的实现与原生APP之间交互的第三方框架主要是dsBridge，所以接下来我也主要围绕dsBridge展开，讲述H5与原生交互的一些主流程以及实际应用。

DSBridge

介绍

  • 国内推出的JavaScript bridge跨平台混合开发框架
  • 官方提供了Android/ios版本，真正实现跨平台
  • DSBridge支持同步及异步调用（DSbridge是唯一一个支持同步调用的javascript bridge）
  • 无需iFrame，性能好
  • Github地址：
    • IOS：GitHub - wendux/DSBridge-IOS: :earth_asia: A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native.
    • Android：GitHub - wendux/DSBridge-Android: :earth_americas: A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native.

DSBridge的接入方式

原生端

  • 直接源码接入
    • 下载DSBridge源码，作为独立的Module接入工程
  • Gradle依赖
    • 配置Gradle脚本，Sync自动接入

H5端

  • npm进行下载：npm install dsbridge -g
  • cdn方式引入
  • 直接下载源码，放到指定的js文件中进行引入（后文会贴上dsBridge的源码）

H5与原生交互的核心

在web和原生之间进行交互，如传递数据，调用函数，那么其交互的核心就是要解决双方之间的通信问题，且其中分为H5调用原生提供好的接口，和原生调用H5注册好的方法。那么H5和原生之间是如何通信的呢？

H5调用原生

steps：

  1. 原生在webview上注册方法，以提供JavaScript调用
  2. H5初始化DSBridge上下文环境（H5便可以使用DSBridge提供的一些api方法）
  3. H5端使用dsBridge.call()直接调用原生端提供的方法

原生端调用H5端

steps：

  1. 前端注册注册JavaScript方法以供原生端使用
  2. 客户端获取DWebView实例（DWebView：其实dsBridge对webview只做了一层封装，提供了dsBridge特有的JavaScript到Java的能力）
  3. 客户端通过callHandler函数调用H5注册的JavaScript方法，并且传入一个回调函数。 

 同步调用及异步调用

原生端注册同步异步方法的方式

  • 同步调用：public object handler(object arg)
    • 参数arg是给H5回传的数据
  • 异步调用：public void handler(Object arg,CompletionHandler handler)
    • 参数arg是给H5回传的数据
    • handler是回调接口，在前端执行一定操作逻辑之后，通过handler去回调消息

原生提供给H5调用的方法

同步调用

1.原生端注册同步方法

注意点：

  • 原生端注册同步方法，参数msg必填，h5可以不传
  • 注解必须加上，h5端才能调用（dsbridge的一个安全措施）

 2.在指定url的webview页面注入刚才写好的提供给H5调用的方法，这个才能实现真正供H5调用

3.H5端进行调用

  • 初始化DSbridge（引入DSBridge）
  • 使用dsBridge.call('方法名',obj)    // obj是在指定方法中传给原生的参数 

效果（这里实例的是安卓应用）：

 

异步调用

 步骤跟同步调用大同小异，这里就不展开。但是需要注意的是，这里呀原生异步注册时和H5调用时区别

H5注册方法供原生调用

同步调用

1.前端注册同步方法

2.原生端调用H5注册的同步方法

逻辑梳理：

1.这里loadUrl指明了webview指定页面，点击指定元素触发onClick方法

2.方法中调用了callHandler方法调用了H5注册的toUpper方法，同时传入'hello'参数。

3.H5拿到参数之后，对其进行操作，这里是大小写转换，

4.H5将转换后的数据return给到原生端，原生端拿到retValue值进行一些其他操作（这里进行Toast）

异步调用

1.前端注册异步方法

2.原生端调用H5注册的异步方法

逻辑梳理：

1.前些步骤与同步调用一样

2.差异在于前端注册异步方法是没有传递其他参数，直接传一个回调函数，前端自行决定执行一些其他操作逻辑

总结：以上便是通过原生端和H5几个简单的例子说明H5是如何通过DSBridge实现与原生端的交互的。接下来我将从H5端实际项目出发，讲讲我在进行hybrid app开发时，是如何使用DSBridge实现与原生端的通信的。

项目中的应用

引入DSBridge

我在项目中使用的是直接下载源码，放在js文件中，然后再项目入口文件中进行初始化(便可以全局引用），当然也可以使用下载依赖的方式，然后再main.js文件中使用node模块进行require导入。

方式1：

安装

npm install dsbridge@3.1.4

引入：在文件夹src\utils\dsbridge.js中引入(这里可以做一层封装）

var dsBridge = require('dsbridge')
export default {
  callmethod (name, data, callback) {
    callback(dsBridge.call(name, data, callback))
  },
  registermethod (tag, callback) {
    dsBridge.register(tag, callback)
  }
}

方式2

安装

下载deBridge.js源码放在src\utils\dsbridge.js文件下

引人：在main.js文件中引入

import dsBridge form '../src/utils/dsbridge'

使用

定制协议

1.【通用】跳转新页面 / gotoPag

方法名：gotoPage

是否同步：同步

功能：原生端提供给 H5，用于页面跳转

参数：{ url: '' }

返回值：无

H5 示例：

let url = "http://192.168.150.148:8000/device/timer" + 
"?deviceId=" + devId;
dsBridge.call("gotoPage", { url: url })

 2.获取账户信息 / getAccountInfo

方法名：getAccountInfo

是否同步：同步

功能：获取家庭名称、设备名称信息

参数：无

返回值：homeName 【家庭名称】, homeTimezone【时区】

H5 示例：

let homeRes = dsBridge.call("getAccountInfo", {}); // 返回
{ homeName: "test", homeTimezone: 0 }

3.局域网下图片相对路径处理 / imgSrcBase64

方法名：imgSrcBase64

功能：H5 传回图片相对路径，原生对缓存图片进行 base64 处理

是否同步：异步

传参： { src：'' }

4.返回：base64 字符串 / imgSrcBase64CallBack

方法名：imgSrcBase64CallBack

是否同步：异步

功能：原生返回缓存图片的 base64 字符串

返回：base64 内容

注：原生端将缓存图片转 png 格式，再进行 base64 处理，返回 base64 字符串，H5 自 行拼接前缀：data:image/png;base64, 

调用原生注册的方法

一般在项目中需要调用到原生端注册的方法的业务方法，我会抽离到一个文件中集中管理。比如我将其放在utils/dsBridgeSend.js文件中

export default {
  /**
   * 定时界面跳转
   * */
  toTimePage(devId) {
    //  测试用
    let url = 'http://192.168.151.30:8001/device/timer' + '?deviceId=' + devId
    dsBridge.call('gotoPage', {
      url: url
    })
   }
  /**
   * 获取设备使能值信息
   * */
  getDevEnable() {
    dsBridge.call('getDevEnable', {})
  },
  /**
   * 导航栏配置公共方法
   * */
  pageBarSetting(devName) {
    let config = {
      hiddenBar: 0,
      title: devName,
      left: [
        {
          type: 2,
          localImageIndex: 7
        }
      ]
      right: [
        {
          type: 2,
          localImageIndex: 9
        }
      ]
     dsBridge.call('configTopBarWithParams', config)
  },
  /**
   * 调用后台接口通用方法-通过原生端
   * */
  requestFunction(ind, params) {
    let requestItem = requestItem.method,
      url: requestItem.url,
      callBackMethodName: requestItem.callBackMethodName,
      errorCallBackName: requestItem.errorCallBackName,
      params: params
    }
    dsBridge.call('requestFunction', query)
  },
}

注册方法以供原生调用

H5这边注册方法以供原生调用，  mounted() {
这个时机一般是发生在页面(或者说webview页面）加载时，所以一般是放在页面挂载的声明周期中【Vue2:mounted()，Vue3：onMounted()】

mounted(){
    let _this = this;
    dsBridge.registerAsyn("async", {
      tag: "async",
      queryDeviceInfoCallBack: function (response) {
        if (_this.$dsBridgeSend.handleError(response)){
          const res = JSON.parse(response).result;
          //  解析状态值
          _this.setStatus(res.status);
        }
      },
      ctrlSucCallBack: function (response) {
        const res = JSON.parse(response)
        // 接收相同的deviceId才进行处理返回值
        if (_this.$common.matchDeviceId(response, _this.commonObj.deviceId)) {
          // 发送指令后 - 获取返回值
          _this.changeIdList.map((i) => {
            i.changeId++;
            _this.updateStatus(res.deviceStates)
        }
      },
      left_0_click: function (responseCallback) {
        dsBridge.call("goBack", 4, function () {}
        responseCallback();
      },
      right_0_click: function (responseCallback) {
        if (Number(_this.isEdit) === 1) {
          _this.deleteContact()
        } else {
          _this.addContact()
        }
        responseCallback();
      },
    });
  },

总结:

混合开发的一个主要流程：

1.根据需求规划，哪些业务是H5负责，哪些是原生端负责

2.定制一份约束双端的协议以用来对应方法的一一对应性（什么方法做什么事，参数、方法名、同步异步）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/116335.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

网络安全（网络安全）小白自学

网络安全（网络安全）小白自学

想自学网络安全（黑客技术）首先你得了解什么是网络安全！什么是黑客！ 网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全…
阅读更多...
一、Hadoop初始化配置(final+ubuntu保姆级教程)

一、Hadoop初始化配置(final+ubuntu保姆级教程)

1、配置虚拟机 三台虚拟机，分别为node1、node2、node3，内存分别为4G、2G、2G，现存最好为（>40G），如下： 2、修改主机名 分别打开三台虚拟机，root用户输入一下命令： no…
阅读更多...
蓝桥杯官网填空题（方格填数）

蓝桥杯官网填空题（方格填数）

题目描述 本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。 在 2 行 5 列的格子中填入 1 到 10 的数字。 要求： 相邻的格子中的数，右边的大于左边的，下边的大于上边的。 如下图所示的 …
阅读更多...
鸿蒙LiteOs读源码教程+向LiteOS中添加一个简单的基于线程运行时的短作业优先调度策略

鸿蒙LiteOs读源码教程+向LiteOS中添加一个简单的基于线程运行时的短作业优先调度策略

一、鸿蒙Liteos读源码教程 鸿蒙的源码是放在openharmony文件夹下，openharmony下的kernel文件夹存放操作系统内核的相关代码和实现。 内核是操作系统的核心部分，所以像负责：资源管理、任务调度、内存管理、设备驱动、进程通信的源码都可以在…
阅读更多...
Qt学习：图形视图框架的使用

Qt学习：图形视图框架的使用

文章目录 前言一、场景、视图和图形项的介绍二、图形视图框架的坐标系统三、图形视图框架的事件处理四、示例完整代码五、QtCreator官方示例总结 前言 近期重温了一下Qt中的图形视图框架，这里将所学习的内容进行记录总结。这个框架提供了一个基于图形项的模型视图编…
阅读更多...
MySQL InnoDB数据存储结构

MySQL InnoDB数据存储结构

1. 数据库的存储结构：页 索引结构给我们提供了高效的索引方式，不过索引信息以及数据记录都是保存在文件上的，确切说是存储在页结构中。另一方面，索引是在存储引擎中实现的，MySQL服务器上的存储引擎负责对表中数据的读…
阅读更多...
【漏洞复现】Fastjson_1.2.47_rce

【漏洞复现】Fastjson_1.2.47_rce

感谢互联网提供分享知识与智慧，在法治的社会里，请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞检测3、漏洞验证 1.5、深度利用1、反弹Shell 说明内容漏洞编号漏洞名称Fastjson_1.2.47_远程执行漏…
阅读更多...
【HarmonyOS】服务卡片 API6 JSUI跳转不同页面并携带参数

【HarmonyOS】服务卡片 API6 JSUI跳转不同页面并携带参数

【关键字】 服务卡片、卡片跳转不同页面、卡片跳转页面携带参数 【写在前面】 本篇文章主要介绍开发服务卡片时，如何实现卡片点击跳转不同页面，并携带动态参数到js页面。在此篇文章“服务卡片 API6 JSUI跳转不同页面”中说明了如果跳转不同页面&#xf…
阅读更多...
Py之auto-gptq：auto-gptq的简介、安装、使用方法之详细攻略

Py之auto-gptq：auto-gptq的简介、安装、使用方法之详细攻略

Py之auto-gptq：auto-gptq的简介、安装、使用方法之详细攻略 目录 auto-gptq的简介 1、版本更新历史 2、性能对比 推理速度 困惑度（PPL） 3、支持的模型 3、支持的评估任务 auto-gptq的安装 auto-gptq的使用方法 1、基础用法 (1)、量…
阅读更多...
2023-11-04：用go语言，如果n = 1，打印 1*** 如果n = 2，打印 1*** 3*** 2*** 如果n = 3，打印

2023-11-04：用go语言，如果n = 1，打印 1*** 如果n = 2，打印 1*** 3*** 2*** 如果n = 3，打印

2023-11-04：用go语言，如果n 1，打印 1*** 如果n 2，打印 1***3*** 2*** 如果n 3，打印 1***3*** 2***4*** 5*** 6*** 如果n 4，打印 1***3*** 2***4*** 5*** 6***10** 9*** 8*** 7*** 输入…
阅读更多...
立创eda专业版学习笔记（8）（运行模式）

立创eda专业版学习笔记（8）（运行模式）

以前没注意过这个问题，我有2台电脑，都能登录eda专业版，但是一台是全在线模式，另外一台是半离线模式，虽然是同一个账号，但是打开里面的工程会发现，两边的工程完全不同，因为一台的工程…
阅读更多...
shell script 的默认变量$0,$1,$2...，参数偏移的shift

shell script 的默认变量$0,$1,$2...，参数偏移的shift

简单来说，在scirpt脚本里面，$0表示文件名，$1表示第一个参数，以此类推，还有 $# 后面接参数的个数 $ 代表"$1","$2","$3"，每个都是独立的，用双引号括起来 $* 代…
阅读更多...
APP攻防--ADB基础

APP攻防--ADB基础

进入app包 先使用 adb devices查看链接状态 手机连接成功的 adb shell 获取到手机的一个shell 此时想进入app包时没有权限的，APP包一般在data/data/下。没有执行权限，如图 Permission denied 权限被拒绝 此时需要手机root，root后输入 su …
阅读更多...
Dual Personalization on Federated Recommendation

Dual Personalization on Federated Recommendation

联合推荐的双重个性化 代码链接 论文链接 主要创新 文章的主要创新是提出了一种双重个性化机制，用于增强联邦推荐系统的性能。这种机制能够在联邦学习框架中为每个本地模型学习用户特定的物品嵌入，从而显著提升推荐系统的效果。通过在四个数据集上进行…
阅读更多...
FreeRTOS-定时器\二值信号互斥信号\事件组

FreeRTOS-定时器\二值信号互斥信号\事件组

FreeRTOS整体知识框架可以参考下文: FreeRTOS整体知识框架 一. FreeRTOS定时器 FreeRTOS定时器 博文路径 FreeRTOS提供了一种软件定时器，用来快速实现一些周期性的操作，并且节约了硬件定时器。不过尽量还是不要做过多的操作，以免影响其他…
阅读更多...
office2024下载详细安装教程

office2024下载详细安装教程

简单的说 Office 是一款由Microsoft 开发的一套办公软件，里面包含了常用的办公组件而其中就包含了Word、Excel、PowerPoint、Access等！ 并且office是目前最常用的一类办公软件，使用它可以解决日常生活和工作中遇到的很多问题。 熟练掌握offi…
阅读更多...
【信息安全原理】——IP及路由安全（学习笔记）

【信息安全原理】——IP及路由安全（学习笔记）

目录 🕒 1. IPv4协议及其安全性分析🕒 2. IPsec（IP Security）🕘 2.1 IPsec安全策略🕤 2.1.1 安全关联（Security Association, SA）🕤 2.1.2 安全策略（Security…
阅读更多...
【lvgl】linux开发板搭建环境

【lvgl】linux开发板搭建环境

前言 本章介绍如何在linux开发板准备好了fb0的情况下移植lvgl。 抓取源码 git clone https://github.com/lvgl/lvgl.git git clone https://github.com/lvgl/lv_drivers.git git clone https://github.com/lvgl/lv_demos.git git clone https://github.com/lvgl/lv_port_lin…
阅读更多...
【教3妹学编程-算法题】使数组变美的最小增量运算数

【教3妹学编程-算法题】使数组变美的最小增量运算数

2哥 : 3妹，脸上的豆豆好了没呢。 3妹：好啦，现在已经没啦 2哥 : 跟你说很快就会消下去的，还不信~ 既然你的容颜和心情都如此美丽，那我们就再做一道关于美丽的题吧。 3妹：切，2哥就会取笑我&#x…
阅读更多...
搬家两年随笔

搬家两年随笔

不知不觉中，我已经搬到这个地方两年多了。 回首这段时间，我感触颇深。 尽管这里地理位置较为偏僻，交通不是特别方便，但环境优美，绿树成荫，空气清新。 只是相对于之前的生活环境，这里离上班的地方…
阅读更多...
最新文章

Copyright @ 2022~2023