【quickhybrid】如何实现一个Hybrid框架

news/2024/6/16 7:00:35

章节目录

  • 【quickhybrid】如何实现一个跨平台Hybrid框架
  • 【quick hybrid】架构一个Hybrid框架
  • 【quick hybrid】H5和Native交互原理
  • 【quick hybrid】JSBridge的实现
  • 【quick hybrid】H5和原生的职责划分
  • 【quick hybrid】API的分类:短期API、长期API
  • 【quick hybrid】API规划
  • 【quick hybrid】API多平台支撑的实现
  • 【quick hybrid】组件(自定义)API的实现
  • 【quick hybrid】JS端的项目实现
  • 【quick hybrid】Android端的项目实现
  • 【quick hybrid】iOS端的项目实现

一些感慨

踏入前端领域满打满算也两年多了。到现在,主要方向已经是由Android原生转到了偏前端领域。

期间,不提自己的技术进步、视野拓宽,最大的产出之一应该就是从0开始构建了一个Hybrid框架了。

正值最近开始进行技术梳理,因此就准备写一系列文章沉淀起来。

本系列包含的内容清单

  • Hybrid框架的原理以及架构系列
  • JavaScript部分的原理以及源码系列(包括部分API的多容器的兼容)
  • Android部分的原理以及源码系列(仅覆盖核心实现以及API部分,不包含实际业务代码)
  • iOS部分的部分原理(一些坑会特别提出,理论上根据原理应该可以还原出)

    • 由于本人没写过iOS应用,因此目前没有直接提供源码,后续有时间可以考虑进一步提供

什么样的Hybrid框架?

核心宗旨:__H5页面基于该框架可以替代80%以上的原生业务页面。__

更详细一点:

  • 适用于需要开发大量项目级APP的场景
  • 不是用于完全替代原生开发,而是替代里面的80%原生业务页面(模式是: 原生部分 + H5部分)
  • 框架人员至少需要一名Android原生,一名iOS原生,一名前端架构(如果全栈,可以考虑合一)
  • 部分API(如UI显示类)考虑到了H5的兼容
  • 并没有做到产品级别的优化(需求优先级别较低)

之所以不基于第三方框架而是自己重新实现,是由具体的环境与需求决定的。譬如要求自己必须完全掌握源码,某些功能必须通过特定安全检测等。

另外,本系列不与任何市面上的其他框架进行比较,仅是自己的经验总结。

此框架是否有实践经验?

此框架不是平地起高楼而来的,而是在接近两年的项目实战中慢慢演化出的,内部已经迭代过多个版本

另外,它已经在一个项目型公司全面推广使用了。(N+级别)

这里要说明下:

  • 实际项目中,Hybrid框架仅仅是其中的一部分,还会包括一些原生通用组件,业务模块等
  • 但是本系列仅止步于Hybrid框架(处于诸多因素考虑,包括核心实现以及API实现)

如何应用与自己的项目中?

最后的源码部分仅提供核心实现以及API部分,对于一些简单项目来说,其实也就够用了,
但是如果功能较复杂的,肯定需要进一步封装自己的原生功能。

实际上推荐使用以下人员配置:

  • 一名资深Android原生(负责Android容器)
  • 一名资深iOS原生(负责iOS容器)
  • 一名资深前端(前端部分不要小觑,要配合排查问题的)
  • 总架构(推荐是以上三人中的一人担任,譬如本系列是由前端来统一架构的-但前提是必须懂点原生原理,否则抓瞎)

因为每一个人精力有限,所以除非特别厉害和全能,否则不建议一人担任两职
(譬如像我转入前端后,以前的Android就遗忘的很快,但是如果重点兼顾Android,前端水准肯定无法快速提升)

N+项目时的模式大致如下:

  • 三名框架人员负责核心框架容器部分(框架还需要提供一些通用模块与组件)
  • 各个业务线的APP中可以专门分配不同的原生人员负责打包APP(1对N,协助排查各自可能的业务问题)
  • 每一个APP中可以有若干H5业务开发人员(由不同的复杂度而定,主要业务都是线上的H5形式)
  • 三名对于的框架人员负责处理过滤后的真正框架BUG(由业务负责人过滤)

注意,以上是最小配置。(譬如可以分配更多的框架人员,优化提升等)

最后,以上是实际的经验总结,仅做参考。

框架更新与迭代

实际上不同框架的更新迭代方式都是不一样的,比如本系列中就是基于需求迭代

也就是说遇到问题才修复,优化,累积一段时间后开始考虑下一代的优化提升(迫于投入的窘迫性)

一般来说,整体的交互架构以及API是由对于的负责人规划的,然后安排给对于的容器实现

版本号的化仍然是以下经典形式:

大版本.小版本.修正版

譬如本框架在两年内迭代了个大版本(涉及到底层),
使用起来变化较大就会变动小版本,
平时个别API新增和修复是修正版

这里因人而异,比如有的喜欢将API新增也变为小版本更新

借鉴与不足

本框架中在实现是吸取了不少市面上已有框架的经验,譬如:

  • 钉钉(API设计上,可惜无法看到它底层实现...)
  • phonegap,html5+,apicloud,appcan等都有接触过(但参考的不多)
  • 一些github开源库,譬如marcuswestin/WebViewJavascriptBridge等

另外,在文章总结时,参考了一些博文,包括我以前写的文章(会在参考来源中)

源码

github上这个框架的实现

quickhybrid/quickhybrid


http://www.niftyadmin.cn/n/4474116.html

相关文章

opencv 二值化_opencv计算指定区域黑白像素占比

滑稽研究所opencv计算指定区域黑白像素占比哈喽,大家好呀,我是滑稽君。本期我们利用opencv来计算指定区域的黑白像素。如下在我们拿到二值化的图像之后,想要计算红框内黑白像素在该区域的占比。注意单通道的图像无法出现黑白以外的颜色。上图…

threejs 加载两个场景_用threejs和ammojs制作一个简单场景

本文的主要内容就是用three.js制作简单场景,并引入ammo.js物理引擎。bullet引擎和OpenGL结合创建简单的场景three.js和ammo.js创建简单的场景创建地形制作车辆柔体-绳索柔体-布料柔体-有体积的柔体使用blender引擎模拟物理场景本节目标是制作一个模板代码&#xff0…

kafka windows安装 命令行下使用测试

1、zookeeper安装: (https://zookeeper.apache.org/releases.html) ①进入zookeeper的相关设置所在的文件目录,例如本文的:D:\bigdata\zookeeper-3.4.10\conf ②将"zoo_sample.cfg"重命名为"zoo.cfg&…

shell回文判断_Java采用3种方式判断用户输入的字符串是否为回文

一、描述回文的定义:"回文数" 就是正读倒读都一样的整数。如奇数个数字:98789, 这个数字正读是98789,倒读也是98789;偶数个数字3223也是回文数。我们今天将回文数扩展为字母和数字组合回文,如adgu6776ugda也是回文&…

Linux如何从零开始搭建rsync+serync服务器(centOS6)

一、为什么要用Rsyncsersync架构?1、sersync是基于Inotify开发的,类似于Inotify-tools的工具2、sersync可以记录下被监听目录中发生变化的(包括增加、删除、修改)具体某一个文件或某一个目录的名字,然后使用rsync同步的时候&…

jenkins 截取字符串_如何在Jenkinsfile中将字符串转换为整数?

我的Jenkinsfile中有以下内容:pipeline {agent noneenvironment {timeout_mins 1}options {timeout(time: "${env.timeout_mins}", unit: MINUTES)}stages {stage("test print") {steps {echo "timeout_mins: ${env.timeout_mins}"s…

wpf 模板绑定控件属性

我们在ControlTemplate中画了椭圆,应用于Button按钮,但我们Button中有的Content属性,却没有显示出来。因为这里用ControlTemplate重写了Button的样式,所以我们也要在ControlTemplate中增加ContentControl。通过ContentControl中的…

大白话Vue源码系列(04):生成render函数

阅读目录优化 AST生成 render 函数小结本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单。每一种语法指令都要考虑到,处理起来相当复杂。上篇已经生成了 AST,本篇依然对 Vue 源码做简化处理,探究 Vue 是如果根据 AST …