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

js控制文字溢出显示省略号

news 2026/2/11 3:18:42 
.text{display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

本人有个需求就是在一个盒子内有一段文本，然后控制文本显示两行，第二行要显示省略号，本人通过以上方式通过css解决了
但是有个问题,因为这个区域要被截图保存下来，本人使用html-to-image插件去完成了截图操作，但就在这时，bug出现了，例如在真机上面显示省略号，但是在截图上面并没有省略号，而是完整的显示出了两行文字，可能由于这个文字大小在当前机型上面刚好溢出，但是没有达到截图的容器的溢出条件，就出现了一个尴尬的事情，截图没省略号，真机有，然后如果多补充点文字，截图虽然显示了省略号，但是省略号前面还是比真机多几个字，，，因此后面不考虑使用css来做了，改成js来做，具体步骤如下：

方式

下面提供了两种方式实现这个，主要是使用js可以解决很多问题，使用jQuery版本就不行，例如遇到uniapp这种标签皆为组件的就不行了，根本设置不了，因此像uniapp这种建议使用原生js判断

依赖于jQuery

  • 方式一（静态内容非常推荐）
    • 好处
      • 适用于内容固定的情况，直接在页面写死换行的就行
    • 坏处
      • 依赖于jquery和jQuery.ellipsis两个插件，需要引入一下
      • 不适用于内容动态变化情况
  • 方式二（动态内容非常推荐）
    • 好处
      • 适用于页面内容动态变换的情况
    • 坏处
      • 依赖于jquery和jQuery.ellipsis两个插件，需要引入一下
      • 需要几行就要判断几行文字

直接使用原生js处理

  • 方式一（动态内容比较推荐）
    • 好处
      • 适用于页面内容动态变换的情况
      • 不依赖于jquery和jQuery.ellipsis两个插件
    • 坏处
      • 行数较多的情况，需要一个一个判断
      • 除了上述jquery方式二的（需要几行就要判断几行文字）以外，还要判断是否满行显示省略号等（不想判断可以使用jquery的方式二,这个内部已经判断好了）
  • 方式二（静态内容比较推荐）
    • 好处
      • 适用于内容固定的情况，直接写死就行
      • 不依赖于jquery和jQuery.ellipsis两个插件
    • 坏处
      • 行数较多的情况，需要一个一个判断

依赖于jQuery

使用jQuery和jQuery.ellipsis.js来解决

jQuery的代码各位可以百度,这里提供一个CDN地址: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js

jQuery.ellipsis.js代码如下:

/*!* jQuery.ellipsis* https://github.com/jjenzz/jquery.ellipsis* --------------------------------------------------------------------------* Copyright (c) 2013 J. Smith (@jjenzz)* Dual licensed under the MIT and GPL licenses:* https://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html** adds a class to the last 'allowed' line of text so you can apply* text-overflow: ellipsis;*/
(function (a) { if (typeof define === "function" && define.amd) { define(["jquery"], a) } else { a(jQuery) } }(function (d) { var c = "ellipsis", b = '<span style="white-space: nowrap;">', e = { lines: "auto", ellipClass: "ellip", responsive: false }; function a(h, q) { var m = this, w = 0, g = [], k, p, i, f, j, n, s; m.$cont = d(h); m.opts = d.extend({}, e, q); function o() { m.text = m.$cont.text(); m.opts.ellipLineClass = m.opts.ellipClass + "-line"; m.$el = d('<span class="' + m.opts.ellipClass + '" />'); m.$el.text(m.text); m.$cont.empty().append(m.$el); t() } function t() { if (typeof m.opts.lines === "number" && m.opts.lines < 2) { m.$el.addClass(m.opts.ellipLineClass); return } n = m.$cont.height(); if (m.opts.lines === "auto" && m.$el.prop("scrollHeight") <= n) { return } if (!k) { return } s = d.trim(m.text).split(/\s+/); m.$el.html(b + s.join("</span> " + b) + "</span>"); m.$el.find("span").each(k); if (p != null) { u(p) } } function u(x) { s[x] = '<span class="' + m.opts.ellipLineClass + '">' + s[x]; s.push("</span>"); m.$el.html(s.join(" ")) } if (m.opts.lines === "auto") { var r = function (y, A) { var x = d(A), z = x.position().top; j = j || x.height(); if (z === f) { g[w].push(x) } else { f = z; w += 1; g[w] = [x] } if (z + j > n) { p = y - g[w - 1].length; return false } }; k = r } if (typeof m.opts.lines === "number" && m.opts.lines > 1) { var l = function (y, A) { var x = d(A), z = x.position().top; if (z !== f) { f = z; w += 1 } if (w === m.opts.lines) { p = y; return false } }; k = l } if (m.opts.responsive) { var v = function () { g = []; w = 0; f = null; p = null; m.$el.html(m.text); clearTimeout(i); i = setTimeout(t, 100) }; d(window).on("resize." + c, v) } o() } d.fn[c] = function (f) { return this.each(function () { try { d(this).data(c, (new a(this, f))) } catch (g) { if (window.console) { console.error(c + ": " + g) } } }) } }));

引入到页面使用

方式一(固定内容推荐,非动态内容不推荐)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="./jQuery.ellipsis.js"></script><style>.aaa,.aaa2 {background: #eee;border: 1px solid #ccc;width: 130px;margin-left: 200px;}.aaa2{margin-top: 50px;}/* 下面这三个css不能删,否则不起作用了 */.ellip {display: block;height: 100%;}.ellip-line {display: inline-block;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}.ellip,.ellip-line {position: relative;overflow: hidden;max-width: 100%;}</style>
</head><body><div class="aaa">你哈哈哈哈哈哈啊哈哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个</div><div class="aaa2">你哈哈哈哈哈哈啊&nbsp;哈哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个</div><script>$('.aaa').ellipsis({ lines: 2 });  // 控制第二行溢出显示省略号$('.aaa2').ellipsis({ lines: 2 }); // // 控制第二行溢出显示省略号</script>
</body></html>

上面内容可以看到，需要换行的部分必须手动在html里面加换行或者&nbsp;，因此这种方式适合静态的，不适用于动态的，可以看下面这个

方式二(动态内容推荐)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="./jQuery.ellipsis.js"></script><style>.aaa {background: #eee;border: 1px solid #ccc;width: 150px;}/* 下面这三个css不能删,否则不起作用了 */.ellip {display: block;height: 100%;}.ellip-line {display: inline-block;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}.ellip,.ellip-line {position: relative;overflow: hidden;max-width: 100%;}</style>
</head><body><div class="aaa">abababababa我还得覅维护诶哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个</div><script>function getTextWidth(text, font) {// 计算字符串的宽// 创建临时canvas元素var canvas = document.createElement("canvas");var context = canvas.getContext("2d");context.font = font;return context.measureText(text).width;}let aaa = document.querySelector('.aaa'); // 获取容器let aaawidth = aaa.clientWidth;  // 拿到容器的宽度let text = aaa.innerText;let font = getComputedStyle(aaa).font; // 获取元素的实际字体样式(为了算文字大小，这个跟字符串的宽有影响,如果容器上面加了字体,这里同样会返回这个字体,可以打印font查看,也就是说,这个方法兼容带字体的情况)let textWidth = getTextWidth(text, font); // 计算字符串的宽度console.log(aaawidth,textWidth);  // 容器的宽和字符串的宽度let textarr = text.split('') // 将字符串分割成数组进行遍历let start_str = '' // 第一行的文字内容let end_str = '' // 第二行的文字内容(还可以加其他更多的行，只需要在下面多几个判断就好)let linshistr = '' // 临时存储用于计算的字符串textarr.forEach((item)=>{linshistr += item // 每次循环都让临时字符串累加// 下面如果有第二行第三行的话直接判断 > n*aaawidth 即可if(getTextWidth(linshistr, font) > aaawidth){// 如果小于容器容器宽度，让第一行的字符串进行累加end_str += item   }else{// 如果超出容器，都是在第二行，直接让第二行元素累加start_str+= item}})console.log(start_str, end_str); // 获取第一行和第二行元素内容aaa.innerHTML = start_str + '&nbsp;' + end_str // 加个&nbsp;可以换行，就像方式一写死的一样$('.aaa').ellipsis({ lines: 2 }); // 再去使用jQuery.ellipsis.js的ellipsis方法让第二行显示省略号</script>
</body></html>

直接使用js

方式一(动态内容推荐)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.aaa {background: #eee;border: 1px solid #ccc;width: 154px;}</style>
</head><body><div class="aaa"><div class="son"></div><div class="son2"></div></div><script>// let str = 'a我还得覅维护诶好啊' // 获取文本内容(一行满的情况)// let str = 'a我还得覅维护诶' // 获取文本内容(一行不满的情况)// let str = 'a我还得覅维护诶哈哈哈哈i和ID号次我深有感触' // 获取文本内容(两行满的情况)// let str = 'a我还得覅维护诶哈哈哈你好啊我爱你' // 获取文本内容(两行不满的情况)function getTextWidth(text, font) {// 计算文本字符串的宽// 创建临时canvas元素var canvas = document.createElement("canvas");var context = canvas.getContext("2d");context.font = font;return context.measureText(text).width;}// 获取元素实际的容器let aaa = document.querySelector('.aaa');let aaawidth = aaa.clientWidth; // 获取容器宽度let font = getComputedStyle(aaa).font; // 获取元素的实际字体样式，(为了算文字大小，这个跟字符串的宽有影响,会返回字体的大小和字体名称,如果是固定的话也可以直接写死,这个是从容器上面获取的字体大小和字体名称)let textWidth = getTextWidth(str, font); // // 计算字符串的宽度console.log(aaawidth, textWidth); // // 容器的宽和字符串的宽度let textarr = str.split('')  // 将字符串分割成数组进行遍历let start_str = '' // 第一行的文字内容let end_str = '' // 第二行的文字内容(还可以加其他更多的行，只需要在下面多几个判断就好)let linshistr = '' // 临时存储用于计算的字符串textarr.forEach((item) => {linshistr += item// 第一行的判断if (getTextWidth(linshistr, font) < aaawidth) {start_str += item}// 第二行的判断if (getTextWidth(linshistr, font) > aaawidth && getTextWidth(linshistr, font) < 2 * aaawidth) {end_str += item}// 第n行的判断// if (getTextWidth(linshistr, font) > ( n - 1 ) * aaawidth &&getTextWidth(linshistr, font) > n * aaawidth) {}})console.log(start_str, end_str); // 输出第一行和第二行的文字内容// 如果第二行不存在,就只显示一行// 这里需要判断是否占满容器(这里我判断容器宽度减去10像素如果小于文字宽度大小就加省略号，否则原样输出，这里的10大家可以根据项目自行改)if (end_str == '') {document.querySelector('.son').innerHTML = aaawidth - 10 < getTextWidth(start_str, font) ? start_str.substring(0, start_str.length - 1) + '...' : start_str;} else {// 第二行存在,则第一行肯定会存在document.querySelector('.son').innerHTML = start_strdocument.querySelector('.son2').innerHTML = aaawidth - 10 < getTextWidth(end_str, font) ? end_str.substring(0, end_str.length - 1) + '...' : end_str;}</script>
</body></html>

方式二(固定内容推荐,非动态内容不推荐)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.aaa {background: #eee;border: 1px solid #ccc;width: 154px;}</style>
</head>
<body><div class="aaa"><div class="son"></div><div class="son2"></div></div><script>let aaa = document.querySelector('.aaa');let son = document.querySelector('.son');let son2 = document.querySelector('.son2');let str = 'a我还得覅维护诶ha'// 这种方式比较暴力，直接截取字符串（适用于静态内容）if (str.length < 10) {son.innerHTML = str.substring(0, 10)}else if(str.length == 10){son.innerHTML = str.substring(0, 10)+'...'}else if(str.length > 10&&str.length < 20){son.innerHTML = str.substring(0, 10)son2.innerHTML = str.substring(10,20)}else if(str.length >= 20){son.innerHTML = str.substring(0, 10)son2.innerHTML = str.substring(10,20)+'...'}</script>
</body>
</html>

相关文章：

js控制文字溢出显示省略号

.text{display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }本人有个需求就是在一个盒子内有一段文本&#xff0c;然后控制文本显示两行&#xff0c;第二行要显示…...

编程日记 2024/12/27 20:52:56

WPF+MVVM案例实战与特效（四十七）-实现一个路径绘图的自定义按钮控件

文章目录 1、案例效果2、创建自定义 PathButton 控件1、定义 PathButton 类2、设计样式与控件模板3、代码解释3、控件使用4、直接在 XAML 中绑定命令3、源代码获取4、总结1、案例效果 2、创建自定义 PathButton 控件 1、定义 PathButton 类 首先，我们需要创建一个新的类 Pat…...

编程日记 2024/12/27 20:50:52

操作002：HelloWorld

文章目录 操作002&#xff1a;HelloWorld一、目标二、具体操作1、创建Java工程①消息发送端&#xff08;生产者&#xff09;②消息接收端&#xff08;消费者&#xff09;③添加依赖 2、发送消息①Java代码②查看效果 3、接收消息①Java代码②控制台打印③查看后台管理界面 操作…...

编程日记 2024/12/27 20:49:50

odoo中@api.model， @api.depends和@api.onchange 装饰器的区别

文章目录 1. api.model用途特点示例 2. api.depends用途特点示例 3. api.onchange用途特点示例 总结 在 Odoo 中&#xff0c;装饰器&#xff08;decorators&#xff09;用于修饰方法&#xff0c;以指定它们的行为和触发条件。api.model、api.depends 和 api.onchange 是三个常用…...

编程日记 2024/12/27 20:46:47

有哪些精益工具可以帮助企业实现转型？

为了在激烈的市场竞争中立于不败之地&#xff0c;许多企业开始寻求通过精益转型来优化运营、降低成本、提高效率和客户满意度。然而&#xff0c;精益转型并非一蹴而就&#xff0c;而是需要一系列精益工具的辅助&#xff0c;这些工具能够帮助企业识别浪费、优化流程、提升质量&a…...

编程日记 2024/12/27 20:44:45

以太网帧结构

以太网帧结构 目前&#xff0c;我们局域网当中应用最广的技术或者协议啊&#xff0c;就是以太网。我们首先来看一下以太网的真结构。这块内容这里边再系统的来给大家去展开说一下&#xff0c;以太网真格式就如下面这个图。所示前面有八个字节&#xff0c;是用于时钟同步的&…...

编程日记 2024/12/27 20:36:38

QT调用Sqlite数据库

QT设计UI界面&#xff0c;后台访问数据库&#xff0c;实现数据库数据的增删改查。 零售商店系统 数据库表&#xff1a; 分别是顾客表&#xff0c;订单详情表&#xff0c;订单表&#xff0c;商品表 表内字段详情如下&#xff1a; 在QT的Pro文件中添加sql&#xff0c;然后添加头…...

编程日记 2024/12/27 20:35:36

前端

前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本&#xff1a;文本&#xff0c;声音&#xff0c;图片&#xff0c;视频&#xff0c;表格&#xff0c;链接 标记&#xff1a;由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vs…...

编程日记 2024/12/27 20:33:34

【Git】—— 使用git操作远程仓库（gitee）

目录 一、远程仓库常用命令 1、从远程仓库克隆项目 2、查看关联的远程仓库 3、添加关联的远程仓库 4、移除关联的远程仓库 5、将本地仓库推送到远程仓库 6、从远程仓库拉取项目 二、分支命令 1、查询分支 2、创建分支 3、切换分支 4、推送到远程分支 5、合并分支 …...

编程日记 2024/12/27 20:30:30

Paddler负载均衡器

Paddler负载均衡器 Paddler本身是用Go语言编写的，没有直接的Python接口，但可以通过以下方式在Python中使用： 执行命令行调用 在Python中可以使用 subprocess 模块来调用Paddler的命令行工具，实现负载均衡功能 。例如： import subprocessdef start_paddler_agent():com…...

编程日记 2024/12/27 20:29:29

OSCP - Proving Grounds - Slort

主要知识点 文件包含 windows的reveseshell 具体步骤 执行nmap,依旧是很多端口开放&#xff0c;尝试了ftp,smb等均失败 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-10-13 12:00 UTC Nmap scan report for 192.168.53.53 Host is up (0.00095s latency). Not sho…...

编程日记 2024/12/27 20:28:28

YoloV9改进策略：Head改进|DynamicHead，利用注意力机制统一目标检测头部|即插即用

摘要 论文介绍 本文介绍了一种名为DynamicHead的模块，该模块旨在通过注意力机制统一目标检测头部，以提升目标检测的性能。论文详细阐述了DynamicHead的工作原理，并通过实验证明了其在COCO基准测试上的有效性和效率。 创新点 DynamicHead模块的创新之处在于它首次尝试在一…...

编程日记 2024/12/27 20:27:27

BFD综合详细实验配置案例

前言 本实验的目的是通过配置BGP&#xff08;边界网关协议&#xff09;、OSPF&#xff08;开放式最短路径优先协议&#xff09;、VRRP&#xff08;虚拟路由冗余协议&#xff09;以及BFD&#xff08;双向转发检测&#xff09;等网络协议&#xff0c;模拟企业级网络环境中的多协…...

编程日记 2024/12/27 20:24:21

自然语言处理与知识图谱的融合与应用

目录 前言1. 知识图谱与自然语言处理的关系1.1 知识图谱的定义与特点1.2 自然语言处理的核心任务1.3 二者的互补性 2. NLP在知识图谱构建中的应用2.1 信息抽取2.1.1 实体识别2.1.2 关系抽取2.1.3 属性抽取 2.2 知识融合2.3 知识推理 3. NLP与知识图谱融合的实际应用3.1 智能问答…...

编程日记 2024/12/27 20:22:19

c# RSA加解密工具，.netRSA加解密工具

软件介绍 名称： c# RSA加解密工具，.netRSA加解密工具依赖.net版本： .net 8.0工具类型： WinForm源码下载 c# RSA加解密工具，.netRSA加解密工具 依赖项 WinFormsRSA.csproj <Project...

编程日记 2024/12/27 20:21:18

Metricbeat安装教程——Linux——Metricbeat监控ES集群

Metricbeat安装教程——Linux 一、安装 下载安装包&#xff1a; 官网下载地址&#xff1a;https://www.elastic.co/cn/downloads/beats/metricbeat 上传包到linux 切换到安装目录下 解压&#xff1a;tar -zxvf metricbeat-7.17.1-linux-x86_64.tar.gz 重命名安装文件夹 mv met…...

编程日记 2024/12/27 20:17:15

一万多字拆解java中——“ 注解 ”的一切（三）（已完结）

前言&#xff1a; 咱们书接上回&#xff0c;上次按照框架讲了 第一篇&#xff0c;我们讲到了&#xff1a; ①注解的引入&#xff08;简单概述&#xff09;&#xff1a;在jdk5.0的时候 ②注解与注释的区别&#xff1a; 注释 是为了帮助人类阅读代码&#xff0c;不会对程序的执…...

编程日记 2024/12/27 20:16:13

记一次rac故障原因分析（虚拟化平台）

一 现象描述 XX客户于1月14号凌晨业务中断&#xff0c;检查数据库发现数据库集群宕机。 XX客户于2月14号春节初五早上业务异常&#xff0c;连接数据库无响应。 二 问题详细诊断 1月14号故障 1月14号凌晨2点&#xff0c;客户反馈业务中断&#xff0c;发现节点1无法连接&…...

编程日记 2024/12/27 20:15:12

Vue CLI 3 项目构建

Vue CLI 是一个功能强大、易于使用的工具&#xff0c;可以极大地简化 Vue.js 应用的开发过程。通过快速创建项目、灵活的插件系统和丰富的配置选项&#xff0c;开发者可以更专注于业务逻辑&#xff0c;而不是底层配置。无论是新手还是经验丰富的开发者&#xff0c;Vue CLI 都是…...

编程日记 2024/12/27 20:14:11

1114 Family Property (25)

This time, you are supposed to help us collect the data for family-owned property. Given each persons family members, and the estate&#xff08;房产&#xff09;info under his/her own name, we need to know the size of each family, and the average area and n…...

编程日记 2024/12/27 20:13:10

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2026/1/27 2:03:36

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21