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

鸿蒙ArkTS页面如何与H5页面交互？

news 来源：原创 2025/9/16 18:25:19

鸿蒙页面如何与H5页面交互？

    • 先看效果
    • 前言
    • 通信功能介绍
    • Web组件使用问题
  • Harmony OS NEXT版本（接口及解决方案兼容API12版本或以上版本)

先看效果

在这里插入图片描述
功能介绍

  • 点击Click Me按钮可以接收展示鸿蒙传递给html的内容
  • 点击霓虹灯按钮可以同步更新底部鸿蒙页面的按钮内容“打开”或“关闭”
  • 点击底部鸿蒙页面的按钮，可以同步修改html的霓虹灯按钮状态

前言

在开发App时，我们经常会遇到使用webView加载H5页面的场景，这样做的好处就不多加赘述了，那么鸿蒙App如何加载H5页面呢？又怎么与H5页面进行通信呢？，废话少说，直接上代码。

通信功能介绍

App可以通过runJavaScript()方法调用html页面的JavaScript相关函数。 在下面的示例中，点击App的“runJavaScript”按钮时，来触发html页面的change()方法更新霓虹灯按钮状态。

html通过鸿蒙的test方法，获取鸿蒙传递过来的数据。通过出发changeBtnText同步更新鸿蒙按钮的内容。

html文件目录：harmonyApp\entry\src\main\resources\rawfile
html代码如下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>霓虹灯按钮拨动特效</title><style>* {border: 0;box-sizing: border-box;margin: 0;padding: 0;}:root {--hue: 223;--off-hue: 3;--on-hue1: 123;--on-hue2: 168;--fg: hsl(var(--hue), 10%, 90%);--primary: hsl(var(--hue), 90%, 50%);--trans-dur: 0.6s;--trans-timing: cubic-bezier(0.65, 0, 0.35, 1);font-size: calc(40px + (60 - 40) * (100vw - 320px) / (2560 - 320));}body,input {font: 1em/1.5 sans-serif;}body {background-image: linear-gradient(45deg, hsl(var(--hue), 10%, 20%), hsl(var(--hue), 10%, 10%));color: var(--fg);display: flex;height: 100vh;transition: background-color var(--trans-dur), color var(--trans-dur);}.common{height: 6em;width: 5em;}.switch,.switch__input {-webkit-tap-highlight-color: #0000;}.switch {display: block;margin: auto;position: relative;width: 5em;height: 3em;}.switch__base-outer,.switch__base-inner {display: block;position: absolute;}.switch__base-outer {border-radius: 1.25em;box-shadow: -0.125em -0.125em 0.25em hsl(var(--hue), 10%, 30%), 0.125em 0.125em 0.125em hsl(var(--hue), 10%, 30%) inset, 0.125em 0.125em 0.25em hsl(0, 0%, 0%), -0.125em -0.125em 0.125em hsl(var(--hue), 10%, 5%) inset;top: 0.125em;left: 0.125em;width: 4.75em;height: 2.75em;}.switch__base-inner {border-radius: 1.125em;box-shadow: -0.25em -0.25em 0.25em hsl(var(--hue), 10%, 30%) inset, 0.0625em 0.0625em 0.125em hsla(var(--hue), 10%, 30%), 0.125em 0.25em 0.25em hsl(var(--hue), 10%, 5%) inset, -0.0625em -0.0625em 0.125em hsla(var(--hue), 10%, 5%);top: 0.375em;left: 0.375em;width: 4.25em;height: 2.25em;}.switch__base-neon {display: block;overflow: visible;position: absolute;top: 0;left: 0;width: 100%;height: auto;}.switch__base-neon path {stroke-dasharray: 0 104.26 0;transition: stroke-dasharray var(--trans-dur) var(--trans-timing);}.switch__input {outline: transparent;position: relative;width: 100%;height: 100%;-webkit-appearance: none;appearance: none;}.switch__input:before {border-radius: 0.125em;box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0);content: "";display: block;position: absolute;inset: -0.125em;transition: box-shadow 0.15s linear;}.switch__input:focus-visible:before {box-shadow: 0 0 0 0.125em var(--primary);}.switch__knob,.switch__knob-container {border-radius: 1em;display: block;position: absolute;}.switch__knob {background-color: hsl(var(--hue), 10%, 15%);background-image: radial-gradient(88% 88% at 50% 50%, hsl(var(--hue), 10%, 20%) 47%, hsla(var(--hue), 10%, 20%, 0) 50%), radial-gradient(88% 88% at 47% 47%, hsl(var(--hue), 10%, 85%) 45%, hsla(var(--hue), 10%, 85%, 0) 50%), radial-gradient(65% 70% at 40% 60%, hsl(var(--hue), 10%, 20%) 46%, hsla(var(--hue), 10%, 20%, 0) 50%);box-shadow: -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 15%) inset, -0.125em -0.125em 0.0625em hsl(var(--hue), 10%, 5%) inset, 0.75em 0.25em 0.125em hsla(0, 0%, 0%, 0.8);width: 2em;height: 2em;transition: transform var(--trans-dur) var(--trans-timing);}.switch__knob-container {overflow: hidden;top: 0.5em;left: 0.5em;width: 4em;height: 2em;}.switch__knob-neon {display: block;width: 2em;height: auto;}.switch__knob-neon circle {opacity: 0;stroke-dasharray: 0 90.32 0 54.19;transition: opacity var(--trans-dur) steps(1, end), stroke-dasharray var(--trans-dur) var(--trans-timing);}.switch__knob-shadow {border-radius: 50%;box-shadow: 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.9);display: block;position: absolute;top: 0.5em;left: 0.5em;width: 2em;height: 2em;transition: transform var(--trans-dur) var(--trans-timing);}.switch__led {background-color: hsl(var(--off-hue), 90%, 70%);border-radius: 50%;box-shadow: 0 -0.0625em 0.0625em hsl(var(--off-hue), 90%, 40%) inset, 0 0 0.125em hsla(var(--off-hue), 90%, 70%, 0.3), 0 0 0.125em hsla(var(--off-hue), 90%, 70%, 0.3), 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.5);display: block;position: absolute;top: 0;left: 0;width: 0.25em;height: 0.25em;transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing);}.switch__text {overflow: hidden;position: absolute;width: 1px;height: 1px;}.switch__input:checked~.switch__led {background-color: hsl(var(--on-hue1), 90%, 70%);box-shadow: 0 -0.0625em 0.0625em hsl(var(--on-hue1), 90%, 40%) inset, 0 -0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3), 0 0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3), 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.5);}.switch__input:checked~.switch__base-neon path {stroke-dasharray: 52.13 0 52.13;}.switch__input:checked~.switch__knob-shadow,.switch__input:checked~.switch__knob-container .switch__knob {transform: translateX(100%);}.switch__input:checked~.switch__knob-container .switch__knob-neon circle {opacity: 1;stroke-dasharray: 45.16 0 45.16 54.19;transition-timing-function: steps(1, start), var(--trans-timing);}.btn-box{/* width: 2.5em; */position: absolute;top: 0.1em;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;justify-content: center;align-items: center;}.btn-box .btn {width: 10em;background-color: rgb(32, 93, 224);border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 0.3em;margin: 4px 2px;cursor: pointer;}.btn-box #demo {font-size: 0.3em;}</style>
</head><body><div class="btn-box"><button class="btn" type="button" onclick="callArkTS()">Click Me!</button><p id="demo"></p></div><label class="switch"><input id="switch" class="switch__input" type="checkbox" role="switch"><span class="switch__base-outer"></span><span class="switch__base-inner"></span><svg class="switch__base-neon" viewBox="0 0 40 24" width="40px" height="24px"><defs><filter id="switch-glow"><feGaussianBlur result="coloredBlur" stddeviation="1"></feGaussianBlur><feMerge><feMergeNode in="coloredBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" /><stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" /></linearGradient><linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1"><stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" /><stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" /><stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" /></linearGradient></defs><path fill="none" filter="url(#switch-glow)" stroke="url(#switch-gradient1)" stroke-width="1"stroke-dasharray="0 104.26 0" stroke-dashoffset="0.01" stroke-linecap="round"d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z" /></svg><span class="switch__knob-shadow"></span><span class="switch__knob-container"><span class="switch__knob"><svg class="switch__knob-neon" viewBox="0 0 48 48" width="48px" height="48px"><circle fill="none" stroke="url(#switch-gradient2)" stroke-dasharray="0 90.32 0 54.19"stroke-linecap="round" stroke-width="1" r="23" cx="24" cy="24"transform="rotate(-112.5,24,24)" /></svg></span></span><span class="switch__led"></span><span class="switch__text">Power</span></label>
</body>
<script>let switchDom = document.getElementById("switch");function callArkTS() {let str = window.harmony.test();document.getElementById("demo").innerHTML = '鸿蒙传递过来的参数: '+str;}switchDom.addEventListener("change", function (e) {if(e.target.checked){window.harmony.changeBtnText('关闭');}else{window.harmony.changeBtnText('打开');}});function change() {switchDom.checked = !switchDom.checked;}
</script>
</html>

鸿蒙App代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';class WebViewModel {btnText: string = '打开';constructor() {}test(): string {return 'ArkTS Hello World!';}// 修改按钮文本changeBtnText(value:string){this.btnText = value;}}@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();// 声明需要注册的对象@State vm: WebViewModel = new WebViewModel();build() {Stack() {Column() {// 页面内容Scroll(){Column(){// web组件加载本地index.html页面Web({ src: $rawfile('index.html'), controller: this.webviewController}).domStorageAccess(true).javaScriptAccess(true).onProgressChange((event)=>{// 自行编写加载状态})// 将对象注入到web端.javaScriptProxy({object: this.vm,name: "harmony",methodList: ["test",'changeBtnText'],controller: this.webviewController})}.padding(16)}.edgeEffect(EdgeEffect.Fade).width('100%').layoutWeight(1).align(Alignment.TopStart)Button(this.vm.btnText).width('80%').borderRadius(10).margin({bottom:px2vp(Number(AppStorage.get('safeAreaTopHeight'))) + ''}).onClick(() => {if(this.vm.btnText === '打开'){this.vm.btnText = '关闭';}else if(this.vm.btnText === '关闭'){this.vm.btnText = '打开';}this.webviewController.runJavaScript('change()');})}.height('100%').backgroundColor('#F5F5F5')}}
}

Web组件使用问题

鸿蒙的Web组件加载H5页面会出现很多意外的问题，我这里建议把Web组件的以下两个选项开启，避免问题的产生。

  1. domStorageAccess(true)开启文档对象模型存储接口（DOM Storage API）权限
  2. javaScriptAccess(true)允许执行JavaScript脚本

具体代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';
​
class WebViewModel {constructor() {}
​test(): string {return 'ArkTS Hello World!';}
}
​
@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();// 声明需要注册的对象@State vm: WebViewModel = new WebViewModel();
​build() {Column() {// web组件加载本地index.html页面Web({ src: $rawfile('index.html'), controller: this.webviewController}).domStorageAccess(true).javaScriptAccess(true)// 将对象注入到web端.javaScriptProxy({object: this.vm,name: "harmony",methodList: ["test"],controller: this.webviewController})}}
}

其他选项可参考 鸿蒙Web官网

Harmony OS NEXT版本（接口及解决方案兼容API12版本或以上版本)

相关文章：

鸿蒙ArkTS页面如何与H5页面交互？

鸿蒙页面如何与H5页面交互&#xff1f; 先看效果前言通信功能介绍Web组件使用问题 Harmony OS NEXT版本&#xff08;接口及解决方案兼容API12版本或以上版本) 先看效果 功能介绍 点击Click Me按钮可以接收展示鸿蒙传递给html的内容点击霓虹灯按钮可以同步更新底部鸿蒙页面的按…...

编程日记 2025/9/16 18:25:19

深度解析SmartGBD助力Android音视频数据接入GB28181平台

在当今数字化时代&#xff0c;视频监控与音视频通信技术在各行各业的应用愈发广泛。GB28181协议作为中国国家标准&#xff0c;为视频监控设备的互联互通提供了规范&#xff0c;但在实际应用中&#xff0c;许多Android终端设备并不具备国标音视频能力&#xff0c;这限制了其在相…...

编程日记 2025/9/14 3:31:14

软件安全测评报告内容和作用简析，如何获取权威安全测评报告?

软件安全测评报告是对软件系统进行安全性评估后形成的一份详细文档。它通过对软件系统的设计、实现及运行环境等多个方面进行系统性分析&#xff0c;以识别潜在的安全风险和漏洞。该报告不仅包含漏洞的详细信息和修复建议&#xff0c;也是对软件开发者和管理者的重要决策支持工…...

编程日记 2025/9/12 9:48:48

leetcode 207. 课程表

题目如下 数据范围 做题之前先搞清楚一个概念:拓扑序列 即在一个简单图内找一个入度为0的节点&#xff0c; 删除这个节点并删去与之相连接的边并把这条边连接的节点入度减一(如果存在)。 如此循环往复直到图内不存在节点我们认为拓扑序列存在。 那么在本题中参与课程的要求…...

编程日记 2025/9/11 12:01:34

第4章 4.4 EF Core数据库迁移 Add-Migration UpDate-Database

4.4.1 数据库迁移原理 总结一下就是&#xff1a; 1. 数据库迁移命令的执行&#xff0c;其实就是生成在数据库执行的脚本代码&#xff08;两个文件&#xff1a;数字_迁移名.cs 数字_迁移名.Designer.cs&#xff09;&#xff0c;用于对数据库进行定义和修饰。 2. 数据库迁移…...

编程日记 2025/9/12 7:57:51

PyEcharts 数据可视化：从入门到实战

一、PyEcharts 简介 PyEcharts 是基于百度开源可视化库 ECharts 的 Python 数据可视化工具&#xff0c;支持生成交互式的 HTML 格式图表。相较于 Matplotlib 等静态图表库&#xff0c;PyEcharts 具有以下优势&#xff1a; 丰富的图表类型&#xff08;30&#xff09;动态交互功…...

编程日记 2025/9/15 7:32:36

数仓搭建实操(传统数仓oracle):DWD数据明细层

数据处理思路 DWD层, 数据明细层>>数据清洗转换, 区分事实表,维度表 全是事实表,没有维度表>>不做处理 数据清洗>>数据类型varchar 变成varchar2, 日期格式统一(时间类型变成varchar2); 字符数据去空格 知识补充: varchar 存储定长字符类型 ; 存储的数据会…...

编程日记 2025/9/14 22:58:16

《Mycat核心技术》第17章：实现MySQL的读写分离

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 星球项目地址&#xff1a;https://binghe.gitcode.host/md/zsxq/introduce.html 沉淀&#xff0c…...

编程日记 2025/9/15 19:18:36

区块链（14）：FISCO BCOS配置及使用控制台

1 获取控制台并回到fisco目录 cd ~/fisco && curl -LO https://github.com/FISCO-BCOS/console/releases/download/v2.9.2/download_console.sh && bash download_console.sh 2 拷贝控制台配置文件 若节点未采用默认端口，请将文件中的20200替换成节点对应的…...

编程日记 2025/9/15 12:44:36

react路由总结

目录 一、脚手架基础语法(16~17) 1.1、hello react 1.2、组件样式隔离(样式模块化) 1.3、react插件 二、React Router v5 2.1、react-router-dom相关API 2.1.1、内置组件 2.1.1.1、BrowserRouter 2.1.1.2、HashRouter 2.1.1.3、Route 2.1.1.4、Redirect 2.1.1.5、L…...

编程日记 2025/9/12 1:17:16

Python爬虫处理网页中的动态内容

文章目录 前言一、Python环境搭建1.Python安装2.选择Python开发环境 二、Python爬虫处理网页中的动态内容1. 使用 Selenium 库2. 使用 Pyppeteer 库3. 分析 API 请求 前言 在网页中&#xff0c;动态内容通常是指那些通过 JavaScript 在页面加载后动态生成或更新的内容&#xf…...

编程日记 2025/9/13 14:20:31

Lineageos 22.1(Android 15)Launcer简单调整初始化配置

一、前言 Launcer的初始化配置主要在如下的xml文件夹下&#xff0c;默认读取的5x5 这里我们把device_profiles调整一下&#xff0c;然后新建一个default_workspace_my.xml作为我们自己的配置就行。 二、配置 注意Lineageos 的Launcer是在lineageos/packages/apps/Trebuchet…...

编程日记 2025/9/11 17:38:20

计算机毕业设计SpringBoot+Vue.js教师工作量管理系统(源码+LW文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/9/10 1:41:49

【Scrapy】Scrapy教程7——存储数据

上一节我们对爬虫程序的默认回调函数parse做了改写，提取的数据可以在Scrapy的日志中打印出来了，光打印肯定是不行的，还需要把数据存储，数据可以存到文件，也可以存到数据库，我们一一来看。 存储数据到文件 首先我们看看如何将数据存储到文件，在讲[[【Scrapy】Scrapy教程…...

编程日记 2025/9/8 20:42:59

使用Socket编写超牛的http服务器和客户端(一）

实现一个高性能的基于 IOCP（I/O Completion Ports）的 HTTP 服务器，支持多线程、动态线程池调整和路由处理。 主要功能和特性 IOCP 模型： 使用多个 IOCP 句柄（IOCP_COUNT），将客户端连接均匀分配到不同的 IOCP 上，减少线程竞争。 工作线程使用 GetQueuedCompletionStatu…...

编程日记 2025/9/10 11:28:34

centos服务器巡检脚本

服务器巡检脚本 系统负载shell脚本python将txt文件转换成excel&#xff0c;不正常巡检结果标记红色 系统负载shell脚本 #!/bin/bash#文件路径 path"/root/monitor.txt"#yum -y install bc sysstat net-tools lrzsz #获取主机名 system_hostname$(hostname | awk {pr…...

编程日记 2025/9/10 20:10:30

Linux-Ansible模块完结

文章目录 User和GroupHostname、Cron、Yum和Service &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Linux专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年02月23日19点59分 User和Group User和Group模块实践 ansible 192.168.1.100 -m …...

编程日记 2025/9/8 16:21:21

厦大团队：DeepSeek大模型概念、技术与应用实践 140页PDF完整版下载

DeepSeek使用教程系列&#xff1a; 厦门大学&#xff1a; DeepSeek大模型概念、技术与应用实践 140页PDF完整版文件 厦大团队&#xff1a;DeepSeek大模型概念、技术与应用实践&#xff08;140页PPT读懂大模型&#xff09;.pdf https://pan.baidu.com/s/1de4UIxqPsvMBIYcpen_M-…...

编程日记 2025/9/13 1:05:50

跟据spring boot版本，查看对应的tomcat，并查看可支持的tomcat的版本范围

一 查看springboot自带的tomcat版本&#xff1a; 可直接在项目中找到Maven Dependencies中找到tomcat版本 二、查看SpringBoot内置tomcat版本的支持范围 我这边是跟据maven仓库查看的 首先跟据链接打开maven仓库&#xff1a;https://mvnrepository.com/ 然后搜索&#xff1a…...

编程日记 2025/9/10 3:09:59

小米AX3000T 路由器如何开启 SSH 安装 OpenWRT 系统，不需要降级 v1.0.91 （2025）

小米AX3000T 路由器如何开启 SSH 安装 OpenWRT 系统&#xff0c;不需要降级 v1.0.91 &#xff08;2025&#xff09; 本文内容需要你有一定的 Linux 操作基础&#xff0c;最好是程序员那种&#xff0c;英文水平足够用才行。一般人不需要使用这么复杂的路由器操作系统&#xff0c…...

编程日记 2025/9/13 16:34:13

跳格子游戏

跳格子游戏 真题目录: 点击去查看 E 卷 100分题型 题目描述 地上共有N个格子，你需要跳完地上所有的格子，但是格子间是有强依赖关系的，跳完前一个格子后，后续的格子才会被开启，格子间的依赖关系由多组steps数组给出，steps[0]表示前一个格子，steps[1]表示steps[0]可以开…...

编程日记 2025/9/9 20:30:38

抓包工具是什么？

抓包工具是一种用于捕获和分析网络数据包的软件或硬件设备。它可以帮助用户监控网络通信过程&#xff0c;查看网络中传输的数据内容、协议类型、源地址、目的地址等信息。以下是关于抓包工具的一些详细解释&#xff1a; 1. 主要功能 捕获数据包&#xff1a;抓包工具能够实时捕…...

编程日记 2025/9/11 10:44:34

【用deepseek和chatgpt做算法竞赛】——还得DeepSeek来 -Minimum Cost Trees_5

往期 【用deepseek和chatgpt做算法竞赛】——华为算法精英实战营第十九期-Minimum Cost Trees_0&#xff1a;介绍了题目和背景【用deepseek和chatgpt做算法竞赛】——华为算法精英实战营第十九期-Minimum Cost Trees_1&#xff1a;题目输入的格式说明&#xff0c;选择了邻接表…...

编程日记 2025/9/11 14:28:18

edge浏览器将书签栏顶部显示

追求效果&#xff0c;感觉有点丑&#xff0c;但总归方便多了 操作路径&#xff1a;设置-外观-显示收藏夹栏-始终...

编程日记 2025/9/15 19:55:40

[漏洞篇]文件上传漏洞详解

[漏洞篇]文件上传漏洞详解 一、介绍 1. 概念 文件上传漏洞是指用户上传了一个可执行的脚本文件&#xff0c;并通过此脚本文件获得了执行服务器端命令的能力。这种攻击方式是最为直接和有效的&#xff0c;“文件上传” 本身没有问题&#xff0c;有问题的是文件上传后&#xf…...

编程日记 2025/9/15 21:44:51

计算机毕业设计SpringBoot+Vue.js企业客户管理系统(源码+LW文档+PPT+讲解+开题报告)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/9/15 14:29:47

【多模态处理篇三】【DeepSeek语音合成：TTS音色克隆技术揭秘】

最近帮某明星工作室做AI语音助手时遇到魔幻需求——要求用5秒的咳嗽声克隆出完整音色！传统TTS系统直接翻车，生成的语音像得了重感冒的电音怪物。直到祭出DeepSeek的TTS音色克隆黑科技，才让AI语音从"机器朗读"进化到"声临其境"。今天我们就来扒开这个声音…...

编程日记 2025/9/8 14:42:56

华为 网络安全 认证

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 华为 网络安全 认证&#xff1a;保障信息安全的重要一环 在数字化时代的今天&#xff0c;网络安全成为了企业和个人都需要高度重视的问题。尤其是在企业信息化的…...

编程日记 2025/9/12 16:08:29

计算机视觉：经典数据格式(VOC、YOLO、COCO)解析与转换(附代码)

第一章&#xff1a;计算机视觉中图像的基础认知 第二章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(一) 第三章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(二) 第四章&#xff1a;搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…...

编程日记 2025/9/14 20:52:55

开源嵌入式实时操作系统uC/OS-II介绍

一、uC/OS-II的诞生&#xff1a;从开源实验到行业标杆 背景与起源 uC/OS-II&#xff08;Micro-Controller Operating System Version II&#xff09;诞生于1992年&#xff0c;由嵌入式系统先驱Jean J. Labrosse开发。其前身uC/OS&#xff08;1991年&#xff09;最初作为教学工…...

编程日记 2025/9/15 12:03:18

QT基础八、与时间相关的UI控件

目录 一、时间类&#xff1a;QTime 1. 创建 QTime 对象 2. 获取当前时间 3. 设置时间 4. 时间格式化 5. 时间加减操作 6. 时间比较 7. 计算时间间隔 8. 判断时间是否有效 9. 使用 QElapsedTimer 测量时间间隔 二、日期类&#xff1a;QDate 1. 创建 QDate 对象 2. 获…...

编程日记 2025/9/15 3:58:10

大道至简 少字全意 易经的方式看 缓存 mybatis缓存 rendis缓存场景 案例

目录 介绍 mybatis缓存 一级缓存 1.是什么 2.特点 3.场景 mybatis 二级缓存 1.是什么 2.特点 3.配置步骤 注意 一级缓存问题 二级缓存问题 扩展 1.MyBatis集成 Redis 2.直接使用Redis redis 缓存 一、String 字符串 二、Llst 列表 三、Hash 哈希 四、Set…...

编程日记 2025/9/15 0:09:53

Python爬虫selenium验证-中文识别点选+图片验证码案例

1.获取图片 import re import time import ddddocr import requests from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.chrome.service import Service from selenium.webdriver.support.wait import WebDriverWait from …...

编程日记 2025/9/14 13:42:29

设计模式Python版 中介者模式

文章目录 前言一、中介者模式二、中介者模式示例 前言 GOF设计模式分三大类&#xff1a; 创建型模式&#xff1a;关注对象的创建过程&#xff0c;包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式。结构型模式&#xff1a;关注类和对象之间的组…...

编程日记 2025/8/16 11:36:12

docker-compose Install deepseek

前言 deepseekAI助手。它具有聊天机器人功能&#xff0c;可以与用户进行自然语言交互&#xff0c;回答问题、提供建议和帮助解决问题。DeepSeek 的特点包括&#xff1a; 强大的语言理解能力&#xff1a;能够理解和生成自然语言&#xff0c;与用户进行流畅的对话。多领域知识&…...

编程日记 2025/9/8 6:19:27

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_process_options

ngx_process_options 声明在 src\core\nginx.c static ngx_int_t ngx_process_options(ngx_cycle_t *cycle); 定义在 src\core\nginx.c static ngx_int_t ngx_process_options(ngx_cycle_t *cycle) {u_char *p;size_t len;if (ngx_prefix) {len ngx_strlen(ngx_prefix);p …...

编程日记 2025/9/15 18:45:03

vue：vite 代理服务器 proxy 配置

Vite 代理服务器&#xff08;Proxy&#xff09;的配置通常用于开发环境&#xff0c;以解决跨域请求等问题。以下是一个详细的配置步骤&#xff1a; 通过以上步骤&#xff0c;你就可以在 Vite 项目中配置代理服务器&#xff0c;以便在开发过程中方便地访问后端服务。 ‌找到 Vi…...

编程日记 2025/9/12 14:53:46

【数据结构】快指针和慢指针

一、 给你单链表的头结点 head ,请你找出并返回链表的中间结点。如果有两个中间结点,则返回第二个中间结点。 要求&#xff1a;只遍历一遍链表 可以使用快慢指针&#xff1a;fast 一次走两步&#xff0c;slow 一次走一步。当 fast NULL&#xff08;偶数个结点&#xff09;或…...

编程日记 2025/9/15 1:56:34

初级渗透测试工程师需要学什么？网络安全零基础入门到精通教程建议收藏！

1、前言 本文主要介绍如何成为一名初级的渗透测试工程师所需要学习的内容&#xff0c;后续也会基于此将自己的学习总结、心得记录下来。相信在不断坚持下&#xff0c;争取在今年五月初成为一名初级的渗透测试工程师。 2、涉及知识领域 基础网络知识&#xff1a; 理解TCP/IP协…...

编程日记 2025/9/11 16:44:50

WSL2下ubuntu开启NFS服务

1. wsl2下ubuntu配置 安装 NFS 服务&#xff1a; sudo apt-get install nfs-kernel-server rpcbindnfs 配置文件/etc/exports&#xff1a; sudo vi /etc/exports打开/etc/exports 以后在后面添加如下所示内容&#xff1a; /home/mk/nfs *(rw,sync,no_subtree_check,no_root…...

编程日记 2025/9/6 18:58:32

superset

开源的BI工具还是选择apache的superset&#xff0c;2021年的是用过davince&#xff0c;结果2023年就不维护了&#xff0c;dataart也是一样的到2023年也没人维护了&#xff0c;dataease国产的人家也要吃饭&#xff0c;社区版也有限制。因而选择用python开发的superset成了唯一的…...

编程日记 2025/9/11 11:36:44

CSS通过webkit-scrollbar设置滚动条样式

查看::-webkit-scrollbar-*各项关系 以下图为例&#xff0c;可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度&#xff0c;再设置overflow: auto&#xff0c;最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...

编程日记 2025/9/16 4:01:13

Mac下Python版本管理，适用于pyenv不起作用的情况

前言 声明&#xff1a;之前也在网上看到过可以使用pyenv来管理python版本&#xff0c;但由于作者的python安装路径实在是繁杂不堪&#xff0c;因此安装完成pyenv体验下来没有任何用处&#xff0c;但偶然发现vscode似乎可以看到各个python版本&#xff0c;因此写下这篇博客记录…...

编程日记 2025/8/16 11:35:39

基于SpringBoot+mybatisplus+vueJS的Cosplay文化展示与交流社区设计与实现

博主介绍&#xff1a;硕士研究生&#xff0c;专注于信息化技术领域开发与管理&#xff0c;会使用java、标准c/c等开发语言&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架…...

编程日记 2025/9/14 8:38:02

Linux动静态库

铺垫 1.动态库与静态库本质上都是文件。 2.关于动静态链接 动态链接&#xff1a;将库中需要的函数地址&#xff0c;填入可执行程序&#xff0c;建立关联。 优点&#xff1a;节省资源&#xff0c;不会出现太多重复代码。 缺点&#xff1a;对库的依赖性比较强&#xff0c;一…...

编程日记 2025/9/14 21:19:50

区块链中的数字签名：安全性与可信度的核心

数字签名是区块链技术的信任基石&#xff0c;它像区块链世界的身份证和防伪标签&#xff0c;确保每一笔交易的真实性、完整性和不可抵赖性。本文会用通俗的语言&#xff0c;带你彻底搞懂区块链中的数字签名&#xff01; 文章目录 1. 数字签名是什么&#xff1f;从现实世界到区块…...

编程日记 2025/9/15 17:40:54

Java实现斗地主-做牌以及对牌排序

卡牌类 public class Card {private String size;//大小private String color;//花色private int value;//权值public Card() {}public Card(String size, String color, int value) {this.size size;this.color color;this.value value;}public String toString(){return …...

编程日记 2025/9/13 7:46:14

SQL写法技巧

目录 1.批量插入&#xff0c;查询&#xff0c;删除数据 缺点 实现方法 1.批量插入数据 2.批量查询数据 3.批量删除数据 4.批量修改数据 解释 2.树型表查询 方法一&#xff1a;递归(适用于多级的情况) 方法二&#xff1a;表的自连接 方法三&#xff1a;MySQL递归&am…...

编程日记 2025/9/15 0:20:16

`pip freeze ＞ requirements.txt` 命令

pip freeze > requirements.txt 命令的作用是将当前 Python 环境中已安装的所有包及其版本号导出到一个名为 requirements.txt 的文件中。这个文件通常用于记录项目的依赖包&#xff0c;以便在其他环境中快速安装相同的依赖。 ### 具体作用 1. **生成依赖列表**&#xff1a…...

编程日记 2025/9/15 11:12:28

windows安装pytorch

windows安装pytorch 通过pip来安装pytorch. 1、更新pip 在激活的虚拟环境中&#xff0c;输入命令&#xff1a; python -m pip install --upgrade pip -i https://mirrors.aliyun.com/pypi/simple/2、安装cpu版的pytorch pip3 install torch torchvision torchaudio -i http…...

编程日记 2025/9/11 21:48:46