天府之绝-CSDN博客

原创 js 将css十六进制颜色值转换成rgba

摘要：本文介绍了一个将十六进制颜色值转换为RGBA格式的JavaScript函数。该函数接收hex（十六进制颜色）和alpha（透明度）两个参数，支持3位或6位十六进制格式，默认透明度为0.2。实现原理是通过字符串处理将十六进制转换为RGB分量，最终返回包含指定透明度的RGBA字符串。若hex参数为空，则返回黑色半透明值。

2026-01-13 09:44:12 13

本文介绍了一个JavaScript函数smallToBig，用于将数字金额转换为中文大写格式，防止人工输入错误。该函数支持最大处理金额9999999999999999.99，包含零到玖的中文数字、拾佰仟等基本单位，以及万、亿等扩展单位。函数首先验证输入有效性，然后分离整数和小数部分进行转换处理，最后拼接成完整的中文大写金额字符串，包含"元整"等标准格式。这个工具函数可直接用于财务系统，确保金额输入的准确性。

2026-01-13 09:38:23 15

原创 uniapp 中使用uview表单验证时，自定义扩展的表单，在改变时无法触发表单验证处理；

摘要：uniapp中使用uview表单时，自定义扩展组件无法实时触发验证，需手动触发事件。解决方法：1.在组件内部添加onChangeFormItemValid方法，通过$nextTick触发on-form-change或on-form-blur事件；2.引入Emitter混入以使用dispatch方法。示例代码展示了自定义日期组件的实现，通过dispatch触发验证事件，确保与uview表单验证机制兼容。核心点在于正确触发验证事件并处理异步执行顺序。

2026-01-12 11:32:33 211

原创 Uniapp App(Android)端非媒体文件的选择、上传、下载、查看功能

Uniapp在Android端处理非媒体文件存在技术难点。官方组件仅支持图片和视频上传，需通过plus.io.chooseFile获取content://格式URI，这种安全机制通过ContentResolver间接访问文件。解决方案包括：1) 使用Android API转换URI为真实路径；2) 通过uni.uploadFile上传；3) 网络文件需先下载；4) 使用uni.openDocument打开文档。关键代码展示了如何查询获取文件实际路径，解决了App端文件选择的核心问题。

2025-12-25 09:53:19 380

原创 three.js 扩散光圈效果实现；

摘要：本文实现了一个3D场景中的建筑群灯光扩散效果。通过Three.js创建随机分布的几何体建筑模型，使用自定义着色器ShaderMaterial实现灯光特效。着色器根据物体世界坐标与中心的距离计算发光区域，随时间变化形成从中心向外扩散的光圈效果。关键代码包括顶点着色器计算世界坐标，片元着色器判断发光条件，以及动画循环更新光圈位置。建筑模型包含圆柱体、圆锥体和立方体，随机生成高度和位置，并添加边缘线框增强视觉效果。

2025-12-01 10:30:00 168

原创 three.js 围绕建筑物的光环上升效果实现；

本文介绍了使用Three.js实现建筑表面动态光影效果的技术方案。通过自定义着色器材质(ShaderMaterial)，动态改变建筑物局部位置的光影效果。核心代码包括顶点着色器和片元着色器的实现，其中片元着色器根据顶点位置和时间参数控制不同区域的颜色显示效果。文章详细展示了从场景初始化、相机设置、几何体创建到着色器应用的完整流程，并提供了边缘高亮等增强视觉效果的方法。该技术可应用于建筑可视化等场景，实现动态环状光影效果。

2025-11-29 10:15:00 141

原创 three.js实现中心三棱锥旋转效果；

本文展示了一个使用Three.js实现的3D动态棱锥和圆环动画。通过Vue组件方式构建，代码实现了场景初始化、光照设置、相机配置等功能。主要包含一个旋转的棱锥和一个周期性缩放的红色圆环，其中棱锥使用ConeGeometry创建并持续旋转，圆环通过RingGeometry构建并随时间动态改变大小和透明度。动画效果通过requestAnimationFrame实现实时渲染，并添加了OrbitControls支持用户交互控制视角。代码结构清晰，包含几何体创建、材质设置、动画更新等完整流程，适合作为Three.js

2025-11-28 15:30:00 151

原创 three.js 自定义着色器shader默认入参

本文介绍了WebGL着色器编程中顶点着色器和片元着色器的默认输入参数。顶点着色器接收几何体提供的顶点属性（如位置、法线、UV坐标等）和全局Uniform变量（如模型视图矩阵、投影矩阵等）。片元着色器则使用相同的Uniform变量，并额外包含材质相关参数（如漫反射颜色、纹理采样器等）。这些参数为三维图形渲染提供了必要的数据支持，涵盖了从顶点处理到像素着色的完整渲染管线。

2025-11-27 14:30:00 160

原创 three.js 绘制飞线效果；

本文介绍了使用Three.js实现飞线动画效果的原理和方法。通过THREE.QuadraticBezierCurve3贝塞尔曲线在两个点之间创建平滑曲线，并使用getPoints方法获取68个采样点。核心实现包括：1)设置起点和终点；2)计算控制点；3)创建曲线并获取点集；4)使用红色小球沿曲线路径运动。代码展示了完整的实现流程，包括场景初始化、相机设置、渲染器配置等，并提供了球体沿曲线运动的动画效果。该方法可用于数据可视化中展示动态连接效果。

2025-11-26 17:14:19 167

原创 three.js 实现脉冲效果；简化为单一功能；

本文介绍了两种在Three.js中实现脉冲效果的方法。第一种使用THREE.RingGeometry，通过动画控制scale和opacity属性来创建动态缩放效果。第二种采用自定义着色器渲染，通过片元着色器中的距离计算和时间参数实现更复杂的脉冲动画。两种方法都提供了完整的代码实现，包括场景设置、相机配置和动画循环。第一种方法适合简单的环形脉冲效果，第二种则提供了更多自定义空间，可以创建更复杂的视觉效果。文章还特别提醒在引入着色器文件时需要添加"?raw"后缀。

2025-11-26 16:59:32 115

原创 three.js示例

本文介绍了使用Three.js在Vue3中创建3D立方体的基本步骤。首先需要创建场景、相机和渲染器，然后设置渲染尺寸并挂载到DOM容器。接着创建立方体几何体并应用绿色基础材质，组合成网格对象后添加到场景中。通过设置相机位置控制视角，最后实现立方体的动画旋转效果。整个过程展示了Three.js的核心概念和工作流程，包括场景管理、对象创建和渲染循环等基本操作。

2025-11-17 10:58:37 120

原创 cesium 界面中相关查看器清理

本文展示了如何使用Cesium库配置3D地球视图界面。代码通过设置Viewer对象的多个参数来隐藏不必要的控制组件，包括：不显示home按钮(homeButton:false)、隐藏模式选择器(sceneModePicker:false)、移除图层选择器(baseLayerPicker:false)等，同时保留了地理编码搜索框(geocoder:true)。此外还设置了默认视角范围(Cesium.Camera.DEFAULT_VIEW_RECTANGLE)并隐藏了版权信息(creditContainer.s

2025-11-04 10:00:00 109

原创 cesium中如何去掉logo等多余的显示；

本文介绍了使用Cesium地图引擎的基本配置步骤：首先需要在官网注册获取Access Token并设置到项目中；其次通过代码隐藏Cesium默认的版权logo；最后提供了完整的Vue组件代码示例，包含资源路径配置、Token设置和查看器初始化等内容。文章重点展示了如何快速集成Cesium到前端项目并进行基础定制，适合开发者快速入门Cesium的基本使用。

2025-11-03 15:00:00 207

原创 vue3 中配置cesium细节

本文介绍了在Vue项目中集成Cesium的四个步骤：1)安装cesium库；2)将node_modules中Build目录下的4个文件夹复制到public目录；3)将Widgets文件夹拷贝到src目录；4)配置静态资源路径。文章提供了关键代码片段，展示如何设置基础路径并初始化Cesium地图视图。该方法适用于在Vue项目中使用Cesium进行3D地图开发。

2025-11-03 09:31:12 240

原创 vue3 实现文本切割，“展开”和“收起”

3、“...”是虚拟出现的，有按钮的伪类提供（.text-btn:before提供），为了避免麻烦“...”绝对定位在(.text-btn)的padding里面，方便控制；5、判断（.text）标签是否展开可以使用该元素的（offsetHeight）和（scrollHeight）进步比较，相等就是展开状态，否则就是被收起的；2、按钮浮动会在最上面，需要使用另外元素或者伪类占据上部位置（此处使用的是：.text::before配合calc设置高度，占据上部位置）text：显示的文本；

2024-08-22 15:58:08 710

原创 el-cascader级联选择器，仅根据最后一级id回显完整路径

上述代码是根据不重复的label进行处理的。下面附上来自elementui，el-tree的数据做测试；

2024-08-20 09:57:11 1316

原创 DevEco studio 常用快捷键

结束当前断点的本轮调试（因为有可能代码会被调用多次，所以调用后只会结束当前的这一次）如果有下一个断点会跳到下一个断点中。（不常用，Win 系统建议 Ctrl + W 修改为关闭当前标签页）代码块注释 /**/，与 Ctrl + / 的区别是只会在代码块的开头与结尾添加注释符号（常用）会打开一个已经配置的运行列表，让你选择一个后，再以调试模式运行。（常用，能同步更新路径、变量名、函数名的重命名）会打开一个已经配置的运行列表，让你选择一个后，再运行。最近的文件（常用，切换文件、切换面板，强烈推荐）

2024-08-19 16:14:45 655

原创 uniapp使用地图开发app, renderjs使用方法及注意事项

摘要本文介绍了如何使用 renderjs 在 UniApp 中实现腾讯地图功能（而非默认的高德地图）。renderjs 是一个 UniApp 提供的渲染脚本，允许在 App 中直接操作 DOM 和第三方库。文章通过一个 Demo 展示了地图标记点击交互（如显示图片和放大效果），并详细解析了代码实现：页面结构：包含普通 script 和 renderjs 标签，后者处理地图逻辑，响应数据变化。关键机制：通过 :prop 和 :change:prop 绑定数据变化触发 renderjs 中的方法。限制：

2024-05-15 15:11:50 3863

原创 vue3使用tsx/jsx时报错：JSX 元素隐式具有类型 “any“，因为不存在接口 “JSX.IntrinsicElements“。

在项目中安装：npm install @types/react。

2024-05-06 10:26:15 2197

原创 vue2迁移到vue3，v-model的调整

BREAKING：v-bind的.sync修饰符和组件模型选项被删除，并替换为v-model上的一个参数；vue2迁移到vue3，往往不想去调整之前的代码，以下就使用改动较小的方案进行调整。项目从vue2迁移到vue3，v-model不能再使用了，需要如何调整？下面只提示变化最小的迁移，不赘述vue2和vue3中的常规写法。新功能：现在可以在同一组件上进行多个v模型绑定；新增：增加了创建自定义v型模型修改器的功能。有关更多信息，请继续阅读！上面改成(vue3)

2024-04-30 15:24:33 1375

原创 uniapp使用地图开发app

3:、第三种情况就是app中有地图，且有其他交互效果，动画效果等，最好的方式是使用H5实现地图，这样就不会被地图层级压住，web端能实现的动画效果、渐变均可以比较容易实现。（不受限于高德地图，其他地图也是可以使用的）方法一：新项目的话可以考虑使用webpack或者vue-cli，vue版本无所谓（打包工具不能是vite），直接写H5，打包好的dist文件夹然后再放到hbuider新建的项目中打包成app。方法二：现有老项目是uni的，已经无法调整，可以考虑使用web-view和renderjs的方式。

2024-04-26 18:01:55 854

原创 uview中 u-album相册显示样式支持自定义

有特殊的显示要求的时候，使用插槽进行显示，position值改为‘absolute’即可在页面上显示ui需要的样式，从而实现预览功能。缺点：u-album相册的展示效果却有点蠢，很难构建自己需要的样式，比如：头像使用、产品详情图片等。position(非比传): 定位值有‘absolute’、‘relative’urls（比传）: 图片的链接，可以是数组，也可以是以“，”隔开的字符串；优点：uview中u-album相册的预览功能还是可以的。

2024-04-15 14:37:14 1300

原创 Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yo

Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal 警告：请勿将不理解或未自行查看的代码粘贴到 DevTools 控制台中。这可能允许攻击者窃取您的身份或控制您的计算机。请在下面输入“允许粘贴”以允许粘贴。我们拷贝的数据，放入谷歌浏览器控制台的时候报警告，且数据等不能使用。

2024-04-11 15:55:10 13618 1

原创踩坑uniapp中打包Andiord app，在真机调试时地图以及定位功能可以正常使用，打包成app后失效的问题

本文介绍了在UniApp中使用高德地图的配置流程：1）登录高德地图控制台填写应用信息；2）获取并添加Key；3）通过UniApp官网获取SHA1证书；4）在高德控制台配置相应Key；5）使用HBuilder进行原生App云打包（需注意每日打包次数限制）。文章重点指导开发者完成从地图服务申请到最终App打包的全过程。

2024-03-28 10:41:58 1254

原创 uniapp、vue2.6、H5，利用腾讯TRTC，快速跑通1v1视频功能

腾讯云为数百万的企业和开发者提供安全、稳定的云服务器、云主机、CDN、对象存储、域名注册、云存储、云数据库等云服务，帮助用户解决游戏、视频、移动、微信、互联网+等行业的架构难题，是全球领先的云计算服务商。最后打包上测试服测试（注意：测试只能在测试服测试，本地无法测试，注意用户1点击用户1按钮，用户2点击用户2按钮，最后就是用户1对用户2发起视频，测试就通了）步骤八：创建index.vue页面，页面名字自行定义。步骤六：创建虚拟UserSig（用户签名，上线后由后端提供）步骤二：单击刚刚创建的应用，进入。

2024-03-20 17:01:37 2053

空空如也

空空如也