当前位置：首页 > news >正文

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

news 来源：原创 2025/6/24 10:55:07

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

uni-app 组成和跨端原理【跨端开发系列】
uni-app 各端差异注意事项【跨端开发系列】
uni-app 离线本地存储方案【跨端开发系列】
uni-app UI库、框架、组件选型指南【跨端开发系列】
uni-app 蓝牙开发【特别专题】
uni-app 导航栏开发指南【跨端开发系列】
uni-app 原生控件层级过高无法覆盖的解决方案【跨端开发系列】
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 属性说明

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

属性 HarmonyOS Next 兼容性

名称	HarmonyOS Next 兼容性
src	HBuilderX 4.23
allow	x
sandbox	x
fullscreen	x
@message	HBuilderX 4.23

🎯注意

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

🪶src

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

🪶webview-styles

属性	类型	说明
progress	Object/Boolean	进度条样式。仅加载网络 HTML 时生效，设置为 `false` 时禁用进度条。
width	String	web-view 组件的宽度。
height	String	web-view 组件的高度。

🪶progress

属性	类型	默认值	说明
color	String	#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>

🎯注意：

小程序 仅支持加载网络网页，🚫不支持 本地html。
补充说明：app-vue下 web-view 组件🚫不支持 自定义样式，而 v-show 的本质是改变组件的样式。即组件支持 v-if 而不是支持 v-show 。
小程序 端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件， navigationStyle: custom 对 web-view 组件无效。
App 端使用 uni.web-view.js 的最低版为 uni.webview.1.5.4.js
App 平台同时支持 网络网页 和 本地网页 ，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录 -> hybrid -> html 文件夹下或者 static 目录下，如下为一个加载本地网页的 uni-app 项目文件目录示例：
nvue web-view 必须指定样式宽高
App 网页向应用 postMessage 为实时消息
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)) {// quickappdocument.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-PLUSvar 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-PLUSwv = 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-PLUSvar 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 端有如下若干方案：

比较简单的方式是 actionsheet 等原生弹出菜单（小程序也可以使用此方案）
使用 plus.nativeObj.view 。这里有一个底部图标菜单的示例，可参考底部图标菜单 imagemenu - DCloud 插件市场
使用原生子窗体subNvue
可以在 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 跨端开发系列文章：🎀🎀🎀

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

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

🔗 uniapp 跨端开发系列文章：🎀🎀🎀 uni-app 组成和跨端原理【跨端开发系列】 uni-app 各端差异注意事项【跨端开发系列】uni-app 离线本地存储方案【跨端开发系列】uni-app UI库、框架、组件选型指南【跨端开…...

编程日记 2025/6/24 10:55:07

IntelliJ IDEA 使用技巧与插件推荐

目录常用使用技巧 1. 使用快捷键提升开发效率 2. 多光标编辑 3. 代码自动补全 4. 使用 Find Action 快速执行操作 5. 集成版本控制系统（VCS） 6. 快速查看代码文档推荐插件 1. Lombok Plugin 2. Rainbow Brackets 3. Key Promoter X 4. Chec…...

编程日记 2025/6/24 15:46:25

zookeeper基础命令详解

zookeeper基础命令详解目录文章目录 zookeeper基础命令详解目录一、列出所有基础命令一、列出所有基础命令先启动一个zookeeper客户端连接zookeeper，如果还没有启动zookeeper集群的参考本文启动之后再做后续操作。 https://blog.csdn.net/weixin_42924400/artic…...

编程日记 2025/6/19 23:12:39

2025周易算命网站搭建详细方法+源码选择php环境的配置

以下是一个详细的搭建教程，包括网站分类、环境配置、程序设计和功能实现。 1. 环境准备 1.1 服务器选择操作系统: Linux（推荐使用Ubuntu或CentOS）Web服务器: Nginx数据库: MySQLPHP版本: 7.4.x（确保小于8.0） 1.2 安…...

编程日记 2025/6/21 1:41:03

16：00面试，16：06就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到5月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/22 1:35:04

《杨辉三角》

题目描述给出 n(1≤n≤20)n(1≤n≤20)，输出杨辉三角的前 nn 行。如果你不知道什么是杨辉三角，可以观察样例找找规律。输入格式无输出格式无输入输出样例输入 #1复制 6 输出 #1复制 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 C语言…...

编程日记 2025/5/31 0:37:45

2024年03月中国电子学会青少年软件编程（Python）等级考试试卷（五级）答案 + 解析

青少年软件编程（Python）等级考试试卷（五级）分数：100 题数：38 一、单选题(共25题，共50分) 1. 以下代码的输出结果是？（） nums = list(range(100, 201)) print...

编程日记 2025/5/27 0:33:12

【游戏设计原理】7 - 加德纳的多元智能理论

虽然多元智能理论是对认知方式的分类，但它也可以为游戏设计提供丰富的思路和策略，帮助设计师创建更具吸引力、包容性和多样性的游戏。通过理解不同玩家的认知方式和优势，我们可以更精准地设计游戏的元素和玩法，使其能够吸引广泛的…...

编程日记 2025/6/22 1:40:17

Jackson @JsonProperty 注解

1. 概述 Jackson 是一个流行的Java库，用于将Java对象转换为JSON格式以及从JSON反序列化回Java对象。一种常见的需求是在序列化为JSON或从JSON反序列化时自定义字段的命名。Jackson 的 JsonProperty 注解正好满足了这一需求。 JsonProperty 注解概览 JsonProperty…...

编程日记 2025/6/1 10:22:31

【数据结构——栈与队列】链栈的基本运算（头歌实践教学平台习题）【合集】

目录😋 任务描述相关知识测试说明我的通关代码: 测试结果： 任务描述本关任务：编写一个程序实现链栈的基本运算。相关知识为了完成本关任务，你需要掌握： 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取栈…...

编程日记 2025/6/4 4:01:22

数据库乐观锁和悲观锁、redis分布式锁使用场景

前言最近发现我们同事，但凡需要加锁的地方都用的是分布式锁。而且我们的后台系统，并没有什么并发量，而且还是单体应用。我真的有点怀疑我的同事不太清楚数据乐观锁、悲观锁和redis分布式的使用场景。请今天就说一下各种锁的应用场景吧。 …...

编程日记 2025/6/23 8:27:58

React的状态管理库-Redux

核心思想：单一数据源、状态是只读的、以及使用纯函数更新状态。组成部分 Store（存储） 应用的唯一状态容器，存储整个应用的状态树,使用 createStore() 创建。 getState()：获取当前状态。dispatch(action)&#xff…...

编程日记 2025/6/24 8:22:55

《自制编译器》--青木峰郎 -读书笔记编译hello

在该书刚开始编译hello.cb时就遇到了问题。本人用的是wsl，环境如下， 由于是64位，因此根据书中的提示，从git上下载了64位的cb编译器 cbc-64bit 问题一: 通过如下命令编译时,总是报错。 cbc -Wa,"--32" -Wl,"-…...

编程日记 2025/6/21 15:38:49

XSS（跨站攻击）

XSS漏洞（跨站脚本） 1.XSS 漏洞简介 XSS又叫CSS（Cross Site Script）跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从…...

编程日记 2025/6/21 1:41:01

华为自反ACL实验

一、实验背景做这个实验的原因是最近公司里上了三台小程序服务器，由于三台服务器的端口都映射出去了，领导要求A网段的三台服务器不能访问内网B，C网段，同时B、C网段内网用户可以访问A段的94、95、96服务器； 也就是PC4\…...

编程日记 2025/6/24 15:20:13

MyBatisPlus实现多表查询

在MyBatisPlus中实现多表查询，主要有以下几种方法： 使用注解进行多表查询： 你可以在Mapper接口中使用Select注解来编写SQL查询语句，实现多表查询。例如，如果你想根据用户ID查询用户信息和对应的区域名称，可…...

编程日记 2025/6/19 20:20:16

【人工智能-中级】循环神经网络（RNN）与Transformer在自然语言处理中的进阶应用

循环神经网络（RNN）与Transformer在自然语言处理中的进阶应用自然语言处理（NLP）是人工智能领域中的重要分支，其主要任务是使计算机能够理解、生成和处理人类语言。近年来，循环神经网络（RNN）和Transformer模型已成为NLP领域的两大核心技术。本文将探讨这两类模型在自然…...

编程日记 2025/6/24 5:45:39

下载SDK wget https://stereolabs.sfo2.cdn.digitaloceanspaces.com/zedsdk/3.6/ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run 安装 ./ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run skip_python 测试 cd /usr/local/zed/tools ls ZED_Calibration ZED_Depth_Viewer ZED_Diagnostic ZED_E…...

编程日记 2025/5/30 18:38:18

大模型呼入机器人如何赋能呼叫中心？(转)

大模型呼入机器人如何赋能呼叫中心？(转) 原作者：开源呼叫中心FreeIPCC 大模型呼入机器人在赋能呼叫中心方面发挥着重要作用，主要体现在以下几个方面： 一、提升服务效率与质量 24小时不间断服务： 大模型呼入机器人能…...

编程日记 2025/6/20 23:46:23

基于Python对xslxslx文件进行操作

利用python操作表格文件读取xsl格式文件-源码 import xlrd# 读取xls文件中的工作对象 wb xlrd.open_workbook(示例文件/xxx物理学与信息技术学院.xls) print(wb)# 获取所有的工作表名称 sheet_names wb.sheet_names() # print(sheet_names)# 选择要读取的具体工作表对象 s…...

编程日记 2025/6/22 7:30:37

预处理器Stylus的介绍及使用，并同Less、Sass进行对比（简单介绍）

目录一、安装与配置安装Node.js： 安装Stylus： 配置Webpack： 二、编写Stylus代码定义变量： 使用变量： 嵌套语法： 混合（Mixins）： 函数： 6.关键字参…...

编程日记 2025/6/24 6:17:28

ansible自动化运维（四）jinjia2模板

Jinjia2模板前面说到playbook组成的时候，有介绍到template模块，而template模块对模板文件进行渲染时，使用的就是jinja2模板引擎，jinja2本身就是基于python的模板引擎，所以下面先来了解一下jinjia2模板的一些用法基…...

编程日记 2025/6/24 8:20:31

ubuntu系统的docker安装（2）

查看系统版本 lsb_release -asudo systemctl status docker查看docker是否安装成功 docker pull拉取镜像不成功/docker run不成功可能有多种原因：网络链接不稳定，没有重启docker，可以先将docker源设置为国内镜像源 sudo systemctl rest…...

编程日记 2025/6/24 10:09:35

.Net C#医院检验系统源码，实验室管理信息LIS系统

LIS系统源代码，.Net C#医院检验系统源码，三级医院应用案例，自主版权，适合二次开发上项目。本套实验室管理信息LIS系统采用.Net C#语言开发，用C/S架构。支持DB2,Oracle,MS SQLServer等主流数据库。可根据医院情况配置…...

编程日记 2025/6/2 14:37:52

STM32-FATFS文件系统

一、FATFS文件系统介绍： FATFS 是一个完全免费开源的 FAT/exFAT 文件系统模块，专门为小型的嵌入式系统而设计。它完全用标准 C 语言（ANSI C C89）编写，所以具有良好的硬件平台独立性，只需做简单的修改就可以…...

编程日记 2025/6/23 10:10:51

【多模态】swift框架使用qwen2-vl

前言前几篇里面学习了常见的一些多模态模型的典型架构和源代码，上一篇里面测试使用了minicpm-v系列模型，在尝试RLHF的时候发现swift特别好用特别全，记录一下对swift的一些使用，欢迎批评指正～ 前一篇里面写了minic…...

编程日记 2025/6/22 22:14:01

什么是全局对象和全局变量

在JavaScript中，全局对象和全局变量是两个重要的概念，它们与代码的执行环境和作用域紧密相关。全局对象全局对象（Global Object）是在代码的任何地方都能访问到的对象。在浏览器环境中，全局对象通常是window对象&…...

编程日记 2025/6/4 1:16:06

【收藏】Cesium billboard添加icon图片、label文字带背景图片（使用canvas绘制实现，附完整源码，vue2或vue3+vite都适用）

1.效果在项目开发过程中，有一个需求是有若干个需要展示的点，每个点icon不一样、对应的广告牌文字不一样、并且文字还需要有图片背景、每个文字背景也不同（抓狂）。这种需求只能编写canvas来绘制“icon文字背景文字”的image&#…...

编程日记 2025/6/24 13:50:28

【安卓开发】【Android Studio】启动时报错“Unable to access Android SDK add-on list”

一、问题描述在启动Android Studio时，软件报错：Unable to access Android SDK add-on list，报错截图如下： 二、原因及解决方法初步推测是由于网络节点延迟，无法接入谷歌导致的。点击Cancel取消即可。...

编程日记 2025/5/31 13:43:56

前缀和的两种构造方法

方法1 public preSum(int[] nums) {// preSum[0] 0；preSum new int[nums.length 1];// 计算 nums 的累加和for (int i 1; i < preSum.length; i) {preSum[i] preSum[i - 1] nums[i - 1];}} 方法2 public preSum(int[] nums) {preSum[0] nums[0];preSum …...

编程日记 2025/6/23 9:38:59

Linux —— vim 编辑器

一、什么是vim vim是一个功能强大、高度可定制的文本编辑器。以下是对vim编辑器的具体介绍： 历史背景：vim最初由Bram Moolenaar在1991年开发，作为vi编辑器的增强版，增加了许多新的特性和改进。它继承了vi的基本编辑功能和键盘快捷…...

编程日记 2025/5/31 23:25:47

pytorch torch.where函数

torch.where 是 PyTorch 中用于条件选择的函数。它可以根据一个布尔条件在两个张量中选择元素，从而生成一个新的张量。函数定义 torch.where(condition, input, other)参数说明： condition 一个布尔张量，表示条件判断结果。形状可以与 in…...

编程日记 2025/6/19 20:22:15

【JAVA】Java项目实战—Java EE项目：企业资源规划（ERP）系统

在企业管理中，企业资源规划（ERP）系统是不可或缺的工具。它能够帮助企业高效管理各种资源，包括人力资源、财务资源和库存等。Java作为一种成熟的编程语言，因其跨平台特性、强大的生态系统以及良好的社区支持&#xff0c…...

编程日记 2025/6/24 9:39:55

操作系统笔记

操作系统历史无操作系统 : 1946年～1950年代末期：第1代计算机，硬件以电子管为主，无操作系统。使用纸带传输程序和数据，操作系统只起加载作用。批处理操作系统 :1960年代初期～1960年代中期：第…...

编程日记 2025/6/19 20:51:49

go-zero(十二)消息队列

go zero 消息队列在微服务架构中，消息队列主要通过异步通信实现服务间的解耦，使得各个服务可以独立发展和扩展。 go-zero中使用的队列组件go-queue，是gozero官方实现的基于Kafka和Beanstalkd 的消息队列框架,我们使用kafka作为演示。一、…...

编程日记 2025/6/23 5:21:11

CSS3 常用特性及应用全解析

CSS3 常用特性及应用全解析在前端开发领域，CSS3 以其丰富多样的特性为网页增添了绚丽的视觉效果与流畅的交互体验。本文将详细介绍一些 CSS3 的常见知识及其使用方法，助力开发者打造更具吸引力的网页。一、边框效果升级 （一&#xff…...

编程日记 2025/6/23 16:58:56

revit转gltf，revit转3dtiles，如何将Revit模型转为3DTiles格式并在Cesiumjs中高效可视化

Revit模型导出gltf、glb与3dtiles有多种方式，但一般的商业工具收费普遍较高：Cesiumlab导出3dTile格式数据，Cesiumlab暂时可试用3天，会员版收费每年800；BimAngleEngine导出3dTile格式数据BimAngleEngine暂时可试用30天&…...

编程日记 2025/6/23 7:07:39

Unity学习笔记（二）如何制作角色动画

前言本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记创建一个角色我们的目的是创建一个可移动、跳跃、冲刺等动作的角色需要的组件：Rigidbody（用于创建物理规则）、Collider（用于检测碰撞&am…...

编程日记 2025/6/23 8:51:23

基于卷积神经网络的Caser算法

将一段交互序列嵌入到一个以时间为纵轴的平面空间中形成“一张图”后，基于卷积序列嵌入的推荐（Caser）算法利用多个不同大小的卷积滤波器，来捕捉序列中物品间的点级（point-level）、联合的（union-…...

编程日记 2025/6/23 14:59:09

Java中服务器代理（Proxy）详解

Java中服务器代理（Proxy）详解服务器代理（Proxy）在网络编程和分布式系统中是一个至关重要的概念，其功能远超一般的网络请求转发。在现代互联网架构中，代理不仅广泛应用于负载均衡、访问控制和安全防护&…...

编程日记 2025/6/21 1:47:06

css中相对定位的应用场景

元素位置微调文本与图标组合微调：在网页设计中，经常会有文本和图标的组合，比如一个带有搜索图标的搜索框。可以使用相对定位来微调图标在搜索框内的位置。例如，有以下HTML结构： <input type"text" class…...

编程日记 2025/6/22 1:07:31

人工智能技术的深度解析与推广【人工智能的应用场景】

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默， 忍不住分享一下给大家。点击跳转到网站学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……） 2、学会Oracle数据库入门到入土用法(创作中……） 3、手把…...

编程日记 2025/6/24 9:53:33

Quad Remesher使用教程

为什么要拓扑？ 我们知道，模型在三维软件中的表现，是由一系列的面通过不同角度组合而成的。3D模型制作层面上的拓扑，按我的理解来说，就是一个模型的面的结构分布——布线。想表现和制作一个三维模型，有无限…...

编程日记 2025/6/22 23:03:22

【经验分享】容器云运维的知识点

最近忙于备考没关注，有次点进某小黄鱼发现首页出现了我的笔记还被人收费了虽然我也卖了一些资源，但我以交流、交换为主，笔记都是免费给别人看的由于当时刚刚接触写的并不成熟，为了避免更多人花没必要的钱，所以决定公…...

编程日记 2025/6/22 18:22:36

NDRCContextUnmarshall断点函数分析之I_RpcBindingCopy函数的作用

NDRCContextUnmarshall断点函数分析之I_RpcBindingCopy函数的作用第一部分： void RPC_ENTRY NDRCContextUnmarshall ( // process returned context OUT NDR_CCONTEXT PAPI *phCContext,// stub context to update IN RPC_BINDING_HANDLE hRPC, …...

编程日记 2025/6/21 21:55:28

代码随想录算法训练营第三十二天|动态规划理论基础|LC509.肥波那些数|LC70.爬楼梯|LC746.使用最小花费爬楼梯

动态规划理论基础解释：动态规划，英文：Dynamic Programming，简称DP；如果某一问题有很多重叠子问题，使用动态规划是最有效的。动态规划五部曲： 1、确定dp数组（dp table）…...

编程日记 2025/6/1 22:08:06

[每周一更]-(第127期)：Go新项目-Gin中使用超时中间件实战（11）

在项目不断迭代过程中，发现基础架构中，没有进行超时控制，有些接口由于网络延迟以及远程调用等情况存在请求时间过长的问题，消耗了资源，也降低了用户体验，这一讲我们聊下超时控制中间件，来完善我…...

编程日记 2025/6/24 15:32:14

【HAL库】STM32CubeMX开发----STM32F407----Time定时器中断实验

STM32CubeMX 下载和安装详细教程【HAL库】STM32CubeMX开发----STM32F407----目录前言本次实验以 STM32F407VET6 芯片为MCU，使用 25MHz 外部时钟源。实现定时器TIM3中断，每1s进一次中断。定时器计算公式如下： arr 是自动装载值&#x…...

编程日记 2025/6/21 19:17:38

使用idea创建一个JAVA WEB项目

文章目录 1. javaweb项目简介2. 创建2.1 idea新建项目2.2 选择，命名2.3 打开2.4 选择tomcat运行2.5 结果 3. 总结 1. javaweb项目简介 JavaWeb项目是一种基于Java技术的Web应用程序，主要用于开发动态网页和Web服务。这种项目能够构建在Java技术栈之上&a…...

编程日记 2025/6/21 10:28:53

PDF 文件如何转为 CAD 图纸？PDF2CAD 使用教程

在工程设计和建筑行业中，PDF 文件常常被用来分享和存档图纸。然而，当需要对这些图纸进行编辑或进一步开发时，静态的 PDF 格式就显得力不从心了。这时候，将 PDF 文件转换为可编辑的 CAD（计算机辅助设计）格式…...

编程日记 2025/6/3 7:48:59