【适配鸿蒙next】Flutter 新一代混合栈管理框架

前言

据最新消息显示,华为今年下半年将全面转向其自主平台HarmonyOS,放弃Android系统。

报道中提到,下一版HarmonyOS预计将随华为即将推出的Mate 70旗舰系列一起发布。

据悉,HarmonyOS Next 已经扩展到4000个应用程序,其中包括支付宝和麦当劳。

按照消息人士的说法,HarmonyOS Next的应用总数将在年内增至5000个,华为的目标是在短期内达到500000个。

HarmonyOS Next从零开始设计,由华为自主开发操作系统。虽然最初这套代码是为物联网设备编写,但华为很快意识到,它需要通过开发自己的操作系统来最大限度地降低外界的打压和限制。

事实上,华为正在通过自己的努力,让大家看到第三个主流智能手机操作系统,并与苹果的iOS和Android展开竞争。

本文主要讲Flutter 新一代混合栈管理框架

简介

Fusion 是新一代的混合栈管理框架,用于 Flutter 与 Native 页面统一管理,并支持页面通信、页面生命周期监听等功能。Fusion 即 融合,我们的设计初衷就是帮助开发者在使用 Flutter 与 Native 进行混合开发时尽量感受不到两者的隔阂,提升开发体验。此外,Fusion 彻底解决了混合开发过程中普遍存在的黑屏、白屏、闪屏等问题,更加适合重视用户体验的App使用。

从 4.0 开始,Fusion 已完成纯鸿蒙平台(HarmonyOS Next/OpenHarmony,以下简称 HarmonyOS)的适配,开发者可以在Android、iOS、HarmonyOS上得到完全一致的体验。(HarmonyOS 的 Flutter SDK 可以在这里获取)
在这里插入图片描述

OSAndroidiOSHarmonyOSSDK5.0(21)+11.0+4.1(11)+
Fusion 采用引擎复用方案,在 Flutter 与 Native 页面多次跳转情况下,APP 始终仅有一份 FlutterEngine 实例,因此拥有更好的性能和更低的内存占用。
Fusion 也是目前仅有的支持混合开发时应用在后台被系统回收后,所有Flutter页面均可正常恢复的混合栈框架。

开始使用

0、准备

在开始前需要按照 Flutter 官方文档,将 Flutter Module 项目接入到 Android、iOS、HarmonyOS 工程中。

1、初始化

Flutter 侧
使用 FusionApp 替换之前使用的 App Widget,并传入所需路由表,默认路由表和自定义路由表可单独设置也可同时设置。

void main() {runApp(FusionApp(// 默认路由表routeMap: routeMap,// 自定义路由表customRouteMap: customRouteMap,));
}// 默认路由表,使用默认的 PageRoute
// 使用统一的路由动画
final Map<String, FusionPageFactory> routeMap = {'/test': (arguments) => TestPage(arguments: arguments),kUnknownRoute: (arguments) => UnknownPage(arguments: arguments),
};// 自定义路由表,可自定义 PageRoute
// 比如:某些页面需要特定的路由动画则可使用该路由表
final Map<String, FusionPageCustomFactory> customRouteMap = {'/mine': (settings) => PageRouteBuilder(opaque: false,settings: settings,pageBuilder: (_, __, ___) => MinePage(arguments: settings.arguments as Map<String, dynamic>?)),
};

P.S: kUnknownRoute 表示未定义路由
注意:如果项目使用了 flutter_screenutil,需要在 runApp 前调用 Fusion.instance.install(),没有使用 flutter_screenutil则无须该步骤。

void main() {Fusion.instance.install();runApp(FusionApp(// 默认路由表routeMap: routeMap,// 自定义路由表customRouteMap: customRouteMap,));
}

Android 侧
在 Application 中进行初始化,并实现 FusionRouteDelegate 接口

class MyApplication : Application(), FusionRouteDelegate {override fun onCreate() {super.onCreate()Fusion.install(this, this)}override fun pushNativeRoute(name: String?, arguments: Map<String, Any>?) {// 根据路由 name 跳转对应 Native 页面}override fun pushFlutterRoute(name: String?, arguments: Map<String, Any>?) {// 根据路由 name 跳转对应 Flutter 页面// 可在 arguments 中存放参数判断是否需要打开透明页面}
}

iOS 侧
在 AppDelegate 中进行初始化,并实现 FusionRouteDelegate 代理

@UIApplicationMain
@objc class AppDelegate: UIResponder, UIApplicationDelegate, FusionRouteDelegate {func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {...Fusion.instance.install(self)...return true}func pushNativeRoute(name: String?, arguments: Dictionary<String, Any>?) {// 根据路由 name 跳转对应 Native 页面}func pushFlutterRoute(name: String?, arguments: Dictionary<String, Any>?) {// 根据路由 name 跳转对应 Flutter 页面// 可在 arguments 中存放参数判断是否需要打开透明页面// 可在 arguments 中存放参数判断是 push 还是 present}
}

HarmonyOS 侧

在 UIAbility 中进行初始化,并实现 FusionRouteDelegate 代理

export default class EntryAbility extends UIAbility implements FusionRouteDelegate {private static TAG = 'EntryAbility'private mainWindow: window.Window | null = nullprivate windowStage: window.WindowStage | null = nulloverride async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {await Fusion.instance.install(this.context, this)GeneratedPluginRegistrant.registerWith(Fusion.instance.defaultEngine!)}pushNativeRoute(name: string, args: Map<string, Object> | null): void {// 根据路由 name 跳转对应 Native 页面}pushFlutterRoute(name: string, args: Map<string, Object> | null): void {// 根据路由 name 跳转对应 Flutter 页面// 可在 arguments 中存放参数判断是否需要打开透明页面}
}

2、Flutter 容器

普通页面模式
Android 侧
通过 FusionActivity(或其子类) 创建 Flutter 容器,启动容器时需要使用 Fusion 提供的 buildFusionIntent 方法,其中参数 transparent 需设为 false。其 xml 配置参考如下(如果使用 FusionActivity 则不用配置):

    <activityandroid:name=".CustomFusionActivity"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:exported="false"android:hardwareAccelerated="true"android:launchMode="standard"android:theme="@style/FusionNormalTheme"android:windowSoftInputMode="adjustResize" />

iOS 侧
通过 FusionViewController (或其子类)创建 Flutter 容器,push 和 present 均支持。FusionViewController 默认隐藏了 UINavigationController。
在 iOS 中需要处理原生右滑退出手势和 Flutter 手势冲突的问题,解决方法也很简单:只需在自定义的 Flutter 容器中实现 FusionPopGestureHandler 并在对应方法中启用或者关闭原生手势即可,这样可以实现如果当前 Flutter 容器存在多个 Flutter 页面时,右滑手势是退出 Flutter 页面,而当 Flutter 页面只有一个时则右滑退出 Flutter 容器。

  // 启用原生手势func enablePopGesture() {// 以下代码仅做演示,不可直接照搬,需根据APP实际情况自行实现navigationController?.interactivePopGestureRecognizer?.isEnabled = true}// 关闭原生手势func disablePopGesture() {// 以下代码仅做演示,不可直接照搬,需根据APP实际情况自行实现navigationController?.interactivePopGestureRecognizer?.isEnabled = false}

HarmonyOS 侧
通过 FusionEntry(或其子类) 创建 Flutter 容器,启动容器时需要使用 Fusion 提供的 buildFusionParams 方法,也可直接使用 FusionPage。默认全屏模式。

    const params = buildFusionParams(name, args, false, backgroundColor)this.mainLocalStorage?.setOrCreate('params', params)router.pushNamedRoute({name: FusionConstant.FUSION_ROUTE_NAME})

透明页面模式

Android 侧
使用方式与普通页面模式相似,只是buildFusionIntent 方法的参数 transparent 需设为 true,其 xml 配置参考如下:

     <activityandroid:name=".TransparentFusionActivity"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:exported="false"android:hardwareAccelerated="true"android:launchMode="standard"android:theme="@style/FusionTransparentTheme"android:windowSoftInputMode="adjustResize" />

iOS 侧
使用方式与普通页面模式相似:

let fusionVc = CustomViewController(routeName: name, routeArguments: arguments, transparent: true)
navController?.present(fusionVc, animated: false)

HarmonyOS 侧
使用方式与普通页面模式相似:

    const params = buildFusionParams(name, args, true, backgroundColor)this.windowStage?.createSubWindow(FusionConstant.TRANSPARENT_WINDOW, (_, win) => {const record: Record<string, Object> = {'params': params}win.loadContentByName(FusionConstant.FUSION_ROUTE_NAME, new LocalStorage(record))win.showWindow()})

Flutter 侧
同时Flutter页面背景也需要设置为透明

子页面模式

子页面模式是指一个或多个 Flutter 页面同时嵌入到 Native 容器中的场景,如:使用Tab切换Flutter和原生页面,Fusion 支持多个 Flutter 页面嵌入同一个 Native 容器中
Android 侧
使用 FusionFragment 以支持子页面模式,创建 FusionFragment 对象需要使用 buildFusionFragment 方法
iOS 侧
与页面模式一样使用 FusionViewController
HarmonyOS 侧
与页面模式一样使用 FusionEntry,配合 buildFusionParams方法配置参数

自定义容器背景色

默认情况下容器的背景为白色,这是因为考虑到绝大多数的页面都是使用白色背景,但如果打开的首个Flutter页面的背景是其他颜色,比如夜间模式下页面为深灰色,此时是为了更好的视觉效果,可以自定义容器的背景色与首个Flutter页面的背景色一致。
Android 侧
在 buildFusionIntent 和 buildFusionFragment方法中参数 backgroundColor 设为所需背景色
iOS 侧
在创建 FusionViewController (或其子类)对象时,参数 backgroundColor 设为所需背景色
HarmonyOS 侧
在 buildFusionParams方法中参数 backgroundColor 设为所需背景色

3、路由API(FusionNavigator)

○push:将对应路由入栈,Navigator.pushNamed 与之等同,根据FusionRouteType分为以下几种方式:

○flutter模式: 在当前Flutter容器中将指定路由对应的Flutter页面入栈,如果没有则跳转kUnknownRoute对应Flutter页面
○flutterWithContainer模式: 创建一个新的Flutter容器,并将指定路由对应的Flutter页面入栈,如果没有则跳转kUnknownRoute对应Flutter页面。即执行FusionRouteDelegate的pushFlutterRoute
○native模式: 将指定路由对应的Native页面入栈,即执行FusionRouteDelegate的pushNativeRoute
○adaption模式: 自适应模式,默认类型。首先判断该路由是否是Flutter路由,如果不是则进入native模式,如果是再判断当前是否是页面是否是Flutter容器,如果是则进入flutter模式,如果不是则进入flutterWithContainer模式

●pop:在当前Flutter容器中将栈顶路由出栈,Navigator.pop 与之等同
●maybePop:在当前Flutter容器中将栈顶路由出栈,可被WillPopScope拦截
●replace:在当前Flutter容器中将栈顶路由替换为对应路由,Navigator.pushReplacementNamed 与之等同
●remove:在当前Flutter容器中移除对应路由

路由跳转与关闭等操作既可使用FusionNavigator的 API,也可使用Navigator中与之对应的API(仅上述提到的部分)

4、Flutter Plugin 注册

在 Android 和 iOS 平台上框架内部会自动注册插件,无须手动调用 GeneratedPluginRegistrant.registerWith 进行注册,但 HarmonyOS 必须手动调用该方法。

5、自定义 Channel

如果需要 Native 与 Flutter 进行通信,则需要自行创建 Channel,创建 Channel 方式如下(以 MethodChannel 为例):
Android 侧
①、与容器无关的方法
在 Application 中进行注册

val channel = Fusion.defaultEngine?.dartExecutor?.binaryMessenger?.let {MethodChannel(it,"custom_channel")
}
channel?.setMethodCallHandler { call, result -> 
}

②、与容器相关的方法
在自实现的 FusionActivity、FusionFragmentActivity、FusionFragment 上实现 FusionMessengerHandler 接口,在 configureFlutterChannel 中创建 Channel,在 releaseFlutterChannel 释放 Channel

class CustomActivity : FusionActivity(), FusionMessengerHandler {override fun configureFlutterChannel(binaryMessenger: BinaryMessenger) {val channel = MethodChannel(binaryMessenger, "custom_channel")channel.setMethodCallHandler { call, result -> }}override fun releaseFlutterChannel() {channel?.setMethodCallHandler(null)channel = null}
}

iOS 侧

①、与容器无关的方法

在 AppDelegate 中进行注册

var channel: FlutterMethodChannel? = nil
if let binaryMessenger = Fusion.instance.defaultEngine?.binaryMessenger {channel = FlutterMethodChannel(name: "custom_channel", binaryMessenger: binaryMessenger)
}
channel?.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
}

②、与容器相关的方法

在自实现的 FusionViewController 上实现 FusionMessengerHandler 协议,在协议方法中创建 Channel

class CustomViewController : FusionViewController, FusionMessengerHandler {func configureFlutterChannel(binaryMessenger: FlutterBinaryMessenger) {channel = FlutterMethodChannel(name: "custom_channel", binaryMessenger: binaryMessenger)channel?.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in}}func releaseFlutterChannel() {channel?.setMethodCallHandler(nil)channel = nil}
}

HarmonyOS 侧

①、与容器无关的方法

在 UIAbility 中进行注册

const binaryMessenger = Fusion.instance.defaultEngine?.dartExecutor.getBinaryMessenger()
const channel = new MethodChannel(binaryMessenger!, 'custom_channel')
channel.setMethodCallHandler({onMethodCall(call: MethodCall, result: MethodResult): void {}
})

②、与容器相关的方法

在自实现的 FusionEntry 上实现 FusionMessengerHandler 接口,在 configureFlutterChannel 中创建 Channel,在 releaseFlutterChannel 释放 Channel

export default class CustomFusionEntry extends FusionEntry implements FusionMessengerHandler, MethodCallHandler {private channel: MethodChannel | null = nullconfigureFlutterChannel(binaryMessenger: BinaryMessenger): void {this.channel = new MethodChannel(binaryMessenger, 'custom_channel')this.channel.setMethodCallHandler(this)}onMethodCall(call: MethodCall, result: MethodResult): void {result.success(`Custom Channel:${this}_${call.method}`)}releaseFlutterChannel(): void {this.channel?.setMethodCallHandler(null)this.channel = null}
}

BasicMessageChannel 和 EventChannel 使用也是类似

P.S.: 与容器相关的方法是与容器生命周期绑定的,如果容器不可见或者销毁了则无法收到Channel消息。

6、生命周期

应用生命周期监听:

①、在 Flutter 侧任意处注册监听皆可,并implements FusionAppLifecycleListener

②、根据实际情况决定是否需要注销监听

void main() {...FusionAppLifecycleBinding.instance.register(MyAppLifecycleListener());runApp(const MyApp());
}class MyAppLifecycleListener implements FusionAppLifecycleListener {@overridevoid onBackground() {print('onBackground');}@overridevoid onForeground() {print('onForeground');}
}

FusionAppLifecycleListener 生命周期回调函数:

●onForeground: 应用进入前台会被调用(首次启动不会被调用,Android 与 iOS 保持一致)
●onBackground: 应用退到后台会被调用

页面生命周期监听:

●①、在需要监听生命周期页面的 State 中 implements FusionPageLifecycleListener
●②、在 didChangeDependencies 中注册监听
●③、在 dispose 中注销监听

class LifecyclePage extends StatefulWidget {const LifecyclePage({Key? key}) : super(key: key);@overrideState<LifecyclePage> createState() => _LifecyclePageState();
}class _LifecyclePageState extends State<LifecyclePage>implements FusionPageLifecycleListener {@overrideWidget build(BuildContext context) {return Container();}@overridevoid didChangeDependencies() {super.didChangeDependencies();FusionPageLifecycleBinding.instance.register(this);}@overridevoid onPageVisible() {}@overridevoid onPageInvisible() {}@overridevoid onForeground() {}@overridevoid onBackground() {}@overridevoid dispose() {super.dispose();FusionPageLifecycleBinding.instance.unregister(this);}
}

PageLifecycleListener 生命周期回调函数:

●onForeground: 应用进入前台会被调用,所有注册了生命周期监听的页面都会收到
●onBackground: 应用退到后台会被调用,所有注册了生命周期监听的页面都会收到
●onPageVisible: 该 Flutter 页面可见时被调用,如:从 Native 页面或其他 Flutter 页面 push 到该 Flutter 页面时;从 Native 页面或其他 Flutter 页面 pop 到该 Flutter 页面时;应用进入前台时也会被调用。
●onPageInvisible: 该 Flutter 页面不可见时被调用,如:从该 Flutter 页面 push 到 Native 页面或其他 Flutter 页面时;如从该 Flutter 页面 pop 到 Native 页面或其他 Flutter 页面时;应用退到后台时也会被调用。

7、全局通信

支持消息在应用中的传递,可以指定 Native 还是 Flutter 或者全局接收和发送。

注册消息监听

Flutter侧

●①、在需要监听消息的类中 implements FusionNotificationListener,并复写 onReceive 方法,该方法可收到发送过来的消息
●②、在合适时机注册监听
●③、在合适时机注销监听

class TestPage extends StatefulWidget {@overrideState<TestPage> createState() => _TestPageState();
}class _TestPageState extends State<TestPage> implements FusionNotificationListener {@overridevoid onReceive(String name, Map<String, dynamic>? body) {}@overridevoid didChangeDependencies() {super.didChangeDependencies();FusionNotificationBinding.instance.register(this);}@overridevoid dispose() {super.dispose();FusionNotificationBinding.instance.unregister(this);}
}

Native侧

●①、在需要监听消息的类中实现 FusionNotificationListener 接口,并复写 onReceive 方法,该方法可收到发送过来的消息
●②、在适当时机使用 FusionNotificationBinding 的 register 方法注册监听
●③、在适当时机使用 FusionNotificationBinding 的 unregister 方法注销监听

发送消息

三端均可使用FusionNavigator 的 sendMessage 方法来发送消息,根据使用FusionNotificationType 不同类型有不同效果:

●flutter: 仅 Flutter 可以收到
●native: 仅 Native 可以收到
●global(默认): Flutter 和 Native 都可以收到

8、返回拦截

在纯 Flutter 开发中可以使用WillPopScope组件拦截返回操作,Fusion 也完整支持该功能,使用方式与在纯 Flutter 开发完全一致,此外使用FusionNavigator.maybePop的操作也可被WillPopScope组件拦截。

9、状态恢复

Fusion 支持 Android 和 iOS 平台 APP 被回收后 Flutter 路由的恢复。

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化,不断学习和提升自己,我们才能在这个变革的时代中立于不败之地。

在这里插入图片描述

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

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

相关文章

C++【STL】改造红黑树简单模拟实现set map(带你了解set map的底层实现结构)

目录 一、学前铺垫&#xff08;泛型编程&#xff09; 二、改造红黑树 1.红黑树节点的改造 2.insert的改造 3.迭代器的实现 4.完整改造代码 三、set的模拟实现封装 四、map的模拟实现封装 五、完结撒❀ 前言&#xff1a; 下面为了简单模拟实现set map所出现的代码是以…

Tensorflow入门实战 P03-天气识别

目录 1、完整代码 2、运行结果 2.1 查看20张图片 2.2 程序运行 2.3 运行结果 3、小结 ① 代码运行过程中有报错&#xff1a; ② 修改代码如下&#xff1a; ③ 分析原因&#xff1a; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&…

NDIS Filter开发-PNP响应和安装

NDIS filter驱动可能是最容易生成的驱动之一&#xff0c;如果你安装了VS 2015 WDK之后&#xff0c;你可以直接生成一个能运行的Filter驱动&#xff0c;它一般是ndislwf。 和大部分硬件不同&#xff0c;NDIS Filter驱动介于软件和硬件抽象层之上&#xff0c;它和硬件相关&…

SpringCloud Gateway中Route Predicate Factories详细说明

官网地址&#xff1a;https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/html/#gateway-request-predicates-factories Spring Cloud Gateway将路由匹配作为Spring WebFlux HandlerMapping基础架构的一部分。 Spring Cloud Gateway …

使用 GPT-4 创作高考作文 2024年

使用 GPT-4 创作高考作文 2024年 使用 GPT-4 创作高考作文&#xff1a;技术博客指南 &#x1f914;✨摘要引言正文内容&#xff08;详细介绍&#xff09; &#x1f4da;&#x1f4a1;什么是 GPT-4&#xff1f;高考作文题目分析 ✍️&#x1f9d0;新课标I卷 人类智慧的进步&…

【C51】C51单片机实现的 抽奖机 设计与编程指南

文章目录 前言&#xff1a;1. 实现效果2. 准备工作3. 编写代码总结&#xff1a; 前言&#xff1a; 在本文中&#xff0c;我们将介绍如何使用C51单片机来实现一个简单的抽奖机。这个项目不仅能够展示C51单片机的基本应用&#xff0c;还能让我们了解如何通过编程来控制硬件&…

9.3 Go 接口的多态性

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Django 视图类

在Django框架中&#xff0c;视图类&#xff08;Class-based views&#xff0c;简称CBVs&#xff09;提供了一个面向对象的方式来定义视图。这种方式可以让你通过创建类来组织视图逻辑&#xff0c;而不是使用基于函数的视图&#xff08;Function-based views&#xff0c;简称FBV…

详解FedAvg:联邦学习的开山之作

FedAvg&#xff1a;2017年 开山之作 论文地址&#xff1a;https://proceedings.mlr.press/v54/mcmahan17a/mcmahan17a.pdf 源码地址&#xff1a;https://github.com/shaoxiongji/federated-learning 针对的问题&#xff1a;移动设备中有大量的数据&#xff0c;但显然我们不能收…

minio的一个基础使用案例:用户头像上传

文章目录 一、minio下载安装&#xff08;Windows&#xff09;二、案例需求分析三、后端接口开发 一、minio下载安装&#xff08;Windows&#xff09; 1. 下载minio服务端和客户端 minio下载地址 2. 手动搭建目录 /minio/binmc.exeminio.exe/data/logs手动创建minio应用程序目…

vivado HW_DEVICE

硬件设备 描述 在Vivado Design Suite的硬件管理器功能中&#xff0c;每个硬件目标都可以 具有一个或多个Xilinx FPGA设备进行编程或用于调试目的。这个 hw_device对象是通过hw_server打开的hw_target上的物理部分。这个 current_hw_device命令指定或返回当前设备。 相关对象 硬…

Linux—小小内核升级

本篇主要是讲述下关于内核的一些基本常识&#xff0c;并记录下内核升级和编译的过程&#xff0c;若有遗漏/有误之处&#xff0c;望各位大佬们指出。 Ⅰ 基本内核常识 常见内核安装包 内核(kernel)&#xff1a;这是Linux操作系统的核心部分&#xff0c;它负责管理系统的硬件和…

Vue3学习第二天记录

Vue3学习第二天记录 背景说明截图记录一个简单的JS文件Vue3的watch()函数Vue3的toRef()/toRefs()函数前端数据类型的分类前端写一个对外暴露的函数前端的...语法Vue3中watch()函数的总结Vue3中watchEffect()函数Vue3中watch()函数的坑Vue3中computed()函数 背景 最近在学习尚硅…

Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想

文章目录 1.下载并安装Vue2.使用Vue2.1 创建Vue以及挂载Vue2.2 模板语句的数据来源&#xff1a;data2.3 template配置项详解2.4 Vue实例和容器的关系 3.安装devtools4.MVVM分层思想5.通过vm可以访问哪些属性 1.下载并安装Vue &#xff08;1&#xff09;Vue是一个基于JavaScrip…

搭建高可用k8s

高可用只针对于api-server&#xff0c;需要用到nginx keepalived&#xff0c;nginx提供4层负载&#xff0c;keepalived提供vip(虚拟IP) 系统采用openEuler 22.03 LTS 1. 前期准备 因为机器内存只有16G&#xff0c;所有我采用3master 1node 1.1 修改主机配置&#xff08;所有节…

扩散模型会成为深度学习的下一个前沿领域吗?

文章目录 一、说明二、 第 1 部分&#xff1a;了解扩散模型2.1 什么是扩散模型2.2 正向扩散2.3 反向扩散 三、他们的高成本四、扩散模型的用处五、为什么扩散模型如此出色六、第 2 部分&#xff1a;使用扩散模型生成6.1 用于自然语言处理和 LLM 的文本扩散6.2 音频视频生成6.3 …

下载安装Thonny并烧录MicroPython固件至ESP32

Thonny介绍 一、Thonny的基本特点 面向初学者&#xff1a;Thonny的设计初衷是为了帮助Python初学者更轻松、更快速地入门编程。它提供了直观易懂的用户界面和丰富的功能&#xff0c;降低了编程的门槛。轻量级&#xff1a;作为一款轻量级的IDE&#xff0c;Thonny不会占用过多的…

RDK X3(aarch64) 测试激光雷达思岚A1

0. 环境 - 亚博智能的ROSMASTER-X3 - RDK X3 1.0 0.1 资料 文档资料 https://www.slamtec.com/cn/Support#rplidar-a-series SDK https://github.com/slamtec/rplidar_sdk ROS https://github.com/slamtec/rplidar_ros https://github.com/Slamtec/sllidar_ros2 1. robostu…

1310. 子数组异或查询 异或 前缀和 python

有一个正整数数组 arr&#xff0c;现给你一个对应的查询数组 queries&#xff0c;其中 queries[i] [Li, Ri]。 对于每个查询 i&#xff0c;请你计算从 Li 到 Ri 的 XOR 值&#xff08;即 arr[Li] xor arr[Li1] xor ... xor arr[Ri]&#xff09;作为本次查询的结果。 并返回一…

《精通ChatGPT:从入门到大师的Prompt指南》附录B:推荐阅读资源

作者&#xff1a;斯图尔特拉塞尔 (Stuart Russell) 和 彼得诺维格 (Peter Norvig) 简介&#xff1a;这本书被誉为人工智能领域的经典教材&#xff0c;内容涵盖了AI的基本原理、算法及其应用。无论是入门者还是专业研究者&#xff0c;都能从中获得启发。 2. 《深度学习》 作者…