uni-app之web-view组件 postMessage 通信【跨端开发系列】

news2024/12/23 18:54:46

 🔗 uniapp 跨端开发系列文章：🎀🎀🎀

  1. uni-app 组成和跨端原理    【跨端开发系列】 
  2. uni-app 各端差异注意事项 【跨端开发系列】
  3. uni-app 离线本地存储方案 【跨端开发系列】
  4. uni-app UI库、框架、组件选型指南 【跨端开发系列】
  5. uni-app 蓝牙开发 【特别专题】
  6. uni-app 导航栏开发指南 【跨端开发系列】
  7. uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
  8. uni-app 设置缓存过期时间【跨端开发系列】

一、介绍 🎯

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

二、功能框架图 📋

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

三、web-view 组件🧩

3.1 组件简介

web-view 是一个 web 浏览器组件，可以用来承载网页的 容器，会自动铺满整个页面（nvue 使用需要手动指定宽高），功能类似于 html5 里的 iframe 元素 。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

3.2 属性说明

属性名类型说明平台差异说明
srcStringwebview 指向网页的链接
allowString用于为 iframe 指定其特征策略H5
sandboxString该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。H5
fullscreenBoolean是否铺满整个页面，默认值：true。H5 (HBuilder X 3.5.4+)
webview-stylesObjectwebview 的样式App-vue
update-titleBoolean是否自动更新当前页面标题。默认值：trueApp-vue (HBuilder X 3.3.8+)
@messageEventHandler网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。H5 暂不支持（可以直接使用 window.postMessage）
@onPostMessageEventHandler网页向应用实时 postMessageApp-nvue
@loadEventHandler网页加载成功时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序
@errorEventHandler网页加载失败的时候触发此事件。微信小程序、支付宝小程序、抖音小程序、QQ小程序

属性 HarmonyOS Next 兼容性

名称HarmonyOS Next 兼容性
srcHBuilderX 4.23
allowx
sandboxx
fullscreenx
@messageHBuilderX 4.23

🎯注意

  • update-title 仅支持 App-vue 。小程序 恒为 true，H5、nvue 恒为 false

🪶src

来源AppH5微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序QQ小程序快应用360小程序快手小程序京东小程序
网络√√√√√√√√√√√
本地√√xxxxxxxxx

🪶webview-styles

属性类型说明
progressObject/Boolean进度条样式。仅加载网络 HTML 时生效，设置为 false 时禁用进度条。
widthStringweb-view 组件的宽度。
heightStringweb-view 组件的高度。

🪶progress

属性类型默认值说明
colorString#00FF00进度条颜色

 3.3 代码示例

<template>
	<view>
		<web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				}
			}
		}
	}
</script>

<style>

</style>

🎯注意：

  1. 小程序 仅支持加载 网络网页 ，🚫不支持 本地html。
  2. 补充说明：app-vue下 web-view 组件🚫不支持 ​​​​​​​自定义样式​​​​​​​，而 v-show 的本质是改变组件的样式。即组件支持 ​​​​​​​ v-if  ​​​​​​​而不是支持 ​​​​​​​ v-show  ​​​​​​​。
  3. 小程序 端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，   ​​​​​​​navigationStyle: custom 对 web-view 组件 ​​​​​​​​​​​​​​无效。
  4. App 端使用 uni.web-view.js ​​​​​​​​​​​​​​的最低版为 uni.webview.1.5.4.js
  5. App 平台同时支持 ​​​​​​​​​​​​​​网络网页 ​​​​​​​和 本地网页 ​​​​​​​，但本地网页及相关资源（js、css等文件）必须放在 ​​​​​​​ uni-app 项目根目录 -> hybrid -> html  ​​​​​​​文件夹下或者​​​​​​​​​​​​​​ static  ​​​​​​​​​​​​​目录下，如下为一个加载本地网页的 uni-app 项目文件目录示例：
  6. nvue  web-view  必须指定样式宽高
  7. App 网页向应用 ​​​​​​​​​​​​​​postMessage ​​​​​为实时消息
  8. app-nvue  web-view  默认没有大小，可以通过样式设置大小，如果想充满整个窗口，设置 ​​​​​​​  flex: 1  ​​​​​​​​​​​​​​即可，标题栏不会自动显示  web-view  页面中的  title  。如果想充满整个窗口且想要显示标题推荐使用 vue 页面的  web-view  (默认充满屏幕不可控制大小), 想自定义  web-view  大小使用 nvue  web-view  。

3.4 消息通信

宿主​​​​​​​ 和 ​​​​​​​iframe 的通信我们都知道可以通过 postMessage 来实现，我在开发 “Mrcori 吾码界面设计引擎” 时有实战用到过。uniapp 也有这么一个方法，就是 uni.postMessage ，是不是很像呢。

通过 uni.postMessage(OBJECT) 网页向应用发送消息，在 <web-view>  ​​​​​​​的 ​​​​​​​ message  事件回调  event.detail.data  ​​​​​​​中接收消息。

Tips

  • 传递的消息信息，必须写在 ​​​​​data ​​​​​​​对象中。
  • event.detail.data 中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小程序除外，支付宝小程序中以对象形式接受

在  <web-view>  ​​​​​​​加载的 HTML 中，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网络网页</title>
    <style type="text/css">
      .btn {
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: #007aff;
        border: 0;
        color: #ffffff;
        height: 40px;
        width: 200px;
      }

      .btn-red {
        background-color: #dd524d;
      }

      .btn-yellow {
        background-color: #f0ad4e;
      }

      .desc {
        padding: 10px;
        color: #999999;
      }

      .post-message-section {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
    <div class="btn-list">
      <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
      <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
      <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
      <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
      <button class="btn" type="button" data-action="switchTab">switchTab</button>
    </div>
    <div class="post-message-section">
      <p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
      <div class="btn-list">
        <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
      </div>
    </div>
    <script type="text/javascript">
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf('AlipayClient') > -1) {
        // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
      } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
        // QQ 小程序
        document.write(
          '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
        );
      } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
        // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
        document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
      } else if (/toutiaomicroapp/i.test(userAgent)) {
        // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
      } else if (/swan/i.test(userAgent)) {
        // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
        );
      } else if (/quickapp/i.test(userAgent)) {
        // quickapp
        document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
      }
      if (!/toutiaomicroapp/i.test(userAgent)) {
        document.querySelector('.post-message-section').style.visibility = 'visible';
      }
    </script>
    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->
    <script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
    <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });

        document.querySelector('.btn-list').addEventListener('click', function(evt) {
          var target = evt.target;
          if (target.tagName === 'BUTTON') {
            var action = target.getAttribute('data-action');
            switch (action) {
              case 'switchTab':
                uni.switchTab({
                  url: '/pages/tabBar/API/API'
                });
                break;
              case 'reLaunch':
                uni.reLaunch({
                  url: '/pages/tabBar/component/component'
                });
                break;
              case 'navigateBack':
                uni.navigateBack({
                  delta: 1
                });
                break;
              default:
                uni[action]({
                  url: '/pages/component/button/button'
                });
                break;
            }
          }
        });
        document.getElementById('postMessage').addEventListener('click', function() {
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>
  </body>
</html>

四、App端web-view的扩展💢

App 端的 webview 是非常强大的，可以更灵活的控制和拥有更丰富的API。

每个 vue 页面，其实都是一个webview，而 vue 页面里的 web-view 组件，其实是 webview 里的一个子 webview 。这个子 webview 被 append 到父 webview 上。

通过以下方法，可以获得这个 web-view 组件对应的 js 对象，然后参考HTML5+ API Reference，可以进一步重设这个 web-view 组件的样式，比如调整大小：

<template>
	<view>
		<web-view src="https://www.baidu.com"></web-view>
	</view>
</template>
<script>
var wv;//计划创建的webview
export default {
	onReady() {
		// #ifdef APP-PLUS
		var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
		setTimeout(function() {
			wv = currentWebview.children()[0]
			wv.setStyle({top:150,height:300})
		}, 1000); //如果是页面初始化调用时，需要延时一下
		// #endif
	}
};
</script>

甚至可以不用 web-view 组件，直接 js 创建一个子 webview 来加载 html。比如不希望远程网页使用 plus 的API，不管是因为安全原因还是因为 back 监听冲突，可以使用如下代码：

<template>
	<view>
	</view>
</template>
<script>
var wv;//计划创建的webview
export default {
	onLoad() {
		// #ifdef APP-PLUS
		wv = plus.webview.create("","custom-webview",{
			plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
      'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
			top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
		})
		wv.loadURL("https://www.baidu.com")
		var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
		currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
		setTimeout(function() {
			console.log(wv.getStyle())
		}, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
		// #endif
	}
};
</script>

如果想设置 web-view 组件可双指缩放，可参考如下代码：

export default {
	onReady() {
		// #ifdef APP-PLUS
		var currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
		setTimeout(function() {
			wv = currentWebview.children()[0]
			wv.setStyle({scalable:true})
		}, 1000); //如果是页面初始化调用时，需要延时一下
		// #endif
	}
};

4.1 web-view 组件的层级问题解决

web-view 组件在 App 和 小程序 中层级较高，如需要在vue页面中写代码为 web-view 组件覆盖内容，小程序端无解，只能由 web-view 的组件自己弹出 div 。App 端有如下若干方案：

  1. 比较简单的方式是 actionsheet 等原生弹出菜单（小程序也可以使用此方案）
  2. 使用 plus.nativeObj.view 。这里有一个底部图标菜单的示例，可参考底部图标菜单 imagemenu - DCloud 插件市场
  3. 使用 原生子窗体subNvue
  4. 可以在 web-view 组件内嵌的网页中弹出 z-index 更高的 div 。如果是外部网页，可以在 vue中获得子 webview 对象后，通过 evalJS 为这个子 webview 注入一段 js，操作其弹出div层。

4.2 web-view 组件的浏览器内核说明 

  • H5 端的 web-view 其实是被转为 iframe 运行，使用的是当前的浏览器
  • 小程序的 web-view 使用的是小程序自带的浏览器内核，不同厂商不一样，详见
  • App 端，Android，默认使用的是 os 自带的浏览器内核，在设置-所有应用里，显示系统服务，可查看 Android System Webview 的版本。在Android5+，系统 webview 支持安装升级。
  • App 端，Android，支持在 manifest 中配置选用腾讯 X5 浏览器内核。使用 x5 内核需要一些注意事项！具体请参考详见
  • App 端，iOS，是分为 UIWebview 和 WKWebview 的，2.2.5+起默认为 WKWebview 。

注意事项

  • <web-view> 组件默认铺满全屏并且层级高于前端组件。App 端想调节大小或在其上覆盖内容需使用 plus 规范，H5 端可以改为直接使用 iframe。
  • <web-view> 组件所在窗口的标题，跟随页面的 <title> 值的变化而变化（不含H5端）。
  • App-vue 的 web-view 加载的html页面可以运行 plus 的 api ，但注意如果该页面调用了plus.key 的API监听了 back 按键（或使用 mui 的封装），会造成 back 监听冲突。需要该 html 页面移除对 back 的监听。或按照上面的示例代码禁止网页使用 plus 对象。app-nvue 页面的 web-view 组件不能运行 plus API。
  • uni.webview.js 最新版地址：https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js
  • 小程序平台，个人类型与海外类型的小程序使用 web-view 组件，提交审核时注意微信等平台是否允许使用
  • 小程序平台， src 指向的链接需登录小程序管理后台配置域名白名单。App 和 H5 无此限制。

4.3 UniAppJSBridgeReady 的使用

uni.webView.navigateTo 示例，注意 uni sdk 放到 body 下面

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    ...
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->
  <script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
  <script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>
</html>

4.4 nvue webview 通信示例

<template>
	<view>
		<web-view ref="webview" class="webview" @onPostMessage="handlePostMessage"></web-view>
		<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
	</view>
</template>

<script>
	export default {
		data: {
		},
		methods: {
			// webview向外部发送消息
			handlePostMessage: function(data) {
				console.log("接收到消息：" + JSON.stringify(data.detail));
			},
			// 调用 webview 内部逻辑
			evalJs: function() {
				this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
			}
		}
	}
</script>

   🔗 uniapp 跨端开发系列文章：🎀🎀🎀

  1. uni-app 组成和跨端原理    【跨端开发系列】 
  2. uni-app 各端差异注意事项 【跨端开发系列】
  3. uni-app 离线本地存储方案 【跨端开发系列】
  4. uni-app UI库、框架、组件选型指南 【跨端开发系列】
  5. uni-app 蓝牙开发 【特别专题】
  6. uni-app 导航栏开发指南 【跨端开发系列】
  7. uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
  8. uni-app 设置缓存过期时间【跨端开发系列】

​​​​​​​

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

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

相关文章

数据结构 （37）外排序的基本方法

数据结构 （37）外排序的基本方法

前言 外排序&#xff08;External Sorting&#xff09;是指处理那些无法完全加载到内存中的数据集时所使用的排序方法。由于数据量巨大&#xff0c;无法一次性全部放入内存&#xff0c;因此需要使用外部存储设备&#xff08;如磁盘&#xff09;来辅助排序过程。外排序的基本方法…
阅读更多...
「Mac玩转仓颉内测版49」小学奥数篇12 - 图形变换与坐标计算

「Mac玩转仓颉内测版49」小学奥数篇12 - 图形变换与坐标计算

本篇将通过 Python 和 Cangjie 双语实现图形变换与坐标计算。这个题目帮助学生理解平面几何中的旋转、平移和对称变换&#xff0c;并学会用编程实现坐标变化。 关键词 小学奥数Python Cangjie图形变换坐标计算 一、题目描述 编写一个程序&#xff0c;模拟以下三种图形变换&a…
阅读更多...
springboot系列--拦截器加载原理

springboot系列--拦截器加载原理

一、拦截器加载原理 拦截器是在容器启动时&#xff0c;就创建并加载好&#xff0c;此时并未放入拦截器链中&#xff0c;只是放在一个拦截器集合当中&#xff0c;当一个请求进来之后&#xff0c;会通过匹配路径&#xff0c;查看是否有命中集合中的拦截器的拦截路径&#xff0c;如…
阅读更多...
高通QCA-WiFi-10.4驱动源码解析文档：无线驱动开发的利器

高通QCA-WiFi-10.4驱动源码解析文档：无线驱动开发的利器

高通QCA-WiFi-10.4驱动源码解析文档&#xff1a;无线驱动开发的利器 【下载地址】高通QCA-WiFi-10.4驱动源码解析文档分享 本仓库提供了一份高通最新的QCA-WiFi-10.4驱动源码解析文档&#xff0c;该文档对于无线驱动开发人员来说&#xff0c;是一份非常宝贵的帮助资料。通过这份…
阅读更多...
数据结构与算法 五大算法

数据结构与算法 五大算法

文章目录 1&#xff0c;时间复杂度与空间复杂度 2&#xff0c;插入排序 3&#xff0c;希尔排序 4&#xff0c;选择排序 1&#xff0c;单趟排序 2&#xff0c;选择排序PLUS版本 5&#xff0c;冒泡排序 6&#xff0c;快速排序 1&#xff0c;hoare版本 2&#xff0c;挖坑法 前言 …
阅读更多...
数据链路层总结

数据链路层总结

- - 链路、物理链路&#xff1a;两节点间物理线路&#xff08;有线、无线&#xff09;&#xff0c;中间没有任何其他的交换节点 数据链路、逻辑链路&#xff1a; 链路 协议需要的硬件、软件 网络适配器(网卡)&#xff1a;包含物理层、数据链路层 网络适配器软件驱动程…
阅读更多...
入门pytorch-Transformer

入门pytorch-Transformer

前言 虽然Transformer是2017年由Google推出&#xff0c;如果按照读论文只读近两年的思路看&#xff0c;那它无疑是过时的&#xff0c;但可惜的是&#xff0c;目前很多论文的核心依然是Transformer&#xff0c;或者由其进行改进的&#xff0c;故本文使用pytorch来搭建一下Trans…
阅读更多...
PHP中GD库的使用

PHP中GD库的使用

由于我要用到php的验证码 <?php session_start();// 生成验证码 $random_code substr(md5(uniqid(mt_rand(), true)), 0, 6);// 将验证码保存到 session 中 $_SESSION[captcha] $random_code;// 创建图片 $font 6; $image_width 100; $image_height 40;// 创建图像 $…
阅读更多...
【OpenCV】图像转换

【OpenCV】图像转换

理论 傅立叶变换用于分析各种滤波器的频率特性。对于图像&#xff0c;使用 2D离散傅里叶变换&#xff08;DFT&#xff09; 查找频域。快速算法称为 快速傅立叶变换&#xff08;FFT&#xff09; 用于计算DFT。 Numpy中的傅立叶变换 首先&#xff0c;我们将看到如何使用Numpy查…
阅读更多...
ThingsBoard规则链节点：RabbitMQ 节点详解

ThingsBoard规则链节点：RabbitMQ 节点详解

ThingsBoard 是一个开源的物联网平台&#xff0c;允许开发者快速构建IoT产品。它提供了设备连接、数据收集、处理和可视化等功能。为了实现高效的数据处理和消息传递&#xff0c;ThingsBoard 集成了多种消息队列服务&#xff0c;其中就包括了RabbitMQ。 RabbitMQ 是一个广泛使用…
阅读更多...
健康管理系统(Koa+Vue3)

健康管理系统(Koa+Vue3)

系统界面(源码末尾获取) 系统技术 Vue3 Koa Nodejs Html Css Js ....... 系统介绍 系统比较简单,轻轻松松面对结业课堂作业.采用的是基于nodejs开发的Koa框架作为后端,采用Vue框架作为前端,完成快速开发和界面展示. 系统获取 啊啊啊宝/KoaVue3https://gitee.com/ah-ah-b…
阅读更多...
Muduo 网络库 入门详解

Muduo 网络库 入门详解

文章目录 1. 什么是 Muduo 网络库&#xff1f;2. Muduo 的核心架构2.1 EventLoop2.2 Channel2.3 Poller2.4 TimerQueue2.5 TcpServer 和 TcpConnection架构图 3. Muduo 的工作原理4. 部分组件介绍4.1 ProtobufCodec4.2 ProtobufDispatcher4.3 muduo::net::EventLoop4.4 muduo::…
阅读更多...
Scratch游戏推荐 | 磁铁与磁场原理模型——探索科学的奥秘！

Scratch游戏推荐 | 磁铁与磁场原理模型——探索科学的奥秘！

今天为大家推荐一款既有趣又富有教育意义的Scratch互动作品——《磁铁与磁场原理模型》&#xff01;由ps49student503-25制作&#xff0c;这款作品通过直观的方式展示了磁铁和磁场的相互作用&#xff0c;帮助玩家深入了解磁场的方向与强度。快来拖动磁铁&#xff0c;观察磁场如…
阅读更多...
汽车总线协议分析-CAN总线

汽车总线协议分析-CAN总线

随着汽车工业的发展&#xff0c;汽车各系统的控制逐步向自动化和智能化转变&#xff0c;汽车电气系统变得日益复杂。许多车辆设计使用CAN、CAN-FD、LIN、FlexRay或SENT在电子控制单元(ECU)之间以及ECU与传感器&#xff0c;执行器和显示器之间进行通信。这些ECU之间的通信允许车…
阅读更多...
十四、Pod的升级和回滚

十四、Pod的升级和回滚

当集群中的某个服务需要升级时，我们需要停止目前与该服务相关的所有Pod，然后下载新版本镜像并创建新的Pod。如果集群规模比较大，则这个工作变成了一个挑战，而且先全部停止然后逐步升级的方式会导致较长时间的服务不可用。Kubernetes提供了滚动升级功能来解决上述问题。 如…
阅读更多...
Redis篇-1--入门介绍

Redis篇-1--入门介绍

1、Redis概述 ‌Redis&#xff08;Remote Dictionary Server&#xff09;&#xff0c;全称为远程字典服务。‌是一个开源的、使用C语言编写的、支持网络交互的、可基于内存也可持久化的Key-Value数据库。 Redis提供了多种数据类型的存储&#xff0c;来适应不同场景下的存储需…
阅读更多...
游戏引擎学习第35天

游戏引擎学习第35天

开场介绍 今天的任务是继续改进一个虚拟的瓦片地图系统&#xff0c;使其适合处理更大的世界。我们希望这个系统能管理大范围的游戏世界&#xff0c;其中包含按需存储的小区域。昨天&#xff0c;我们介绍了“内存区域”的概念&#xff0c;用于管理持久性存储。我们计划今天继续…
阅读更多...
Apache Echarts和POI

Apache Echarts和POI

目录 Apache ECharts 介绍 入门 绘制一个简单的图表 Apache POI 介绍 通过POI创建Excel文件并且写入文件内容 通过POI读取Excel文件中的内容 导出Excel表格 Apache ECharts 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观&#xf…
阅读更多...
怎么配置点击deploy就能把jar包直接打到nexus私库上,以及怎么配置从私库下载jar包

怎么配置点击deploy就能把jar包直接打到nexus私库上,以及怎么配置从私库下载jar包

一.怎么配置点击deploy就能把jar包直接打到nexus私库上 方式一:在pom文件配置私库地址 1.第一步&#xff0c;在pom文件配置仓库地址&#xff0c;用于 deploy 上传 releases 对应正式版的仓库 snapshots 对应快照版的仓库 如果你打的jar包是以 -SNAPSHOT 结尾的, 那么就会…
阅读更多...
基于最新的Apache StreamPark搭建指南

基于最新的Apache StreamPark搭建指南

一、StreamPark 的介绍 官方文档：Apache StreamPark (incubating) | Apache StreamPark (incubating) 中文文档：Apache StreamPark (incubating) | Apache StreamPark (incubating)Github地址：https://github.com/apache/incubator-streampark Apache StreamPark™ 是一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023