Flutter for Web:跨平台移动与Web开发的新篇章

Flutter是Google推出的一款开源的UI工具包,用于构建高性能、高保真度的跨平台应用程序。Flutter最初专注于移动平台,但随着Flutter for Web的推出,它也扩展到了Web开发领域。本文将深入解析Flutter for Web的架构、核心概念、开发流程、性能优化以及与传统Web开发框架的比较。

2024年礼包2500G计算机入门到高级架构师开发资料超级大礼包免费送!

Flutter for Web架构

Flutter for Web基于Flutter的核心框架,保留了其原有的Dart编程语言、Widget系统和声明式编程模型。它将Flutter的组件渲染引擎(Skia)转换为Web友好的格式,如HTML、CSS和SVG,同时利用Web平台的原生功能,如WebAssembly和WebGL,以实现高性能的Web应用。

1. 引擎层

Flutter for Web使用Skia图形库,通过WebAssembly在Web上运行。Skia经过优化,可以高效地绘制复杂的UI,确保了与原生Flutter应用相似的性能。

2. Dart to JavaScript编译

Flutter for Web将Dart代码编译为JavaScript,以便在Web浏览器中执行。这个过程包括两个主要步骤:AOT编译(Ahead-of-Time)和Tree Shaking。

  • AOT编译:将Dart代码转换为JavaScript字节码,提高加载速度。
  • Tree Shaking:通过分析Dart代码,移除未使用的部分,减少最终输出的JavaScript文件大小。
3. Web组件

Flutter for Web将Flutter的Widget转换为Web组件,这些组件可以被浏览器理解和渲染。同时,它还支持与原生Web API的交互,如事件处理和DOM操作。

开发流程

使用Flutter for Web开发Web应用的基本流程如下:

  1. 安装和设置:安装Flutter SDK,配置开发环境,包括Dart SDK和相关IDE插件。
  2. 创建项目:使用flutter create命令创建一个新的Flutter项目,选择Web目标。
  3. 编写代码:使用Dart和Flutter Widget构建UI,处理业务逻辑。
  4. 运行和调试:使用flutter run -d web-server启动本地服务器,实时预览和调试应用。
  5. 打包和部署:使用flutter build web生成生产准备的静态文件,部署到Web服务器。
性能优化
  1. 减少渲染开销:优化Widget层次结构,避免不必要的重绘和重建。
  2. 代码压缩:使用flutter build命令时,启用–release标志进行代码压缩和优化。
  3. 资源优化:优化图片和其他资源的大小和格式,减少网络传输成本。
  4. 延迟加载:对于大组件或资源,可以考虑使用懒加载技术,只在需要时加载。
与传统Web框架比较
  1. 开发效率:Flutter for Web的声明式编程和丰富的Widget库可以提高开发速度,尤其是对于已有Flutter经验的开发者。
  2. 性能:得益于Skia和WebAssembly,Flutter for Web在某些场景下可能比传统Web框架(如React、Vue)更快,特别是在动画和复杂UI渲染方面。
  3. 兼容性:Flutter for Web的兼容性不如原生Web框架,有些浏览器特性可能不完全支持。
  4. 生态系统:Flutter for Web的库和插件数量较少,但随着社区的发展,这一情况正在改善。
  5. 学习曲线:对于已熟悉Dart和Flutter的开发者,Flutter for Web的学习曲线较低。对于没有Flutter背景的开发者,可能需要花费时间学习新的框架和语言。

示例代码解析

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Web Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Home Page'),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headline4,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),),);}
}

这是一个简单的Flutter for Web应用,它创建了一个具有计数功能的页面。main函数启动应用,MyApp是应用的入口点,MyHomePage是一个具有计数器功能的页面。_incrementCounter方法更新计数器,setState通知框架需要重新构建Widget。

高级特性与最佳实践

1. 热重载(Hot Reload)

Flutter for Web支持热重载,允许开发者在开发过程中快速查看代码更改的效果,而无需重新启动应用。这对于快速迭代和调试非常有用。

2. Web插件和库

虽然Flutter for Web的生态系统正在发展中,但已经有一些插件和库针对Web进行了优化,例如flutter_web_ui用于Web渲染,flutter_web_plugins提供Web特定的插件支持。

3. Web性能监控

为了确保Web应用的性能,可以使用Chrome DevTools或其他性能分析工具来监控和优化应用的加载速度、内存使用和CPU利用率。

4. SEO和可访问性

Flutter for Web生成的HTML和CSS对于搜索引擎优化(SEO)和网页可访问性(Accessibility)至关重要。确保正确设置meta标签,遵循Web可访问性标准(WCAG),并使用Semantics类来提供语义化的结构。

5. 混合开发(Hybrid Development)

Flutter for Web可以与传统的Web技术结合,允许在同一个项目中使用Flutter和原生Web组件。这有助于充分利用现有的Web资源和库,同时利用Flutter的优势。

6. Web安全

确保遵循Web安全最佳实践,如使用HTTPS、防御跨站脚本攻击(XSS)和跨站请求伪造(CSRF),以及处理敏感数据的安全存储和传输。

示例:使用Web API

import 'dart:convert';
import 'package:http/http.dart' as http;Future<void> fetchWeather(String city) async {final response = await http.get(Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUR_API_KEY&units=metric'));if (response.statusCode == 200) {final weatherData = json.decode(response.body);// Process and display the weather data} else {throw Exception('Failed to load weather data');}
}

这段代码展示了如何在Flutter for Web中使用http包来获取远程Web API的数据。注意替换YOUR_API_KEY为实际的API密钥,并处理返回的数据。

Flutter for Web的实际应用

为了更好地理解Flutter for Web在实际项目中的应用,我们可以通过几个案例来探讨它如何帮助开发者高效地构建Web应用,并实现卓越的用户体验。

1. 阿里巴巴的闲鱼(Xianyu)

阿里巴巴旗下的二手交易平台闲鱼,其Web版部分页面采用了Flutter for Web技术重构。通过Flutter,闲鱼团队实现了快速迭代和统一的设计语言,确保了移动端和Web端的一致性体验。Flutter的高性能特性帮助闲鱼在Web端也能提供流畅的滚动和动画效果,提升了用户满意度。

2. Reflectly

Reflectly是一款情绪日记和自我反思应用,它不仅有原生移动应用版本,还利用Flutter for Web为用户提供Web端体验。Flutter的跨平台能力让Reflectly团队能够快速地将他们的应用扩展到Web,同时保持与移动应用相同的高质量UI和UX。

3. Hamilton Musical

知名音乐剧《汉密尔顿》的官方网站采用了Flutter for Web构建,展示了其创新的界面设计和互动体验。网站利用Flutter的动画和图形处理能力,为访问者提供沉浸式的浏览体验,同时保持了高度的性能和响应速度。

深入技术细节:Flutter for Web的渲染机制

Flutter for Web的渲染机制是其区别于其他Web框架的关键之一。它通过以下方式确保了高性能和高保真的UI:

CanvasKit渲染路径:Flutter for Web默认使用CanvasKit,这是一个基于Skia图形库的WebAssembly实现,它直接在浏览器的Canvas元素上绘制UI。这种方式提供了接近原生的性能,尤其适合图形密集型应用。

HTML渲染路径:对于一些简单场景,Flutter也支持将Widget渲染为HTML和CSS,这种模式更加符合Web标准,有利于SEO和可访问性,但可能牺牲一部分性能。

自动化的布局和绘制:Flutter的Widget系统自动处理布局和绘制,开发者只需要关注UI的逻辑和外观,无需手动调整布局或处理DOM操作,这大大简化了开发流程。

与PWA(Progressive Web Apps)的结合

Flutter for Web与PWA(渐进式Web应用)理念相结合,可以进一步提升Web应用的用户体验。PWA通过离线访问、推送通知、图标安装等功能,使Web应用更像原生应用。Flutter for Web应用可以轻松集成PWA特性,例如使用flutter_pwa这样的库,来实现manifest.json和service worker的自动生成,从而达到“一次编写,多处运行”的目标,既能在浏览器中运行,也能作为独立应用安装到用户的设备上。

常见问题与解决方案

1. 兼容性问题

尽管Flutter for Web支持大多数现代浏览器,但在一些旧版本或非主流浏览器上可能存在兼容性问题。解决方案包括:

  • 使用canvaskit或html渲染模式,根据浏览器支持情况选择合适的方式。
  • 对不兼容的浏览器提供降级方案,如使用传统Web技术构建备用界面。
  • 监控用户反馈,及时发现并解决兼容性问题。
2. 性能瓶颈

在某些情况下,Flutter for Web应用可能会遇到性能瓶颈,如动画卡顿或加载缓慢。以下是一些优化策略:

  • 精简Widget树,避免过多的嵌套和无用的组件。
  • 使用ListView和GridView的性能优化选项,如cacheExtent和shrinkWrap。
  • 利用const关键字和key来优化Widget的重建。
  • 使用firstFrameBudget和Profile工具来识别和优化性能瓶颈。
3. Web API和库的集成

由于Flutter for Web相对较新,部分Web库可能还没有直接的对应版本。解决方法包括:

  • 使用dart:html库直接与DOM交互。
  • 使用package:http库进行HTTP请求。
  • 将现有的JavaScript库封装为Isolate或WebAssembly,以供Flutter for Web使用。
  • 贡献到社区,开发和维护与Web相关的Flutter插件。
4. SEO和可访问性

确保Flutter for Web应用具有良好的SEO和可访问性,可以使用以下策略:

  • 使用Semantics和SemanticsNode来提供语义信息。
  • 生成正确的HTML结构,包括标题、元数据和链接。
  • 针对屏幕阅读器和键盘导航进行测试和优化。

Flutter for Web的未来

  1. 更多库和工具:随着社区的发展,将会有更多的库和工具专门为Flutter for Web设计,进一步丰富其生态系统。
  2. 更好的性能:Google将持续优化Flutter for Web的性能,包括更快的编译速度、更小的包体积和更高的渲染效率。
  3. 更广泛的平台支持:除了Web,Flutter for Desktop和嵌入式平台也在积极开发中,未来可能实现多平台的无缝切换。
  4. 与原生Web更紧密的集成:未来可能会有更多与原生Web API和库的集成,使得Flutter for Web应用更易于集成到现有的Web基础设施中。
  5. 跨平台开发的统一:随着Flutter在不同平台的普及,开发者可以期待更统一的开发体验和更少的平台差异。

实战演练

为了更深入地理解Flutter for Web的工作原理,我们将通过一个简单的示例来探索其核心概念和代码结构。我们将创建一个展示天气信息的小应用,通过这个过程,你将了解如何使用Flutter构建Web应用,如何与Web API交互,以及如何处理状态管理。

1. 创建项目

首先,确保你已经安装了Flutter SDK并配置好开发环境。然后,创建一个新的Flutter项目,并指定目标为Web:

flutter create my_weather_app
cd my_weather_app
flutter config --enable-web
flutter create .
2. 添加依赖

打开pubspec.yaml文件,添加http库以处理网络请求:

dependencies:flutter:sdk: flutterhttp: ^0.13.7
3. 编写UI代码

lib/main.dart中,我们将构建应用的基本UI。这里使用MaterialApp作为根Widget,定义一个简单的页面来显示天气信息。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';void main() => runApp(MyWeatherApp());class MyWeatherApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Weather App',theme: ThemeData(primarySwatch: Colors.blue,),home: WeatherPage(),);}
}class WeatherPage extends StatefulWidget {_WeatherPageState createState() => _WeatherPageState();
}class _WeatherPageState extends State<WeatherPage> {String _weatherInfo = '';Future<void> _fetchWeather() async {// TODO: Fetch weather data}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Weather Info'),),body: Center(child: Text(_weatherInfo ?? 'Fetching Weather...'),),floatingActionButton: FloatingActionButton(onPressed: _fetchWeather,tooltip: 'Get Weather',child: Icon(Icons.refresh),),);}
}
4. 实现天气数据获取

接下来,在_WeatherPageState类中实现_fetchWeather方法,使用http库从OpenWeatherMap API获取天气数据。

String _weatherApiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric';// ...class _WeatherPageState extends State<WeatherPage> {// ...Future<void> _fetchWeather() async {try {final response = await http.get(Uri.parse(_weatherApiUrl));if (response.statusCode == 200) {final weatherData = jsonDecode(response.body);final temp = weatherData['main']['temp'];setState(() {_weatherInfo = 'Temperature: $temp°C in London';});} else {setState(() {_weatherInfo = 'Failed to fetch weather data';});}} catch (e) {setState(() {_weatherInfo = 'Error: $e';});}}// ...
}

请注意替换YOUR_API_KEY为你自己的OpenWeatherMap API密钥。

5. 运行和调试

在终端中,使用以下命令启动Web服务器并查看你的应用:

bash
flutter run -d chrome

这将自动在Chrome浏览器中打开你的应用,你可以看到应用界面并点击按钮获取天气信息。

优化与扩展

在我们的天气应用示例中,我们可以进一步优化和扩展功能,以提供更好的用户体验和更丰富的功能。以下是几个建议:

1. 错误处理和反馈

在实际应用中,我们需要为网络请求添加更全面的错误处理。例如,我们可以使用try-catch语句捕获异常,并向用户显示友好的错误提示。

try {final response = await http.get(Uri.parse(_weatherApiUrl));if (response.statusCode == 200) {// ...} else {throw Exception('Failed to fetch weather data');}
} on SocketException catch (_) {setState(() {_weatherInfo = 'No internet connection';});
} on Exception catch (e) {setState(() {_weatherInfo = 'Error: $e';});
}
2. 动画和过渡效果

Flutter for Web支持丰富的动画和过渡效果,可以用来增强用户体验。例如,当天气信息加载时,我们可以添加一个加载动画。

body: Center(child: _weatherInfo.isEmpty? CircularProgressIndicator(): Text(_weatherInfo),
),
3. 输入和交互

添加一个文本框让用户输入城市名,以获取不同城市的天气信息。

dart
TextField(decoration: InputDecoration(labelText: 'Enter City Name',),onChanged: (value) {setState(() {_cityName = value;});},
),

然后在_fetchWeather方法中使用输入的城市名:

String _weatherApiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=$_cityName&appid=YOUR_API_KEY&units=metric';
4. 持久化和缓存

为提高性能和用户体验,我们可以考虑将最近的天气信息缓存到本地。可以使用shared_preferences库来实现。

import 'package:shared_preferences/shared_preferences.dart';// ...Future<void> _saveWeatherInfo(String info) async {SharedPreferences prefs = await SharedPreferences.getInstance();prefs.setString('weather_info', info);
}Future<String> _loadWeatherInfo() async {SharedPreferences prefs = await SharedPreferences.getInstance();return prefs.getString('weather_info') ?? '';
}// ...class _WeatherPageState extends State<WeatherPage> {// ...void initState() {super.initState();_weatherInfo = _loadWeatherInfo();}// ...
}
5. 响应式设计

确保应用在不同屏幕尺寸和设备上都能良好显示。可以使用MediaQuery和LayoutBuilder来实现响应式布局。

dart
body: Center(child: LayoutBuilder(builder: (context, constraints) {if (constraints.maxWidth > 600) {return Column(crossAxisAlignment: CrossAxisAlignment.start,children: [TextField(...),Text(_weatherInfo),],);} else {return Text(_weatherInfo);}},),
),

2024年礼包2500G计算机入门到高级架构师开发资料超级大礼包免费送!

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

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

相关文章

ALOHA多相机Realsense配置以及数据采集

简介 在诸多模仿学习的工作中&#xff0c;均使用到多个Realsense相机作为数据输入端。本文探讨多个Realsense的ros节点启动。 环境配置 librealsense realsense_ros#python h5py opencv-python多相机启动 ALOHA工程仅需要彩色图像进行输入。因此需要只保留彩色图像&#xf…

树与图的一些计数问题(图论学习总结部分内容)

文章目录 前言七、树与图的一些计数问题&#xff08;偏数学&#xff09;容斥原理知识点例题 e g 1 : eg1: eg1: 完全子图染色问题 e g 2 : eg2: eg2: D A G DAG DAG计数 生成树计数知识点例题 环计数问题练习题 前言 由于图论学习总结内容过多&#xff0c;全放在一篇博客过于…

QLineEdit文本长度和框宽度的比较问题

开发环境 操作系统: 银河麒麟V10SP1qt版本 : 5.12.12背景 测试同事提出,QLineEdit中设置的占位符(由setPlaceholderText函数设置)文本能完全显示时不要显示tips,不完全显示时要显示tips,这样显得简洁。 想了想逻辑上比较好实现,那就是占位符文本长度大于QLineEdit宽度就显示…

Python pyqtgraph库:高效可视化数据的利器

更多Python学习内容&#xff1a;ipengtao.com 在数据科学和工程领域&#xff0c;数据可视化是一项非常重要的任务。Python pyqtgraph库是一个功能强大的数据可视化工具&#xff0c;可以帮助用户快速、高效地可视化各种类型的数据&#xff0c;包括实时数据、大数据集和3D数据等。…

PostgreSQL-常用函数和操作符-2

0. WITH 在 PL/pgSQL 中&#xff0c;WITH 子句通常用于创建一个临时结果集&#xff0c;这个结果集在执行 SQL 查询时使用。这个临时结果集通常被称为一个公共表表达式&#xff08;Common Table Expression, CTE&#xff09;。CTE 允许您在查询中引用它&#xff0c;就像引用一个…

Kerberos-梳理

服务端: yuminstall-ykrb5-server vim/var/kerberos/krb5kdc/kdc.conf [kdcdefaults] kdc_ports=88 kdc_tcp_ports=88 [realms] HADOOP.COM={#master_key_type=aes256-cts acl_file=/var/kerberos/krb5kdc/kadm5.acl dict_file=/usr/share/dict/words admin_keytab=/var/kerbe…

英伟达解码性能NVDEC

如果你能打开官网&#xff0c;请看这里&#xff1a; NVDEC Application Note 下面是摘录&#xff1a;

STL---排序模板参数

map 对map进行排序 首先一定要注意map模板类的第三个模板参数&#xff0c;这个参数决定元素按键值升序或者降序在map中的存储方式&#xff1a; 默认&#xff1a;less<key>升序----- < -----第一个小于取第一个 可设置&#xff1a;greater<key>降序-------…

VC 编程开发中的 封装类 :log日志类 和SQL server 操作类 源代码

VC 编程开发中的 封装类 &#xff1a;日志类 和SQL server 操作类 源代码 在VC&#xff08;Visual C&#xff09;开发中&#xff0c;日志文件输出是一个至关重要的环节&#xff0c;它对于程序调试、问题排查以及系统监控等方面都具有不可替代的作用。以下是对日志文件输出在VC开…

ASP.NET仪器设备管理系统设计与实现

摘 要 文中以某中小型企业的设备管理为例&#xff0c;对设备管理系统的设计与应用进行研究&#xff0c;旨在通过设备管理系统提高内部设备的利用率及实现其最大的经济效益。文中首先对设备管理的现状及其重要性进行了分析&#xff0c;分析实现设备管理信息系统的必要性与可行…

如何在windows server下安装mysql5.7数据库,并使用Navicat Premium 15可视化工具新建数据库并读取数据库信息。

如何在windows server下安装mysql5.7数据库&#xff1f; MySQL :: Download MySQL Community Server (Archived Versions)https://downloads.mysql.com/archives/community/点击↑&#xff0c;然后选择对应版本和平台↓下载 将下载后的安装包放入固定目录&#xff08;这里以D:…

AI学习指南概率论篇-随机变量和随机过程

AI学习指南概率论篇-随机变量和随机过程 随机变量和随机过程是概率论中重要的概念&#xff0c;也是在人工智能领域中经常应用的概念。本文将介绍随机变量和随机过程的概述&#xff0c;它们在AI中的使用场景&#xff0c;定义和意义&#xff0c;以及相关的公式讲解&#xff0c;并…

蓝桥杯备战17.bitset砝码称重

P2347 [NOIP1996 提高组] 砝码称重 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) bitset 用来存储二进制 #include<bits/stdc.h> using namespace std; #define endl \n #define int long long const int N 2e510; int w[] {0,1,2,3,5,10,20}; signed main() {std…

电商选品的数据是可以用爬虫进行采集的吗?

在电子商务领域&#xff0c;选品是一个至关重要的环节&#xff0c;它直接影响到商家的销售业绩和市场竞争力。为了做出更明智的选品决策&#xff0c;商家需要获取大量的市场数据和产品信息。那么&#xff0c;电商选品的数据是否可以通过爬虫进行采集呢&#xff1f; 爬虫在电商数…

更适合户外使用的开放式耳机,佩戴舒适音质悦耳,虹觅HOLME NEO体验

随着气温的逐渐升高&#xff0c;不管是在室内工作娱乐&#xff0c;还是到户外运动健身&#xff0c;戴上一款合适的耳机都会帮我们隔绝燥热与烦闷&#xff0c;享受音乐与生活。现在市面上的耳机类型特别多&#xff0c;我很喜欢那种分体式的开放耳机&#xff0c;感觉这种耳机设计…

亚信安慧AntDB:颠覆传统的开放创新数据库生态

亚信安慧AntDB是亚信科技自主研发的一款颠覆传统的开放创新数据库产品。它引入了分布式架构&#xff0c;通过数据的弹性伸缩、 容灾容错和负载均衡等技术手段&#xff0c;实现了高性能、高可靠性和高可扩展性的数据存储和处理能力。不仅如此&#xff0c;亚信安慧 AntDB还具备…

从头开始学Spring—02基于XML管理bean

目录 1.实验一&#xff1a;入门案例 2.实验二&#xff1a;获取bean 3.实验三&#xff1a;依赖注入之setter注入 4.实验四&#xff1a;依赖注入之构造器注入 5.实验五&#xff1a;特殊值处理 6.实验六&#xff1a;为类类型属性赋值 7.实验七&#xff1a;为数组类型属性赋值…

掌握决策之道:层次分析法(AHP)的步骤、应用与局限性

目录 一、层次分析法简介 举一个小例子&#xff1a; 评价类问题可用打分解决&#xff0c;比如&#xff1a;小华高考结束后&#xff0c;在华科和武大两所学校之间做抉择。 评价类问题可用打分解决 二、层次分析法的步骤 &#xff08;一&#xff09;一道引出层次分析法的例…

如何在创建之前检测 Elasticsearch 将使用哪个索引模板

作者&#xff1a;来自 Elastic Musab Dogan 概述 Elasticsearch 提供两种类型的索引模板&#xff1a;旧&#xff08;legacy&#xff09;索引模板和可组合 (composable) 索引模板。 Elasticsearch 7.8 中引入的可组合模板旨在替换旧模板&#xff0c;两者仍然可以在 Elasticsear…

深入理解MVCC与Read View:并发控制的关键要素

MVCC MVCC的几个问题1.update、insert、select和delete如何在MVCC中维护版本链&#xff1f;2.select读取&#xff0c;是读取最新的版本呢&#xff1f;还是读取历史版本&#xff1f;3.当前读和快照读4.那为什么要有隔离级别呢&#xff1f;5.如何保证&#xff0c;不同的事务&…