Hybrid App(原生+H5)开发

这篇具有很好参考价值的文章主要介绍了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调用原生

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

steps:

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

原生端调用H5端

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

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的一个安全措施)

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

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

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

3.H5端进行调用

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

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

效果(这里实例的是安卓应用):

 Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

异步调用

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

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

H5注册方法供原生调用

同步调用

1.前端注册同步方法

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

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

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

逻辑梳理:

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

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

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

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

异步调用

1.前端注册异步方法

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

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

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application

逻辑梳理:

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.定制一份约束双端的协议以用来对应方法的一一对应性(什么方法做什么事,参数、方法名、同步异步)

Hybrid App(原生+H5)开发,Vue,JavaScript,Hybrid App,javascript,web application文章来源地址https://www.toymoban.com/news/detail-742786.html

到了这里,关于Hybrid App(原生+H5)开发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】

    本文主要介绍关于 JS 或 Vue 中如何进行表头,列固定,可以根据实际应用场景应用于 原生 , Vue , 移动端 , 小程序 中 实际效果展示: 对于列的固定, table 中有对应的方法,但是如果列和表头都要固定,只能通过其他方式实现,如果您找到了更好的自身方法,还请斧正 表

    2024年02月09日
    浏览(50)
  • uniapp 开发 APP 使用 web-view 引入H5 app与 h5 页面通信

    uniapp 可以同时兼容 APP 和 H5,但有时候有些功能在 APP 中实现不了而在 H5 中可以实现,就可以采用 web-view 的方式在 APP 模式下显示 H5 页面。但是 APP 和 H5 储存的参数是不能共享的,例如token,就涉及到 APP 与 H5 之间的参数传递。 H5 向 APP 传参:引入 webview.js ,调用 uni.postMes

    2024年02月13日
    浏览(45)
  • 【 Python 全栈开发 - WEB开发篇 - 26 】Javascript 基础

    Javascript 是一种动态的、基于对象的编程语言,通常用于网页的客户端脚本编程。它可以在网页上实现交互效果、动态效果、表单验证、数据处理等功能。 学习 Javascript 可以通过以下途径: 在线教程:像 w3schools、MDN 等网站提供了详细的 Javascript 教程和示例代码。 书籍:可以

    2024年02月08日
    浏览(38)
  • 2023年web前端开发之JavaScript进阶(一)

    接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习 作用域 、变量提升、 闭包 等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法, 降低代码的冗余度 。 理解作用域对程序

    2024年02月03日
    浏览(53)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(65)
  • Hybrid App开发模式

    Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 Native App 移动互联网刚开始兴起的时候,我们手机上的应用(App)都是通过Native App开发而成的;Native App的开发具备很多的优势:

    2024年02月15日
    浏览(58)
  • 【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

    🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 什么是AJAX AJAX 其实就是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种

    2024年04月14日
    浏览(50)
  • Kendo UI,一个加速Web应用界面开发的JavaScript组件库!

    Kendo UI是什么? 首先,Kendo UI是一个由四个JavaScript UI库组成的包,这些库是专为jQuery、Angular、React和Vue原生构建的,每一个都是用一致的API和主题构建的。所以无论开发者怎么选择,所开发的Web应用始终保持了现代的应用界面,响应迅速、可访问且速度快! 为什么要选择Ke

    2024年02月15日
    浏览(51)
  • 未来网站开发必备:14个让你惊艳的JavaScript Web API!

    微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部

    2024年02月12日
    浏览(45)
  • vue中通过JavaScript实现web端鼠标横向滑动&触控板滑动效果-demo

    JavaScript实现web端鼠标横向滑动触控板滑动效果  支持鼠标拖动滑动触控板滑动效果 web端实现滑动,就是对鼠标按下、鼠标松开、鼠标移动事件进行监听 在Vue中实现鼠标横向滑动触控板滑动效果可以通过以下步骤实现: 首先在Vue中创建一个父组件,在该组件中引入子组件或者

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包