- 博客(159)
- 收藏
- 关注
RSS订阅
原创 uniapp+微信小程序+仿微信视频聊天+点击小窗切换+全屏拖动小窗（live-player+live-pusher）+完整代码
实时音视频播放，也称直播拉流，通俗的解释一下就是就是接受聊天对面视频的容器，你和朋友在微信小程序里视频聊天，你的手机需要。如果你是app不是使用 live-player，而是直接使用 video 组件。这块也就是把你摄像头对着的内容（自拍的话就是你自己）推到服务器上。主要是使用live-player、live-pusher。url就是推流地址，还有什么美颜啥的看文档即可。实时音视频录制，也称直播推流。这个是大屏 big-box。：定义可拖动的区域，内部包含。，然后播放出来，这就是。内部自由拖动的组件。
2025-03-04 09:57:10
1314
原创 vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建
├── style/ // 通用 CSS 目录。├── common/ // 通用类库目录。├── components/ // 公共组件目录。├── router/ // 路由配置目录。├── views/ // 页面组件目录。├── tests/ // 单元测试目录。
2025-01-16 16:49:16
2174
原创 vue2快速安装环境，从0-1创建vue2项目教程
我来一一解读Babel：Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的版本，以确保你的代码可以在更旧的浏览器中运行。选择这个特性可以让你使用最新的 JavaScript 语法和特性，一般选上TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和其他一些高级特性。选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目，一般是vue3选择ts,这个不选。
2024-05-25 11:11:16
1258
原创 uniapp _微信小程序使用async,await（易如反掌的理解清楚）
async和await是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。1、asyncasync关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用await关键字等待异步操作的完成。
2024-02-22 11:33:34
2710
2
原创 uniapp微信小程序-分包（一看就懂）
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
2024-01-31 11:52:59
2873
原创 uniapp微信小程序-请求二次封装（直接可用）
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
2024-01-26 15:26:36
4836
2
原创 微信小程序使用蓝牙连接硬件保姆级教程
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值。
2024-01-08 18:52:58
4881
原创 记录下three.js学习过程中不理解问题----纹理⑥
纹理技术是实现3D物体表面细节的关键方法。摘要介绍了纹理的基本概念，即通过将2D图像应用到3D模型上来增强真实感。文章详细讲解了纹理加载流程（使用THREE.TextureLoader）、色彩空间设置（sRGB处理）、多纹理应用方式以及内存管理注意事项。特别强调了纹理文件格式选择（JPG/PNG）和性能优化技巧，包括Mipmap和纹理过滤器的使用。最后还提供了多纹理同步加载的实现方案，确保所有资源加载完成后再渲染场景。这些知识为3D图形开发中的纹理应用提供了实用指导。
2025-06-12 08:00:00
348
原创 记录下three.js学习过程中不理解问题----光照⑦
摘要：本文介绍了Three.js中五种常见光源的特性与应用。环境光（AmbientLight）提供无方向均匀照明；半球光（HemisphereLight）模拟天空和地面的自然光线；方向光（DirectionalLight）产生平行光照效果；点光源（PointLight）向四周发射光线，可设置照射距离；聚光灯（SpotLight）形成锥形光照区域，角度可调。每种光源通过color和intensity参数控制颜色和强度，通过position或target属性调节照射方向，适用于不同的场景照明需求。
2025-06-12 08:00:00
144
原创 记录下three.js学习过程中不理解问题----材质（material）⑤
Three.js中的材质决定了3D对象的外观特性，包括颜色、光泽度等视觉效果。主要材质类型包括：MeshBasicMaterial（不受光照影响的基础材质）、MeshLambertMaterial（简单光照计算的漫反射材质）、MeshPhongMaterial（带镜面高光的材质）、MeshPhysicalMaterial（支持物理属性的高级材质）等。每种材质适用于不同场景，如卡通风格、金属质感或物理真实感渲染。可通过调整属性（如颜色、粗糙度）和设置flatShading（平面着色）来控制外观表现，修改关键属
2025-06-11 12:04:34
822
原创 记录下three.js学习过程中不理解问题④
Three.js中的场景(Scene)是3D渲染的核心容器，用于管理所有可见元素包括物体、光源和摄像机。开发者通过创建场景实例后，可以添加3D对象(如立方体网格)、设置相机位置和渲染器。在动画循环中，通过requestAnimationFrame实现对象旋转等动态效果，最终由渲染器将场景和相机视角结合输出到画布上。场景图机制协调了物体与光源的交互，确保3D环境的正确渲染。
2025-06-11 10:52:10
176
原创 记录下three.js学习过程中不理解问题③
本文介绍了Three.js中几种常用几何体的创建与参数设置方法： 四面体(TetrahedronGeometry)：通过radius控制大小，detail参数调节细分级别以获得更平滑表面。 3D文字(TextGeometry)：需先用FontLoader加载.typeface.json字体文件，支持设置大小、深度、斜角等立体效果参数。 圆环体(TorusGeometry)：可调节主半径、管道半径及分段数，实现不同粗细和精度的"甜甜圈"效果。 环形节(TorusKnotGeometry)：
2025-06-10 18:15:55
739
原创 WebGL与Three.js：从基础到应用的关系与原理解析
WebGL与Three.js是构建3D网页应用的两大关键技术。WebGL作为底层图形库，提供GPU直接访问能力，适合需要精细控制渲染流程的开发人员，但学习曲线较陡。Three.js是WebGL的高级封装，简化了3D场景创建流程，内置光照、材质等高级功能，降低开发门槛。两者关系上，Three.js内部调用WebGL进行渲染。选择时，追求性能与控制的用WebGL，注重开发效率的选Three.js。文章还对比了CPU和GPU的特性差异，说明GPU更适合图形渲染等并行计算任务。
2025-06-09 18:07:07
551
原创 记录下three.js学习过程中不理解问题②
本文主要介绍了 THREE.js 中几种常见几何体的创建和配置方法，具体包括如何创建不同形状的 3D 几何体，并通过参数调整来定制它们的外观。文章涵盖了以下内容：PolyhedronGeometry：通过定义顶点和面索引来生成多面体。顶点数组表示各个顶点的坐标，而面数组则通过指定顶点索引来定义各个面，组合这些面可以构成复杂的多面体。RingGeometry：用于创建一个带孔的 2D 圆盘，文章介绍了如何通过 innerRadius 和 outerRadius 来设置内外半径，并通过 thetaSegme
2025-06-09 17:51:21
1000
原创 记录下three.js学习过程中不理解问题①
本文介绍了3D相机参数的设置与优化要点：1. 相机参数中fov控制垂直视角范围(75°)，near/far决定可视距离(0.1-5米)，aspect防止画面拉伸；2. 默认视角朝向z轴负方向，需调整position.z避免物体被遮挡；3. 宽高比会影响水平视野，类似人眼视角分布；4. 使用requestAnimationFrame实现高效动画循环；5. 通过resizeRendererToDisplaySize函数确保canvas显示尺寸与像素分辨率一致，避免画面模糊。这些参数设置和优化方法对构建高质量3D
2025-06-07 17:58:23
1006
原创 ECharts 提示框（tooltip）居中显示位置的设置技巧
ECharts默认tooltip显示在鼠标右侧可能导致遮挡问题。通过设置tooltip.position函数可实现居中显示：1）获取鼠标坐标和tooltip宽高；2）计算居中位置（x-tooltipWidth/2,y+10）；3）也可调整显示在上方（y-tooltipHeight-10）。该方法解决了默认布局的视觉不对称问题，提升用户体验，适用于图表边缘区域。关键是通过DOM节点获取tooltip尺寸，实现精准定位。
2025-06-07 10:15:08
240
原创 HSL颜色控制及使用示例（Hue-Saturation-Lightness）
HSL颜色模型详解：通过色相（H）、饱和度（S）、亮度（L）三要素定义颜色，色相0-360度表示颜色类型（如0°红、120°绿、240°蓝），饱和度0-100%控制纯度，亮度0-100%调节明暗。其语法格式为hsl(H,S%,L%)。相比RGB，HSL更直观易控，便于动态调整颜色（如通过JavaScript循环修改色相）和CSS交互效果实现（如按钮悬停变色）。文中还展示了Vue框架下动态修改HSL颜色的实例，通过$set方法响应式更新色相值，适用于渐变、动画等场景。
2025-06-05 15:03:56
271
原创 this.$set() 的用法详解（Vue响应式系统相关）
Vue2的this.$set()方法用于动态添加响应式属性。由于Vue2基于Object.defineProperty实现响应式，直接给对象新增属性不会触发视图更新。通过this.$set(target,key,value)可以确保新属性也是响应式的。示例：this.$set(this.user,'name','fang')。在组件外可使用Vue.set()全局方法。Vue3改用Proxy实现响应式，原生支持属性添加，不再需要$set方法。
2025-06-05 14:58:56
298
原创 纯前端博客系统demo+完整源码
摘要： 这是一个纯前端实现的博客系统，包含完整的文章管理功能。系统采用HTML/CSS/JavaScript构建，使用localStorage存储数据，无需后端支持。主要功能包括：1)文章列表展示与搜索；2)文章详情查看；3)管理员登录系统；4)文章增删改查管理；5)响应式设计适配不同设备。系统默认管理员账号为admin/admin123，所有数据保存在浏览器本地。该解决方案适合个人博客或小型内容管理需求，具有轻量级、部署简单的特点。
2025-06-03 14:26:07
100
原创 如何在 Vue.js 中集成 Three.js —— 创建一个旋转的 3D 立方体
在这篇文章中，我将向大家展示如何将 Three.js 与 Vue.js 结合，创建一个简单的 3D 场景，并展示一个旋转的立方体。通过这个简单的示例，你将学习到如何在 Vue 项目中集成 Three.js，以及如何创建动态的 3D 内容。
2025-05-30 17:54:34
781
原创 mouseTool.close(true) 详解
摘要：该代码演示如何使用高德地图API的鼠标工具绘制矩形电子围栏。通过创建MouseTool实例并调用drawRectangle()方法激活矩形绘制功能，当用户完成绘制时触发'draw'事件，在回调中通过mouseTool.close(true)关闭工具并清除覆盖物。其中close方法的true参数表示清除所有绘制内容，false则保留。这种机制也适用于多边形绘制，确保不会残留多余的线条。
2025-05-29 15:59:44
199
原创 如何在高德地图中绘制、编辑和删除圆形区域电子围栏？
本文介绍了基于高德地图API实现圆形区域绘制和操作的方法。主要内容包括：1）通过AMap.CircleEditor插件实现圆形的绘制、编辑和删除功能；2）使用固定测试点验证点是否在圆形区域内的实现原理；3）详细的技术实现步骤，包含地图初始化、事件监听、圆形创建与编辑等关键代码。文章提供了完整的HTML示例代码，展示了如何通过高德地图API实现电子围栏等圆形区域应用场景，包括绘制交互、属性修改和位置检测等功能。该方案适用于需要在地图上标记圆形服务区域或电子围栏的开发需求。
2025-05-29 15:09:17
403
原创 原生小程序与 UniApp 中传递循环数据（整个对象）的对比与实现
本文对比了原生小程序和UniApp在循环数据传递上的实现方式。原生小程序通过wx:for指令和data-*属性传递整个数据对象，如data-item="{{item}}"，在事件处理函数中用event.currentTarget.dataset.item获取。UniApp则使用v-for指令和@click事件直接传递对象，如@click="handleClick(item)"，在方法中直接接收item参数。两种方式都能有效传递完整数据对象，但UniApp的语法更简洁且
2025-05-26 10:31:37
551
原创 《MQTT 从 0 到 1：原理、实战与面试指南全解》
摘要：MQTT是一种轻量级发布/订阅消息协议，专为物联网和实时通信设计。其核心包括Broker服务器、主题订阅机制及三种QoS消息质量等级。前端可通过MQTT.js库实现WebSocket连接，支持断线重连和消息保留功能。实际应用中需注意长连接维护、主题命名规范及安全加密。相比HTTP协议，MQTT更适合实时数据传输，是物联网场景的理想选择，推荐使用EMQX等开源Broker进行部署。<｜end▁of▁sentence｜>
2025-05-21 15:42:48
1139
原创 微信原生小程序中封装 MQTT 客户端：支持重连、消息回调与断开控制
本文介绍了在微信小程序中实现MQTT实时通信的完整方案。首先说明了MQTT协议在IoT场景下的优势，然后详细讲解了如何封装MQTT客户端模块，包括连接建立、断线重连、消息收发等核心功能。文章提供了可复用的代码实现，并特别强调了微信小程序环境的注意事项：必须使用TLS加密连接、合理设置clientId、及时释放资源防止内存泄漏等。最后给出了简单的调用示例，帮助开发者快速集成MQTT功能到小程序项目中。
2025-05-21 15:23:37
270
原创 原生微信小程序记录下全局分享功能
该代码实现了微信小程序的全局分享配置，通过隐式页面函数和路由获取当前页面路径，并根据路径设置不同的分享内容。代码首先获取当前页面路由，然后全局开启分享配置，允许分享给朋友和分享至朋友圈。通过判断页面路由，可以排除某些页面不进行全局分享，或为特定页面设置自定义分享内容。分享时，可以设置分享文案和图片地址。该配置避免了在每个页面单独设置分享功能，提高了代码复用性和维护性。
2025-05-14 17:07:57
103
原创 Vue 3 实现当前时间与日期显示（逐分钟刷新）代码详解
updateTime 函数用于动态更新当前时间和日期。在 Vue 3 中，通过 ref 创建 currentTime 和 currentDate 响应式变量，分别存储时间和日期。onMounted 钩子中调用 updateTime 并设置定时器，每分钟更新一次时间。onBeforeUnmount 钩子中清除定时器，避免内存泄漏。
2025-05-13 10:35:32
147
原创 3D地图下钻可视化组件
显示城市级别数据（如投资、人口等）；自定义地图区域高亮与点击交互；地图层级记录与返回功能；多级行政区下钻展示；自动响应式缩放支持。
2025-05-10 15:39:47
212
原创 Vue3 + ECharts 实现中国地图（2d）下钻与返回功能
这个项目主要实现了一个基于 ECharts 的中国地图可视化，支持从全国地图一层层下钻到省、市级地图，并可以一键返回上一级。在地图配置上，用了 geo 和 map 组件来渲染地图轮廓，visualMap 负责根据数值高低给区域着色，颜色的变化可以一眼看出哪些地方“数值高”，数据分布也就更清晰了。另外，还通过经纬度数据叠加了散点标注，方便突出一些重点城市。
2025-05-10 12:02:46
423
原创 Vue Router 3 使用详解：从零构建嵌套路由页面
在 Vue 2 项目中使用 vue-router，我们首先通过 npm 安装 vue-router@3.6.5。然后在 src/router 目录下新建一个 index.js 文件，定义路由配置：将页面组件（比如 Home.vue 和 User.vue）和路径进行映射。为了实现嵌套路由，我们还创建了一个主页面组件 Main.vue，里面写一个 <router-view /> 用作子路由的出口。接着，我们在 main.js 中引入 router 实例，并挂载到 Vue 根实例中。
2025-05-09 22:27:31
1024
原创 vue3使用 ECharts 实现象形条形进度图（Pictorial Bar Chart）+完整代码
【代码】使用 ECharts 实现象形条形进度图（Pictorial Bar Chart）+完整代码。
2025-04-30 16:49:56
89
原创 Vue3 + ECharts 实现多层极坐标环形图
你可以想象一块披萨：每一块就是一个“角度”，表示一个数据的占比。极坐标的径向轴（环的分布方向）设为类别型，也隐藏。—— 控制“角度”，也就是每个环条占多少角度。—— 控制“半径”，决定这一条环是在哪一圈。”来表示数据的 —— 数据不是向上长，而是。控制环的内外大小（40~100 像素）我们平时看到的柱状图、折线图，都是用的“” —— 横轴是 X，竖轴是 Y。：控制每一层占据的弧度（百分比）：表示角度按百分比计算（满圈）：设置层级顺序，后渲染的在上层。第二层是稍微大一点的圈（外层）：每层环的宽度（10px）
2025-04-29 18:16:58
474
原创 使用 ECharts 在 Vue3 中柱状图的完整配置解析
悬浮提示框在用户鼠标滑过柱状图时展示详细数据，设置了黑色半透明背景与白色文字以适配深色主题。设置分类类型 X 轴，标签为不同年龄段，轴线与标签样式统一使用白色字体提升可读性。整体效果：柱子从上到下由亮青色渐变到深蓝绿色，提升视觉层次感。合理留白设置避免图表元素与边缘重叠，确保文字标签完整显示。，比如坐标轴标签、坐标轴名称、图例等是否会被遮挡或显示不全。是坐标轴的名字，会显示在 x 轴下方（或 y 轴左边）。数值型 Y 轴，隐藏轴线、添加灰色分隔线，使用。控制名字的样式，包括颜色、字体大小等。
2025-04-29 17:47:54
671
原创 echarts+标签+指引线
在数据可视化中，标签和指引线是常用的元素，尤其是在饼图、环形图等图表中。它们有助于提升图表的可读性，使得数据更易于理解。这种就是标签和牵引线。
2025-04-28 17:29:11
1060
原创 echarts+graphic配置项添加自定义文本
graphic: [type: 'text', // 元素类型：文本left: 'center', // 水平位置：居中top: 'center', // 垂直位置：居中style: {text: '自定义文本', // 文本内容textAlign: 'center', // 水平对齐方式fill: '#fff', // 文本颜色font: '18px Arial', // 字体样式},},graphic。
2025-04-28 17:12:26
351
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人