深入解析三大跨平台开发框架:Flutter、React Native 和 uniapp
深入解析三大跨平台开发框架:Flutter、React Native 和 uniapp
在移动开发中,跨平台开发框架已经成为开发者的首选工具。本篇将深入解析三大主流跨平台开发框架:Flutter、React Native 和 uniapp。下面将详细探讨它们的原理、优势和劣势。
一、Flutter
1.1 Flutter 的基本原理
Flutter 是由 Google 开发的开源 UI 软件开发工具包,使用 Dart 语言。其核心在于自绘引擎 Skia,这使得 Flutter 不依赖于平台原生的控件,而是直接绘制所有 UI 元素。Flutter 的架构分为三个层次:
- 框架层:Flutter SDK 提供了丰富的 UI 组件,这些组件构建在 Dart 语言之上。
- 引擎层:Skia 渲染引擎和 Dart VM,负责将 Dart 代码编译为原生 ARM 代码,并进行高效的 UI 渲染。
- 嵌入层:平台相关代码,用于与操作系统进行交互。
1.2 核心技术点
自绘引擎 Skia
Flutter 使用 Skia 作为其底层的图形渲染引擎。Skia 是一个 2D 图形库,支持多种平台的高性能图形绘制。
Skia 在不同平台上的运行原理
Skia 的跨平台渲染能力是通过与各个平台的图形 API 进行交互来实现的。以下是 Skia 如何在不同平台上运行的详细解释:
-
Skia 与平台的集成:
- Android:在 Android 平台上,Skia 与 OpenGL 或 Vulkan 进行交互。Skia 会将绘制指令转换为 OpenGL 或 Vulkan 的命令,通过 Android 的图形管道进行渲染。
- iOS:在 iOS 平台上,Skia 使用 Metal 或 OpenGL 进行绘图。Skia 会将其绘图指令转换为 Metal 或 OpenGL 的命令,通过 iOS 的图形管道进行渲染。
- Web:在 Web 平台上,Flutter 使用 WebAssembly 编译 Skia,并通过 WebGL 进行渲染。Skia 的指令会被转换为 WebGL 命令,在浏览器中执行。
- 桌面(Windows, macOS, Linux):在桌面平台上,Skia 使用不同的平台 API。例如,在 Windows 上使用 Direct3D,在 macOS 上使用 Metal,在 Linux 上使用 Vulkan 或 OpenGL。
-
Flutter 的架构层次:
- Framework(框架层):开发者使用 Dart 编写应用逻辑和 UI 代码。Flutter 提供了丰富的 UI 组件库,开发者可以使用这些组件构建应用。
- Engine(引擎层):这是 Flutter 的核心部分,包含 Dart 运行时、Skia 渲染引擎、文本排版引擎等。引擎层负责将 Dart 代码编译为原生代码,并将 UI 元素绘制到屏幕上。
- Embedder(嵌入层):这是 Flutter 与操作系统交互的部分。不同平台有不同的嵌入实现,负责创建窗口、处理输入事件、与操作系统的图形 API 进行交互等。
-
图形渲染流程:
- Dart 层:开发者编写的 Dart 代码会生成一棵 Widget 树(Flutter 的 UI 组件树)。当 Widget 树发生变化时,Flutter 会生成一棵新的 Element 树和 RenderObject 树。
- 渲染层:RenderObject 树会根据布局和绘制逻辑生成绘制指令(Painting Commands)。
- Skia 渲染引擎:这些绘制指令会被传递给 Skia,Skia 将这些指令转换为平台特定的图形 API 命令。
- 平台图形 API:最终,这些命令通过平台图形 API(如 OpenGL、Metal、Direct3D 等)在屏幕上进行渲染。
1.3 Flutter 的优势与劣势
优势:
- 一致性:由于所有控件都是 Flutter 自己绘制的,UI 在不同平台上的表现非常一致。
- 高性能:Flutter 的自绘机制和 Dart 语言的 AOT 编译,使得应用运行速度接近原生。
- 丰富的组件库:Flutter 提供了大量的预构建组件,开发效率高。
劣势:
- 包体积较大:由于包含了自绘引擎和 Dart VM,Flutter 应用的初始包体积相对较大。
- 原生功能调用复杂:尽管 Flutter 提供了平台通道(Platform Channels)来与原生代码交互,但与原生 API 的对接仍需要一定的学习和开发成本。
- 生态相对较新:尽管 Flutter 发展迅速,但相较于 React Native 等框架,其生态系统还在不断完善中。
二、React Native
2.1 React Native 的基本原理
React Native 是由 Facebook 开发的开源框架,使用 JavaScript 和 React。其工作原理是通过 JavaScriptCore 解释执行 JavaScript 代码,并通过桥(Bridge)将这些代码转换为原生组件调用。React Native 的架构包括三个部分:
- JavaScript 层:负责应用逻辑。
- Bridge:JavaScript 和原生之间的通信桥梁。
- 原生层:iOS 和 Android 原生组件。
2.2 核心技术点
JavaScriptCore 引擎
JavaScriptCore 是一个轻量级的 JavaScript 引擎,最初由 Apple 开发,并且在 WebKit 浏览器引擎中使用。JavaScriptCore 被用于解释和执行 JavaScript 代码,并且在跨平台应用框架(如 React Native)中发挥重要作用。
JavaScriptCore 在不同平台上的存在方式
-
iOS 平台
- 原生支持:JavaScriptCore 是 WebKit 的一部分,而 WebKit 是 iOS 的系统库之一。因此,JavaScriptCore 作为 iOS 系统的一部分被直接使用,无需额外安装。
- 桥接:React Native 通过使用 Objective-C 或 Swift 将 JavaScriptCore 嵌入到应用中,允许 JavaScript 代码与原生代码进行通信。
-
Android 平台
- Bundled(捆绑):由于 Android 系统并不内置 JavaScriptCore,React Native 在 Android 应用中将 JavaScriptCore 捆绑在一起。这意味着每个 React Native 应用都会包含一个 JavaScriptCore 实现。
- 桥接:React Native 通过使用 Java 将 JavaScriptCore 嵌入到应用中,并通过 JNI(Java Native Interface)与 JavaScriptCore 进行交互。
-
Web 平台
- 内置引擎:在浏览器环境中,浏览器本身就包含 JavaScript 引擎(如 Chrome 的 V8 引擎、Firefox 的 SpiderMonkey 引擎、Safari 的 JavaScriptCore 引擎)。React Native for Web 会利用这些内置引擎来执行 JavaScript 代码。
-
桌面平台
- 使用 WebKit 或 JSC:在桌面平台上,可以使用 WebKit 或独立的 JavaScriptCore 库。对于 macOS,JavaScriptCore 是系统框架的一部分,可以直接使用。在 Windows 和 Linux 上,可以编译和使用 JavaScriptCore 库。
- 桥接:类似于移动平台,通过对应平台的语言(如 C++ 或 Objective-C)将 JavaScriptCore 嵌入应用中,允许 JavaScript 代码与原生代码进行通信。
核心技术点:桥接机制
iOS 平台的桥接
在 iOS 上,React Native 通过 RCTBridge
将 JavaScriptCore 嵌入应用中。下面是简化的流程:
- JavaScriptCore 实例:创建一个 JavaScriptCore 上下文 (
JSContext
)。 - 加载 JavaScript 代码:将 JavaScript 代码加载到
JSContext
中执行。 - 调用原生代码:通过
RCTBridge
,JavaScript 代码可以调用 Objective-C/Swift 方法。这是通过将原生方法暴露给 JavaScript 上下文实现的。
Android 平台的桥接
在 Android 上,React Native 通过 JNI 将 JavaScriptCore 嵌入应用中。下面是简化的流程:
- JavaScriptCore 实例:创建一个 JavaScriptCore 上下文 (
JSContext
)。 - 加载 JavaScript 代码:将 JavaScript 代码加载到
JSContext
中执行。 - 调用原生代码:通过
ReactBridge
,Java
Script 代码可以调用 Java 方法。这是通过 JNI 将 Java 方法暴露给 JavaScript 上下文实现的。
JavaScriptCore 在 React Native 中的工作流程
- 初始化:应用启动时,React Native 初始化 JavaScriptCore 实例,并加载 JavaScript 代码(包括应用逻辑和 React 组件)。
- 执行 JavaScript 代码:JavaScriptCore 解释并执行 JavaScript 代码。
- 通信:通过桥接机制,JavaScript 代码可以调用原生方法,原生方法的结果也可以返回给 JavaScript 代码。通信主要通过序列化和反序列化 JSON 数据实现。
2.3 React Native 的优势与劣势
优势:
- 共享代码:可以共享大部分的代码逻辑,降低开发和维护成本。
- 生态成熟:React Native 拥有丰富的社区支持和插件库,几乎所有移动开发需求都能找到现成的解决方案。
- 热更新:支持热更新和即时反馈,开发效率高。
劣势:
- 性能瓶颈:由于 JavaScript 和原生代码之间通过 Bridge 通信,复杂的 UI 和动画可能会出现性能瓶颈。
- 一致性问题:使用原生组件可能导致不同平台上的表现不一致,需针对不同平台进行优化。
- 调试复杂:跨语言调试(JavaScript 和原生代码)相对复杂。
三、uniapp
3.1 uniapp 的基本原理
uniapp 是 DCloud 推出的跨平台前端框架,使用 HTML5、CSS 和 JavaScript 来开发跨平台应用。uniapp 通过将代码编译成各平台的原生代码或 Web 代码,实现跨平台运行。
3.2 uniapp 的编译和运行过程
编译阶段
-
代码处理:
- 开发者使用 HTML、CSS 和 JavaScript 编写应用代码,描述 UI 和业务逻辑。
- uniapp 编译器对这些代码进行处理,生成适用于各个平台的代码包。
-
Weex 编译:
- 针对 iOS 和 Android 平台,uniapp 使用 Weex 进行编译。
- Weex 将开发者的 Vue.js 模板(类似于 HTML)和 JavaScript 逻辑代码转换为 Weex 可执行的格式。
- CSS 样式表也被转换为适用于 Weex 的样式描述。
编译器的处理过程详解
uniapp 编译器的处理过程可以分为以下几个步骤:
-
预处理:
- 模板解析:uniapp 编译器首先解析 Vue.js 模板,将其转换为相应的虚拟 DOM 结构。
- 样式解析:解析 CSS 样式,将其转换为适用于各个平台的样式表。
- 脚本解析:解析 JavaScript 逻辑代码,确保代码符合目标平台的要求。
-
平台适配:
- 组件适配:uniapp 编译器将 Vue.js 组件映射到各个平台的原生组件。例如,
<view>
组件在微信小程序中映射为<view>
,在 iOS 中映射为UIView
,在 Android 中映射为View
。 - API 适配:uniapp 编译器将通用 API 映射到各个平台的原生 API。例如,
uni.request
在微信小程序中映射为wx.request
,在 iOS 和 Android 中映射为各自的网络请求库。
- 组件适配:uniapp 编译器将 Vue.js 组件映射到各个平台的原生组件。例如,
-
代码生成:
- 小程序代码生成:对于小程序平台,uniapp 编译器将 Vue.js 模板、CSS 样式和 JavaScript 逻辑转换为小程序的 WXML、WXSS 和 JS 文件。
- 原生代码生成:对于 iOS 和 Android 平台,uniapp 编译器使用 Weex 将 Vue.js 模板和 JavaScript 逻辑转换为 Weex 格式,生成可以运行在 Weex 容器中的代码包。
-
打包与优化:
- 资源打包:uniapp 编译器将处理过的代码、样式和资源文件打包成一个完整的项目结构。
- 性能优化:编译器在打包过程中进行代码压缩、树摇优化(Tree Shaking)和资源合并,以提高应用的性能和加载速度。
运行阶段
- 内嵌的 Weex 容器:
- 编译后的应用在 iOS 和 Android 上运行时,会包含一个内嵌的 Weex 容器。
- iOS 平台:在 iOS 上,Weex 容器通过 Objective-C 或 Swift 嵌入应用。Weex 使用 JavaScriptCore 作为 JavaScript 引擎,将 Weex 代码解析并执行。Weex 容器实际上是一个 UIView 控件,负责渲染 Weex 页面。
- Android 平台:在 Android 上,Weex 容器通过 Java 嵌入应用。Weex 使用 V8 作为 JavaScript 引擎,将 Weex 代码解析并执行。Weex 容器实际上是一个 View 控件,负责渲染 Weex 页面。
Weex 容器在各平台的存在方式
iOS 平台
-
内嵌方式:
- Weex 容器作为一个 UIView 控件内嵌在 iOS 应用中。
- 使用 Objective-C 或 Swift 编写代码,将 Weex 容器添加到视图层次结构中。
-
JavaScript 引擎:
- Weex 使用 JavaScriptCore 作为 JavaScript 引擎,这是 iOS 系统中内置的引擎。
- JavaScriptCore 解释和执行 Weex 编译生成的 JavaScript 代码。
-
渲染过程:
- Weex 解析 Vue.js 模板,生成虚拟 DOM 树,并将其映射到 UIView 控件上。
- 样式表被应用到这些 UIView 控件上,保证了 UI 的一致性。
Android 平台
-
内嵌方式:
- Weex 容器作为一个 View 控件内嵌在 Android 应用中。
- 使用 Java 编写代码,将 Weex 容器添加到视图层次结构中。
-
JavaScript 引擎:
- Weex 使用 V8 作为 JavaScript 引擎,这是一个高性能的开源 JavaScript 引擎。
- V8 解释和执行 Weex 编译生成的 JavaScript 代码。
-
渲染过程:
- Weex 解析 Vue.js 模板,生成虚拟 DOM 树,并将其映射到 View 控件上。
- 样式表被应用到这些 View 控件上,保证了 UI 的一致性。
JavaScript 引擎的作用
- JavaScriptCore(iOS):作为 WebKit 的一部分,提供高效的 JavaScript 执行环境,无需额外安装。
- V8(Android):高性能的开源 JavaScript 引擎,由 Google 开发,广泛用于 Chrome 浏览器和 Node.js 中。
-
JavaScript 引擎:
- Weex 容器内嵌了一个 JavaScript 引擎(如 JavaScriptCore 或 V8),用于解释和执行 JavaScript 代码。
-
原生组件渲染:
- Weex 解析 Vue.js 模板,生成虚拟 DOM 树,并将其映射到原生平台的视图层(iOS 的 UIView,Android 的 View)。
- 样式表被应用到这些原生视图上,保证了 UI 的一致性。
-
桥接通信:
- JavaScript 代码通过 Weex 提供的桥接机制与原生 API 进行通信。例如,当 JavaScript 代码中调用某个原生功能时,Weex 会通过桥接将该请求发送到原生层,原生层执行相应的操作后再将结果返回给 JavaScript 代码。
3.3 实际开发和扩展
自定义组件
- 开发者可以编写自定义原生组件或模块,扩展 Weex 的功能。
- 这些自定义组件可以使用 Java 或 Kotlin 编写(对于 Android),或者使用 Objective-C 或 Swift 编写(对于 iOS),然后通过 Weex 的接口将其暴露给 JavaScript 层。
插件机制
- uniapp 提供了丰富的插件,可以通过插件快速集成各种原生功能,这些插件通常也封装了大量的原生代码。
3.4 uniapp 的优势与劣势
优势:
- 多端统一:一个代码库可以同时发布到多个平台,包括 H5、小程序、iOS 和 Android 应用。
- 开发简单:基于熟悉的 Web 技术栈(HTML5、CSS、JavaScript),学习成本低。
- 插件丰富:uniapp 拥有大量的插件和扩展,能够快速集成常见功能。
劣势:
- 性能限制:由于底层采用 Web 技术,性能上可能无法与纯原生应用媲美,尤其是在高性能需求的应用中。
- 社区和生态:相比 React Native 和 Flutter,uniapp 的国际化社区和生态相对较小。
- 原生功能支持有限:虽然 uniapp 提供了很多原生 API,但在某些复杂原生功能调用上可能需要额外处理。
四、总结
在选择跨平台开发框架时,需要根据具体项目的需求、团队技术栈和应用的特定要求来权衡:
- Flutter:适合需要高性能和一致性 UI 表现的应用,尤其是在高度自定义和复杂的 UI 场景中。
- React Native:适合需要快速开发和良好社区支持的项目,能够在一定程度上平衡开发效率和性能。
- uniapp:适合希望通过 Web 技术快速开发多平台应用的项目,特别是当项目需要覆盖 H5 和小程序时。
通过了解这三大跨平台开发框架的原理和特点,可以更好地选择最适合自己项目需求的工具,提升开发效率,优化用户体验。
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
深入解析三大跨平台开发框架:Flutter、React Native 和 uniapp
深入解析三大跨平台开发框架:Flutter、React Native 和 uniapp 在移动开发中,跨平台开发框架已经成为开发者的首选工具。本篇将深入解析三大主流跨平台开发框架:Flutter、React Native 和 uniapp。下面将详细探讨它们的原理、优势和劣势。 …...
![](https://img-blog.csdnimg.cn/direct/f2225757c942492c90d3c52792113093.png)
【吊打面试官系列-MyBatis面试题】#{}和${}的区别是什么?
大家好,我是锋哥。今天分享关于 【#{}和${}的区别是什么?】面试题,希望对大家有帮助; #{}和${}的区别是什么? #{} 是预编译处理,${}是字符串替换。 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网…...
![](https://www.ngui.cc/images/no-images.jpg)
解决HTTP 400 Bad Request错误的方法
解决HTTP 400 Bad Request错误的方法 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在进行网络通信时,HTTP 400 Bad Request错误是相对常见的问题…...
![](https://img-blog.csdnimg.cn/direct/81ca8266e4ce4a1b943bb3e0167aab56.png)
Html的表单标签。(Java程序员需要掌握的前端)
表单标签 2.5.1 表单 2.5.1.1 介绍 那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如,我们经常在访问网站时,出现的登录页面、注册页面、个人信息提交页面,其实都是一个一个的表单 。 当我们在这些表单中录入数据之后…...
![](https://www.ngui.cc/images/no-images.jpg)
Arduino (esp ) 下String的内存释放
在个人的开源项目 GitHub - StarCompute/tftziku: 这是一个通过单片机在各种屏幕上显示中文的解决方案 中为了方便快速检索使用了string,于是这个string在esp8266中占了40多k,原本以为当string设置为""的时候这个40k就可以回收,结果发觉不行…...
![](https://img-blog.csdnimg.cn/direct/74b7db6f6cff47fcb67d545481848576.png)
图灵虚拟机配置
导入虚拟机 点击新建,选择虚拟硬盘文件 环境机器.vmdk 配置网络...
![](https://www.ngui.cc/images/no-images.jpg)
【SQL常用日期函数(一)】
SQL 常用日期函数-基于impala 引擎 当前日期(YYYY-MM-DD) SELECT CURRENT_DATE(); -- 2024-06-30昨天 SELECT CURRENT_DATE(); -- 2024-06-30 SELECT CAST( DAYS_ADD(TO_DATE( CURRENT_DATE() ), -1 ) AS VARCHAR(10) ); -- 2024-06-29 SELECT CAST( …...
![](https://img-blog.csdnimg.cn/img_convert/3df0e263f901d875e1c9e7dbc5c2eb32.png)
C++操作系列(二):VSCode安装和配置C++开发环境
1. VSCode下载 进入VSCode的官网网页:Download Visual Studio Code - Mac, Linux, Windows 下载相应的版本: 2. 安装VSCode 安装到指定位置: 一路下一步,直至安装完成: 3. 安装C插件 3.1. 安装C/C 点击扩展图标&…...
![](https://www.ngui.cc/images/no-images.jpg)
【java12】java12新特性之File的mismatch方法
Java12引入了一个新的方法 mismatch,它属于java.nio.file.Files类。此方法用于比较两个文件的内容,并返回第一个不匹配字节的位置。如果两个文件完全相同,则返回-1。 Files.mismatch 方法声明 public static long mismatch(Path path1, Pat…...
![](https://img-blog.csdnimg.cn/direct/35e00a11226a43acb273eb61a99ef85f.png)
uni-app (通过HBuilderX 和 VS Code 开发)详细连接过程教学。
使用 HBuilderX 创建 uni-app 项目 并编译到微信开发者工具。 uni-app 支持两种方式创建项目: 通过 HBuilderX 创建 通过命令行创建 首先我们需要先下载HBuilderX 下载链接地址:DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2…...
![](https://img-blog.csdnimg.cn/direct/48f8ac35edf04684b0f49a3aa7b17050.png)
安宝特方案 | AR术者培养:AR眼镜如何帮助医生从“看”到“做”?
每一种新药品的上市都需要通过大量的临床试验,而每一种新的手术工具在普及使用之前也需要经过反复的实践和验证。医疗器械公司都面临着这样的挑战:如何促使保守谨慎的医生从仅仅观察新工具在手术中的应用,转变为在实际手术中实操这项工具。安…...
![](https://i-blog.csdnimg.cn/direct/1a6813bce4cb40199da8ebc9cf21e920.png)
20240628每日前端---------解决vue项目滥用watch
主题 滥用watch。 名字解释 watch 例子 先看一个代码例子: <template>{{ dataList }} </template><script setup lang"ts"> import { ref, watch } from "vue";const dataList ref([]); const props defineProps([&q…...
![](https://img-blog.csdnimg.cn/direct/1ef04bc488784940932841d4d3897b9c.png)
【LLM 评估】GLUE benchmark:NLU 的多任务 benchmark
论文:GLUE: A Multi-Task Benchmark and Analysis Platform for Natural Language Understanding ⭐⭐⭐⭐ arXiv:1804.07461, ICLR 2019 Site: https://gluebenchmark.com/ 文章目录 一、论文速读二、GLUE 任务列表2.1 CoLA(Corpus of Linguistic Accep…...
![](https://img-blog.csdnimg.cn/direct/d5c01bd8930745b1b865a16951493f48.png)
Go线程调度器
基本结构 字段gcwaiting、stopwait和stopnoted都是串行运行时任务执行前后的辅助协调手段 gcwaiting字段的值用于表示是否需要停止调度 在停止调度前,该值会被设置为1在恢复调度之前,该值会被设置为0这样做的作用是,一些调度任务在执行时只…...
![](https://img-blog.csdnimg.cn/direct/038da0e46bf34d63b26c234d8cb82003.png)
使用 fvm 管理 Flutter 版本
文章目录 Github官网fvm 安装Mac/Linux 环境Windows 环境 fvm 环境变量fvm 基本命令 Github https://github.com/leoafarias/fvmhttps://github.com/flutter/flutter 官网 https://fvm.app/ fvm 安装 Mac/Linux 环境 Install.sh curl -fsSL https://fvm.app/install.sh …...
![](https://img-blog.csdnimg.cn/direct/e6bc34873b804d32885c7850329ef8ba.png)
若依-前后端分离项目学习
★★★★★省流 直接看第一集和最后一集★★★★★ 第一天(6.24) 具体参考视频 b站 楠哥教你学Java 【【开源项目学习】若依前后端分离版,通俗易懂,快速上手】 https://www.bilibili.com/video/BV1HT4y1d7oA/?shar…...
![](https://www.ngui.cc/images/no-images.jpg)
使用adb shell getprop命令获取Android设备的属性
常用属性获取: adb shell getprop ro.build.version.emui —查询EMUI版本 adb shell getprop ro.product.brand —查询手机品牌 adb shell getprop ro.product.name --查询设备名称 adb shell getprop ro.serialno —查询设备序列号 获取手机系统信息( CPU,厂商…...
![](https://www.ngui.cc/images/no-images.jpg)
LNMP环境部署指南
本文档将指导您在CentOS 6.5上部署LNMP(Linux、Nginx、MySQL、PHP)环境。 系统环境 系统平台:CentOS release 6.5 安装前准备 在安装LNMP之前,您需要安装一些编译器和依赖包。 必备编译器和工具 #安装gcc、gcc-c编译器&#…...
![](https://img-blog.csdnimg.cn/direct/1fbb295a14724239a1cb80129cb99756.jpeg)
[stm32]温湿度采集与OLED显示
一、I2C总线协议 I2C(Inter-integrated circuit )是一种允许从不同的芯片或电路与不同的主芯片通信的协议。它仅用于短距离通信,是一种用于两个或多个设备之间进行数据传输的串行总线技术,它可以让你在微处理器、传感器、存储器、…...
![](https://img-blog.csdnimg.cn/direct/479334992b814e05b0ab82a74cb059fc.jpeg)
大模型知识库的使用
大模型知识库的使用通常涉及以下几个方面,使用大模型知识库可以提高信息检索的准确性和效率,促进知识的传播和应用。同时,也需要关注知识库的质量和更新,以确保提供的知识是准确和可靠的。北京木奇移动技术有限公司,专…...
![](https://img-blog.csdnimg.cn/direct/57c8fdabca9448d28057bc09ae90b313.png)
Docker - Oracle Database 23ai Free
博文目录 文章目录 说明命令NavicatSYSTEMPDBADMIN 扩展公共用户本地用户 说明 Oracle 官方镜像仓库 Database 23ai Free | Oracle Docker 官方没有提供 Oracle Database 相关镜像, 但是 Oracle 官方镜像仓库有提供, 打开上面的链接, 选择 Database, 选择合适的版本, 如 enter…...
![](https://www.ngui.cc/images/no-images.jpg)
spring常用方法
1. 读取配置文件信息 方式一: // 获取文件路径 String fileName "application.yaml"; String filePath this.getClass().getClassLoader().getResource(fileName).getPath();BufferedReader bufferedReader new BufferedReader(new FileReader(path)…...
![](https://img-blog.csdnimg.cn/direct/8bace4fcf1404f7db8c4fd8cde0c2ed3.png)
虚拟机能装在移动硬盘里吗安全吗 PD虚拟机迁移到移动硬盘的方法
虚拟机技术的迅速发展为用户提供了更为灵活的跨系统办公方案。许多用户希望在不同的电脑设备上运行相同的虚拟机,同时带来的也有一个问题:虚拟机能否装在移动硬盘里?针对用户的疑问,接下来给大家介绍虚拟机能装在移动硬盘里吗&…...
![](https://www.ngui.cc/images/no-images.jpg)
刷算法Leetcode---7(二叉树篇)(前中后序遍历)
前言 本文是跟着代码随想录的栈与队列顺序进行刷题并编写的 代码随想录 好久没刷算法了,最近又开始继续刷,果然还是要坚持。 二叉树的题目比之前多了好多,就多分几次写啦~ 这是力扣刷算法的其他文章链接:刷算法Leetcode文章汇总 …...
![](https://img-blog.csdnimg.cn/direct/6d378825c17f4129b97cbe48bed95589.png)
AliyunOS安装Node.js
方法1:dnf软件包安装工具自动安装 最方便的安装方式是通过系统的dnf工具,我测试使用的AliyunOS的版本是Alibaba Cloud Linux 3.2104,具体流程如下: dnf module list nodejs #列出服务器中可以使用的所有nodejs版本确定下来希望安…...
![](https://img-blog.csdnimg.cn/direct/52f311b400c04a83997b190b7080bc2e.png#pic_center)
three.js - MeshPhongMaterial材质(实现玻璃水晶球效果)
1、概念 phong网格材质:Mesh - Phong - Material 一种用于具有镜面高光的光泽表面的材质。 它可以模拟,具有镜面高光的光泽表面,提供镜面反射效果。 MeshPhongMaterial: MeshPhongMaterial是一种基于Phong光照模型的材质&#…...
![](https://img-blog.csdnimg.cn/img_convert/8c78bed6beeb00ae1fee132669d0926a.png)
笔记本电脑安装CentOS
正文共:1234 字 24 图,预估阅读时间:2 分钟 前面我们对VPP进行了多次介绍(羡慕!大佬的VPP能达到180G性能,而我的却只有13.5G),可以发现他的很多优点,但是我们也可以发现它…...
![](https://www.ngui.cc/images/no-images.jpg)
ssh转发功能入门
端口转发概述 端口转发,能够将其他TCP端口的网络数据通过SSH链路转发,并且提供了ssh的加密和解密的服务。 ssh端口转发有如下这些优点: 提供了ssh的加密传输,利于安全能够突破防火墙限制 目前ssh端口转发有如下几种方式&#x…...
![](https://img-blog.csdnimg.cn/direct/c2cb3f4d793a420ea6ceabfa74325dfb.png#pic_center)
Listary(Windows 文件搜索工具)专业版值得购买吗?
说到经典的国货软件,有一款 Win 软件是一定绕不过去的。它就是知名的本地文件搜索工具 Listary! 便捷的文件搜索窗口;快捷操作的体验;与系统更匹配的外观设计;更智能的排序和更可靠的索引。 便捷的文件搜索窗口 紧凑…...
![](https://www.ngui.cc/images/no-images.jpg)
面试突击指南:Java基础面试题2
面向对象和集合 1. 面向对象和面向过程的区别 面向过程:面向过程的编程方式是分析解决问题的步骤,然后用函数把这些步骤一步一步地实现,并在使用的时候逐个调用。这种方式性能较高,因此在单片机和嵌入式开发中经常采用面向过程开发。 面向对象:面向对象的编程方式是把问…...
![](https://www.ngui.cc/images/no-images.jpg)
MySQL快速安装(mysql8.0.30区别之前yum安装)
目录 一.初始化环境并解压 二.创建程序用户管理 三.修改mysql目录和配置文件的权限 四.修改配置文件 五.设置环境变量,申明/宣告mysql命令便于系统识别 六.初始化数据库 七.设置系统识别,进行操作 八.初始化数据库密码 九.用户并设置密码 十.赋…...
![](https://www.ngui.cc/images/no-images.jpg)
俄罗斯防空系统
俄罗斯的S系列防空系统是一系列先进的地对空导弹系统,旨在防御各类空中威胁,包括飞机、无人机、巡航导弹和弹道导弹。以下是几种主要的S系列防空系统: 1. **S-300系统**: - **S-300P**:最早期的版本,用…...
![](https://img-blog.csdnimg.cn/direct/becbf6a4900d4fa3a379f76f20a5f85e.png)
文件上传漏洞---Pyload
文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 本文重点从靶场案例分析文件上传漏洞常见的Pylod,本文演示靶场upload-labs 一.文件类型---Pyload 不同的文件对应不同的文件类型,后端代码通过限制特定的文件类型…...
![](https://img-blog.csdnimg.cn/direct/b8b3771a093641429aefa8e173261ffb.png)
应用案例 | 如何监测高价值货物在物流运输过程中受到的振动和冲击?全面保障货物安全
一、货物运输 不同种类的货物对运输的要求不同,钢铁、煤炭、矿石等大宗物资通常对运输要求较低,而电子产品、IT 产品、家电等高价值敏感类货物则更强调运输的安全性和时效性,往往希望能尽可能安全和快速送达这类货物,使之尽快进入…...
![](https://img-blog.csdnimg.cn/direct/7c2479705897426291b75c21009e9ba7.png)
VMware17安装Ubuntu20版本-保姆级别
首先需要安装好VMware和Ubuntu20的镜像,在网上搜索Ubuntu镜像下载即可,最后选择国内镜像站下载,这样更快点,然后打开VMware。 1.创建虚拟机: 2.选择自定义: 3.默认,继续下一步: 4.选…...
![](https://www.ngui.cc/images/no-images.jpg)
初探Xcode工具
初探Xcode工具 Xcode是苹果公司为Mac OS X和iOS平台开发软件的集成开发环境(IDE)。作为苹果开发者的首选工具,Xcode提供了一系列强大的功能,帮助开发者设计、编写、调试和发布应用程序。本文将对Xcode进行初步探索,介…...
![](https://img-blog.csdnimg.cn/direct/977fed0a32fb4bfc8c80334484abf905.png)
小迪安全v2023笔记 1-18
小迪安全v2023笔记 1-18 棱角社区 文章目录 1. 基础入门1. 正向shell与反向shell2. web应用3. 抓包,封包,协议,app,小程序,pc应用,web应用 2. 信息打点1. 常见信息获取2. 文件泄露3. 常见阻碍4. CDN绕过&a…...
![](https://img-blog.csdnimg.cn/direct/cea1024404f94476b8fddf0edb91ce7f.png)
RabbitMQ WEB管理端介绍
页面功能概览 Overview(概述)Connections(连接)Channels(通道)Exchanges(交换器)Queues(队列)Admin(用户管理)。 1. Overview(概述) 主要分为三部分 1.1 Queued messages(所有队列的消息情况) Ready:待消费的消息总数Unacked:待应…...
![](https://www.ngui.cc/images/no-images.jpg)
三阶魔方公式详解及快速解法方法介绍
三阶魔方公式详解及快速解法方法介绍 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们来深入探讨三阶魔方的公式及其快速解法方法。无论是初学者还是已经…...
![](https://www.ngui.cc/images/no-images.jpg)
前端的拖拽和缩放(缩放以鼠标为中心)
效果: 拖拽和缩放(缩放以鼠标为中心) 代码具体实现如下: 但是有几个注意点 (1)为什么需要设置 transform-origin: 0 0; 缩放时以鼠标为中心进行缩放。这意味着需要手动计算缩放过程中元素的位移&#…...
![](https://img-blog.csdnimg.cn/direct/cc022792bfed43b89a4a66fc7d87b705.jpeg)
【Vue】单向和双向数据绑定
在 Vue.js 中,数据绑定可以分为单向数据绑定和双向数据绑定两种类型。 单向数据绑定 单向数据绑定是指数据从模型流向视图,即数据的变化会自动反映到视图中,但视图中的变化不会自动反映回模型。Vue.js 中的单向数据绑定主要通过以下方式实现…...
![](https://img-blog.csdnimg.cn/img_convert/cbe34b102ec8c2dc8efcc1794af0767d.png)
HDFS学习
3.5 HDFS存储原理 3.5.1 冗余数据保存 作为一个分布式文件系统,为了保证系统的容错性和可用性,HDFS采用了多副本方式对数据进行冗余存储,通常一个数据块的多个副本会被分布到不同的数据节点上。 如图所示,数据块1被分别存放到…...
![](https://img-blog.csdnimg.cn/direct/e398bee0007e42a5a6fc339900d3f10e.png)
Winform使用HttpClient调用WebApi的基本用法
Winform程序调用WebApi的方式有很多,本文学习并记录采用HttpClient调用基于GET、POST请求的WebApi的基本方式。WebApi使用之前编写的检索环境检测数据的接口,如下图所示。 调用基于GET请求的无参数WebApi 创建HttpClient实例后调用GetStringAsync函数获…...
![](https://img-blog.csdnimg.cn/direct/9c5c658b0ff04758a2316e9c6c592084.png)
python–基础篇–正则表达式–是什么
文章目录 定义一:正则表达式就是记录文本规则的代码定义一:正则表达式是一个特殊的字符序列,用于判断一个字符串是否与我们所设定的字符序列是否匹配,也就是说检查一个字符串是否与某种模式匹配。初识 Python 正则表达式 定义一&a…...
![](https://img-blog.csdnimg.cn/direct/7716418ca85d46349f4dae8d99e7e2dc.png)
15 个适用于企业的生成式 AI 用例
作者:来自 Elastic Jennifer Klinger 关于生成式人工智能及其能做什么(和不能做什么)有很多讨论。生成式人工智能(例如大型语言模型 - LLMs)利用从大量训练数据中学习到的模式和结构来创建原创内容,而无需存…...
![](https://img-blog.csdnimg.cn/direct/0839bc2389b8429c85c760537f8820b9.png)
若依框架中组件使用教程
...
![](https://www.ngui.cc/images/no-images.jpg)
秋招力扣刷题——数据流的中位数
一、题目要求 中位数是有序整数列表中的中间值。如果列表的大小是偶数,则没有中间值,中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。 例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() 初始化 …...
![](https://img-blog.csdnimg.cn/direct/89200e15c4714979ac8ef0126b8644d7.png)
51单片机学习——LED功能一系列实现
目录 一、开发前准备 二、点亮LED 三、LED闪烁 四、LED流水灯 五、LED流水灯plus 一、开发前准备 开发工具软件 烧录软件 其次还需要一块51单片机学习开发板及原理图 keil创造project文件及开启生成.hex文件 二、点亮LED 看二位进制对照原理图; #include <…...
![](https://img-blog.csdnimg.cn/img_convert/fb60a3454da0058c14dd78784ce0d1e9.png)
互联网大厂核心知识总结PDF资料
我们要敢于追求卓越,也能承认自己平庸,不要低估3,5,10年沉淀的威力 hi 大家好,我是大师兄,大厂工作特点是需要多方面的知识和技能。这种学习和积累一般人需要一段的时间,不太可能一蹴而就&…...
![](https://img-blog.csdnimg.cn/direct/e6bf3f382ba642b7a1ba7015e54e6775.png)
设计模式-状态模式和策略模式
1.状态模式 1.1定义 当一个对象的内在状态改变时允许根据当前状态作出不同的行为; 1.2 适用场景 (1)一个对象的行为取决于它的状态,并且它必须在运行时根据状态来决定其行为. (2)代码中包含了大量的与状态有关的条件语句,例如:一个操作含有庞大的多分值语句(if…...
![](https://www.ngui.cc/images/no-images.jpg)
VueDraggable拖拽
import { VueDraggable } from ‘vue-draggable-plus’ <VueDraggable style“display: flex;flex-wrap: wrap;” v-model“fileListResourcesImgs” end“onEnd”> <div class“icon-container” click“changeResourcesImgsIndex(index)”> <span class“del…...
![](https://img-blog.csdnimg.cn/direct/47c87498ffb64573963d53dd63cd32b8.png)
MySQL的Geometry数据处理之WKB方案
MySQL的Geometry数据处理之WKT方案:https://blog.csdn.net/qq_42402854/article/details/140134357 MySQL的Geometry数据处理之WKT方案中,介绍WTK方案的优点,也感受到它的繁琐和缺陷。比如: 需要借助 ST_GeomFromText和 ST_AsTex…...
![](https://www.ngui.cc/images/no-images.jpg)
配置linux net.ipv4.ip_forward数据包转发
前言 出于系统安全考虑,在默认情况下,Linux系统是禁止数据包转发的。数据包转发指的是当主机拥有多个网卡时,通过一个网卡接收到的数据包,根据目的IP地址来转发数据包到其他网卡。这个功能通常用于路由器。 如果在Linux系统中需要…...
![](https://www.ngui.cc/images/no-images.jpg)
C语言 牛顿迭代法求方程根
用牛顿迭代法求下面方程在1.5附近的根。 2x^3-4x^23x-60 这个程序使用牛顿迭代法求方程 2x^3 - 4x^2 3x - 6 0 在 1.5 附近的根。 #include <stdio.h> #include <math.h>// 方程 f(x) double f(double x) {return 2 * pow(x, 3) - 4 * pow(x, 2) 3 * x - 6; }…...
![](https://www.ngui.cc/images/no-images.jpg)
Laravel模型事件完全指南:触发应用程序的动态行为
标题:Laravel模型事件完全指南:触发应用程序的动态行为 在Laravel框架中,模型事件提供了一种优雅的方式来处理Eloquent模型生命周期中的各种关键时刻。通过监听和响应这些事件,开发者可以自动化许多常见的任务,如日志…...
![](https://img-blog.csdnimg.cn/direct/60ffb5d2599e4dfbb1356dff6e71883c.png)
vscode jupyter选择Python环境时找不到我安装的Python
在一些情况下,我们需要自己安装一个Python,在选择内核是可能找不到指定的Python版本, 再次打开内核选择页面就能看到Python环境了 注意先到指定环境下安装依赖包: ./python3 pip install ipykernel notebook jupyter...
![](https://www.ngui.cc/images/no-images.jpg)
学习前端滚动容器
学习前端滚动容器 一、前言1、创建基本的滚动容器组件2、解析代码 二、示例应用1、使用滚动容器组件2、创建滚动容器组件结语 一、前言 滚动容器是指在页面布局中可以垂直或水平滚动其内容的区域。这种技术通常用于处理内容过长而导致溢出的情况,例如长表单、大段文…...
![](https://www.ngui.cc/images/no-images.jpg)
Day26
Day26 注解 什么是注解 java.annotation包Annotation是从JDK1.5开始引入的新技术,注解即可以对程序员解释又可以对程序解释 注解与注释的区别 注释:对程序员解释代码信息注解:对程序和程序员解释代码信息 注解的所用 不是程序本身࿰…...
![](https://www.ngui.cc/images/no-images.jpg)
Vue组件通讯$refs获取组件实例例子
在Vue中,$refs 是一个对象,它持有注册过 ref 特性 (attribute) 的所有 DOM 元素和子组件实例。你可以使用 $refs 在父组件中直接访问子组件的实例或者 DOM 元素。 下面是一个使用 $refs 获取子组件实例的例子: 首先,我们有一个子…...
![](https://www.ngui.cc/images/no-images.jpg)
AI数字人及其应用
本文将简单了解下AI数字人、应用场景。 一、基本认识 AI数字人:使用人工智能技术创建的虚拟数字化人物。这些数字人物可以被设计成具有人类般的外观、行为和交互能力。它们通常用于虚拟现实、视频、游戏、培训模拟、客户服务等领域。 其中AI数字人在视频制作中是…...
![](https://img-blog.csdnimg.cn/direct/dd541a9101134fdeae4d2e137a6dad77.png)
【计算机视觉 Mamba】MambaOut: Do We Really Need Mamba for Vision?
MambaOut: Do We Really Need Mamba for Vision? 在视觉任务上我们需要Mamba吗? 论文地址 代码地址 知乎解读:王牌飞行员申请出战! 知乎解读:Mamba 模型解读 (一):MambaOut:在视觉任务中,我们真的需要 …...
![](https://rmrbcmsonline.peopleapp.com/upload/zw/bjh_image/1716714430_833_60000d9d2dc715fb08110a00390c36be.jpeg)
英军战机坠毁,他们都发声
英军战机坠毁,英王室威廉夫妇罕见联合发声,苏纳克也发声!综合英国广播公司(BBC)、《快报》25日报道,英国王储威廉和凯特王妃罕见联合发声,对当日英国发生战机坠毁事故表示悲痛。BBC称,当地时间25日,一架战机在英国林肯郡英国皇家空军基地附近坠毁,一名飞行员死亡。英…...