跨平台开发方案的三个时代

news2024/11/27 12:37:43

跨平台开发从本质上讲是为了增加业务代码的复用率,减少因为要适配多个平台带来的工作量,从而降低开发成本。在提高业务专注度的同时,能够为用户提供一致的用户体验,实现“多快好省”的效果。

跨平台是跨哪些平台?怎么样的跨平台逻辑?从当前的实际情况来看,移动端跨平台需求主要集中在以下3点:

  • 桌面端跨移动端:桌面向移动端过渡的早期,希望 PC Web 与移动 Web 复用同一套代码。
  • Native 跨 Web:一套功能差不多的 Web 页能够在端外访问,需要跨 Native App 与 Web。
  • 跨系统双端:出于开发效率等原因,希望 Android、iOS 双端复用一套业务代码,这也是目前主要的需求点。

而放眼未来,我们预见可能还会有这些跨平台需求:

  • 跨小程序/轻应用:即用即走的轻量级应用,如各平台的小程序、 Android 快应用、iOS App Clips。
  • 跨 IoT 设备:各种有显示屏的设备都会成为新的入口,如车载设备、智能电视等。

移动跨平台方案的发展

不仅是移动应用的开发模式在持续的演变,跨平台开发方案也紧紧的跟随着开发模式的变化持续的演进,按照技术的发展,跨平台方案可以分为三个时代。

1、Web 容器时代

基于 Web 相关技术通过浏览器组件来实现界面及功能,典型的框架包括 Cordova、Ionic 和微信小程序。Web 时代的方案,主要采用的是原生应用内嵌浏览器控件 WebView的方式进行 HTML5 页面渲染,并定义 HTML5 与原生代码交互协议,将部分原生系统能力暴露给 HTML5,从而扩展 HTML5 的边界。这类交互协议,就是我们通常说的 JS Bridge。

2、泛 Web 容器时代

采用类 Web 标准进行开发,但在运行时把绘制和渲染交由原生系统接管的技术,代表框架有 React Native、Weex 和快应用等。过渡到泛 Web 容器时代,优化了 Web 容器时代的加载、解析和渲染这三大过程,把影响它们独立运行的 Web 标准进行了裁剪,以相对简单的方式支持了构建移动端页面必要的 Web 标准(如 Flexbox 等),也保证了便捷的前端开发体验;同时,这个时代的解决方案基本上完全放弃了浏览器控件渲染,而是采用原生自带的 UI 组件实现代替了核心的渲染引擎,仅保持必要的基本控件渲染能力,从而使得渲染过程更加简化,也保证了良好的渲染性能。

 

3、自绘引擎时代

自带渲染引擎,客户端仅提供一块画布即可获得从业务逻辑到功能呈现的多端高度一致的渲染体验。Flutter,是为数不多的代表。Flutter 开辟了一种全新的思路,即从头到尾重写一套跨平台的 UI 框架,包括渲染逻辑,甚至是开发语言。

移动跨平台技术方案的对比

对比现有的跨平台技术和解决方案也可以分为三类,分别是 Web 跨端、容器跨端、小程序跨端。

1、Web 跨端

Web 跨端比较好理解,因为 Web 与生俱来就有跨端的能力,因为只要有浏览器或 WebView,现在绝大多数端上(甚至包括封闭的小程序生态)都支持 Webview,所以只要开发网页然后投放到多个端即可轻松跨平台,例如 Web App、PWA(Progressive Web Apps)、Hybrid App、PHA(Progress Hybrid App)。

优点:

  • 没有额外的学习成本,一套基础技术吃天下
  • 不依赖特殊的配套设施,从开发、调试到运维等所有工程化环节都是通用的
  • 背靠 npm 庞大的生态,百万模块,应有尽有

缺点:

  • 经常会遇到白屏、卡顿等情况,用户的体验不佳
  • 无法调用系统的权限,例如多媒体、蓝牙、相机等
  • 性能不好,对内存的消耗大

2、容器跨端

另一种统一多端的思路是将 Native 定制成标准容器,让同一份代码跑在一个个标准容器中。比较典型的代表是React Native 、Flutter、Weex,这类方案通过尽可能的取长补短,综合了 Web 生态和 Native 组件,让 JS 执行代码后用 Native 的组件进行渲染,以解决抛弃 Web 历史包袱的问题。

具体来讲 React Native 可以跨 Android、iOS、Web、Windows 四端,Flutter 可以跨 Android、iOS、Web、Linux 四端,Weex 可以跨 Android、iOS、Web 三端。

优点:

  • Flutter 快速的开发,富有表现力的精美UI和类似本机的性能
  • React Native 专注于用户界面,使应用程序开发人员能够构建高度可靠的界面
  • Weex 页面就像开发普通网页一样;在渲染 Weex 页面时和渲染原生页面一样

缺点:

  • React Native 没有提供的需要自定义的应用,仍然需要使用原生开发
  • Flutter 构建的应用程序文件很大,没有广泛的资源基础,这意味着可能找不到开发所需的第三方库和包
  • Weex 由于起步比较晚,社区活跃度不如RN,资料和开源项目也相对较少

3、小程序跨端

小程序跨端也比较好理解,就是让同样代码的小程序能够运行在多个 App 中,例如开发完一个小程序除了让其运行在微信之外,还能运行在支付宝、百度等超级App,甚至是自己的 App 中。

如果说小程序仍然是依靠 Web 技术运行的,那为什么还要单独去使用小程序呢?就像前面所说到的一样,Web 始终没法调用例如相机、蓝牙等这样的权限,并且用户使用体验会收到一定的影响。而小程序则不同,小程序具有强大的 Web 渲染引擎、提供丰富组件、支持本地缓存、避免 DOM 泄露等,并且其初衷是开放,例如微信、支付宝这样的超级 App 也都相继开放了小程序上架能力,小程序逐渐成为跨 App 的正规方式。

后期也甚至出现了例如 FinClip 这样的小程序容器,可以让个人或企业自己的 App 具备小程序的运行能力,让其他 App 能够具有超级 App 一致的小程序跨端能力。同时通过Flutter、Taro、 kbone等开发出来的小程序均可在FinClip当中运行。

优势:

  • 具备类似 Native App 的体验度,使用较为流畅丝滑
  • 可以获取用户的相册、多媒体、蓝牙等基础权限
  • 可以通过便捷化的上下架方式完成相关页面和业务的热更新

缺点:

  • 大平台的框架标准不统一,会稍微有影响,但都大同小异,W3C也在做小程序的标准化工作
  • 部分的插件会用到原生相关的技术

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高视医疗在港交所招股:IPO募资要用于贷款,高铁塔为控股股东

11月30日,高视医疗(HK:02407)在港交所发布公告,拟全球发售1306.86万股股份,其中香港发售股份130.7万股,国际发售股份1176.16万股,另有15%超额配股权,于2022年11月30日至12月5日招股&…

Talk预告 | 亚马逊云科技上海人工智能研究院肖天骏:基于视频的自监督物体遮挡补全分割

本期为TechBeat人工智能社区第458期线上Talk! 北京时间11月30日(周三)20:00,亚马逊云科技上海人工智能研究院资深应用科学家——肖天骏的Talk将准时在TechBeat人工智能社区开播! 他与大家分享的主题是: “基于视频的自监督物体遮挡补全分割”…

请求和响应

目录1 请求对象1.1 请求对象介绍1.2 请求对象常用方法-获取各自路径1.3 请求对象常用方法-获取请求头信息1.4 请求对象常用方法-请求参数信息1.5 获取请求参数并封装对象1.5.1 手动封装方式1.5.2 反射封装方式1.5.3 工具类封装方式1.6 流对象获取请求信息1.7 中文乱码问题1.8 请…

可发生点击化学反应:1458576-00-5,Biotin-PEG4-alkyne,生物素-四聚乙二醇-炔

【中文名称】生物素-四聚乙二醇-炔,生物素-四聚乙二醇-丙炔基 【英文名称】 Biotin-PEG4-alkyne 【货号】Y-PE-2172 【CAS】1458576-00-5 【分子式】C21H35N3O6S 【分子量】457.58 【基团】alkyne 【纯度】95% 【规格】25mg,100mg,250mg 【是…

如何应对继承的双面性

如何应对继承的双面性 继承既强大又有破坏性,那怎么办呢? 1)避免使用继承; 2)正确使用继承。 我们先来看怎么避免继承,有三种方法: 使用final关键字; 优先使用组合而非继承&#…

11月30日:linux服务器安装以及部署项目

准备一个连接linux服务器的可视化工具,开始发车 推荐使用国产: finalshell 下载地址:FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本3.9.7,更新时间2022.10.26 - SSH工具 SSH客户端 xshell:安装…

Spring Cloud Gateway微服务网关快速入门

介绍 Spring Cloud Gateway 是 Spring 官方基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等技术开发的网关,Spring Cloud Gateway 旨在为微服务架构提供一种简单而有效的统一的 API 路由管理方式。Spring Cloud Gateway 作为 Spring Cloud 生态…

Kamiya丨Kamiya艾美捷人乳铁蛋白ELISA说明书

Kamiya艾美捷人乳铁蛋白ELISA预期用途: 人乳铁蛋白ELISA是一种高度灵敏的双位点酶联免疫测定(ELISA)人类生物样品中乳铁蛋白的测定。仅供研究使用。不用于诊断程序。 引言 乳铁蛋白(LF)是一种具有抗菌活性的多功能铁…

运动“双十一”持续走热,缤跃酒店洞察市场需求,创新打造运动健康酒店!

2022年“双十一”购物促销活动刚刚结束,各大品牌陆续开始展示肌肉,在众多数据中运动健身领域相关数据不容忽视,居家健身器械等商品持续走热,户外运动设备销售量也保持热度。由此可见,在当下全民运动热潮下,…

uniapp开发微信小程序实现语音识别,使用微信同声传译插件,

第一步:在微信小程序管理后台:“设置”-》“第三方设置”-》“插件管理”中添加插件。 但是这个地方,没有搜索到插件,就到微信服务市场 搜索到以后添加到需要的小程序里面,然后返回管理中心查看,就可以看…

Css3 3D转换

特点: 近大远小物体后面遮挡不可见 三维坐标系: 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 X轴:水平向右为正 Y轴:垂直向下为正 Z轴:垂直屏幕向外为正 3D位移和3D旋转&#xff1a…

曲柄压力机的离合器和制动系统设计

目 录 摘 要 I ABSTRACT II 第1章 绪论 1 1.1压力机发展的概况 1 1.2压力机工作原理 1 1.2.1压力机功能简介 1 1.2.2压力机的工作原理简介 3 1.3 压力机的分类 3 1.4 压力机的主要参数和型号 4 1.5本次设计压力机参数及内容 6 1.5.1主要技术参数 6 1.5.2设计内容 6 第二章 曲柄…

学妹居然叫我帮她P证件照自拍,结果发现.........

前因后果 事情是这样的 晚上我正在聚精会神写代码(打游戏~) 突然,收到学妹给我发来的消息 还有一张自拍照 而且是可以放在结婚证上的那种哦 原来是照片尺寸不合适 让我帮她修图。还要什么蓝底、红底各种背景的 效果 1、尺寸长宽调整为&…

有序数组转换为二叉查找树

问题描述 给定一个整数数组,其元素为先序排列,将其转换为高度平衡的二叉查找树。 示例 示例1 Input: nums [-10,-3,0,5,9] Output: [0,-3,9,-10,null,5] Explanation: [0,-10,5,null,-3,null,9] is also accepted: 示例2 Input: nums [1,3] Output: …

STM32实战总结:HAL之触摸屏

输入类设备简介 IO输入输出,是计算机系统中的一个概念。计算机的主要功能就是从外部获取数据然后进行计算加工得到目标数据并输出给外部(计算机可以看成数据处理器)。计算机和外部交互就是通过IO。每一台计算机都有个标准输入和标准输出。 常…

业务:财务会计业务知识

一、引言 会计是以货币为主要计量单位,对企业、事业、机关、团体及其他经济组织的经济活动进行记录、计算、控制、分析、报告,以提供财务和管理信息的工作。会计的职能主要是反映和控制经济活动过程,保证会计信息的合法、真实、准确和完整&a…

像素坐标和实际坐标的转换

文章目录像素坐标系图像坐标系小孔成像原理相机坐标系畸变参数像素坐标系 像素坐标系uov是一个二维直角坐标系,反映了相机CCD/CMOS芯片中像素的排列情况。原点o位于图像的左上角,u轴、v轴分别于像面的两边平行。像素坐标系中坐标轴的单位是像素&#xf…

新手python的自学总结(已拿到百度offer)

今天给大家分享一个小伙伴自学Python找到工作的文章。 先简单介绍一下小伙伴的情况。是非科班出身的,虽然高中读的是理科,但是进入大学学了一个文科专业,之后就再没接触过理工科的东西。对计算机也是一窍不通,大学才刚开始接触电…

Linux源码——启动流程1

主要 大概流程就是: 通电自检-----》bios----》bootloader —》内核。其中内核这部分是这篇主要的,通过bootloader初始化好一些条件,然后调用kernel_entry()开始正式进入内核之中,后面就是内核操作了,启动进程什么的…

Java知识点

Java浅拷贝 Java的深拷贝和浅拷贝 - YSOcean - 博客园 (cnblogs.com) Clone 是 Object 类中的一个方法,通过对象A.clone() 方法会创建一个内容和对象 A 一模一样的对象 B,clone 克隆,顾名思义就是创建一个一模一样的对象出来(浅…