- 博客(112)
- 收藏
- 关注
RSS订阅
原创 微信小程序开发支付提示“违规“？发货信息录入接入指南
微信小程序平台近期更新了运营规范，要求所有实物电商类小程序必须接入微信订单管理系统，以确保交易安全和提升用户体验。商家需在小程序后台进行订单和发货信息管理，用户可通过微信服务通知了解物流状态并确认收货。接入方式包括使用微信后台自带的订单管理系统或通过API接入自有系统。接入后，商家需调用相关API进行发货信息录入、订单状态查询、确认收货提醒等操作，并确保资金在用户确认收货前处于冻结状态。本文详细介绍了订单发货管理功能、接入前的准备工作、发货信息录入的两种方式以及相关API的使用方法，帮助开发者顺利接入微信订
2025-05-19 10:29:06
1071
7
原创 Vue3 Echarts 3D饼图（3D环形图）实现讲解附带源码
本文介绍了如何利用 ECharts 和 echarts-gl 插件实现 3D 饼图和 3D 环形图。首先，准备工作包括引入 ECharts 核心库和 echarts-gl 插件，支持通过 CDN 或 npm 安装。3D 饼图的实现原理主要依赖于 echarts-gl 插件，通过自定义曲面图、三维折线图和三维散点图分别绘制饼图主体、指示线和标签。文章详细解析了 echarts-gl 插件的常用配置项，如 grid3D 和 series，并重点介绍了曲面图的参数方程（parametricEquation）
2025-05-12 15:00:33
1291
2
原创 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
通过本篇教程，我们认识了什么是Three.js和Three.js应用场景，共同探索了Three.js的核心概念与基础用法。从构建场景（Scene）、相机（Camera）到渲染器（Renderer）的"铁三角"架构，再到几何体（Geometry）、材质（Material）与网格（Mesh）的有机结合，至此你已经了解并掌握了创建最基础三维场景的核心工具链。更多three.js入门知识点请关注该系列教程后续的更新。
2025-02-19 15:20:41
2158
原创 【组件封装】vue3移动端手把手教你封装一个带动画和吸顶的 下拉菜单组件（DropdownMenu）
手把手教你封装一个移动端 下拉菜单组件（DropdownMenu），以uniapp vue3为代码示例。
2024-11-25 14:57:27
2142
4
原创 HarmonyOS Next 组件或页面之间的所有通信（传参）方法总结
本文总结了鸿蒙中常用的组件或页面之间参数传递方法，包括父子组件，子孙组件，兄弟组件，互不相关的组件（页面）和页面路由跳转的参数传递以及父子组件方法互调等。
2024-11-13 16:44:47
3001
原创 vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，支持鼠标移入停止移出滚动
列表自动滚屏效果常见于大屏开发场景中，本文将讲解用vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，并支持鼠标移入停止滚动、移出自动滚动。
2024-11-07 14:02:28
6044
6
原创 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器（上）
HarmonyOS NEXT（鸿蒙应用）开发快速入门教程ArkTS语法之装饰器篇，基于HarmonyOS NEXT Beta1版本（api 12）讲解。本文将从前端开发者角度来理解和学习每个语法点，通过举例HarmonyOS NEXT和web端两种领域类似语法的使用，帮助前端开发人员快速入门HarmonyOS NEXT。在每个装饰器讲解上把同一个功能分别用ArkTs和vue 2种代码进行演示，使其更深刻理解每个装饰器的作用，在类比中学习记忆达到无缝衔接。
2024-09-19 09:52:28
1874
原创 HarmonyOS Next 系列之列表下拉刷新和触底加载更多数据实现（十一）
HarmonyOS Next（基于API12）实现下拉刷新和上拉触底加载更多功能实现讲解。
2024-08-15 10:19:02
4484
2
原创 HarmonyOS Next系列之地图组件（Map Kit）使用（九）
HarmonyOS Next（基于API12）自带地图Map Kit使用——本文将讲述如何通过手动生成签名证书、申请地图权限、地图展示和地图常用功能示例讲解。
2024-07-22 10:11:51
4571
18
原创 HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八）
HarmonyOS Next（基于API11）实现Echarts图表组件（折线图、柱状图、饼图等)。
2024-07-03 09:33:11
6022
13
原创 Web Serial API串口通信，实现web和electron扫码枪读取数据
本文将讲述Web Serial API简单应用，以扫码枪为示例，通过代码实现web端读取扫码枪扫码内容。
2024-02-23 16:26:10
8244
16
原创 一文读懂vue+scss实现主题换肤功能
web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）方案，这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量，这个变量可以是HTML标签属性值也可以是类名，这个变量位置既可以是最顶层也可以是需要换肤地方（子节点）。变量如果是类名的话需要设置一个独一无二的名称，这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发，所以更好的选择变量是属性值。//顶层方案。
2024-01-26 15:08:44
4648
1
原创 electron+vite+vue3 快速入门教程
本文将介绍electron基本使用和构建electron+vite+vue3脚手架开发项目electron框架对web开发人员来说非常友好，无须了解原生开发技能，就能通过web技术进行桌面应用开发，大大减少学习成本，一套代码能快速构建生成多端应用，也大幅减少了开发成本。简言之，electron开发可以看成是桌面功能开发+纯web页面开发，桌面功能开发在主进程调用Electron API，而web页面开发就是html，css，js技术栈。
2024-01-17 14:45:52
6091
7
原创 web端播放rtsp视频流（摄像头监控视频）教程及window下开机自启动部署
像海康大华一些摄像头或者直播源 为rtsp视频流，想在web上播放必须进行协议转换。已知一些方案例如rtsp转rtmp需要flash，现在浏览器基本不支持flash。还有转hls或者flv这些延迟都比较高。经过实践对比比较理想方案是 经转码后视频流通过websocket传送给客户端在将视频流解码成图片通过canvas渲染出来，延迟比较小基本在1s以内。所用工具(插件)为ffmpeg+node（node-rtsp-stream）+jsmpeg。
2024-01-09 15:06:17
9266
41
原创 express+mongoDB开发入门教程之mongoose使用讲解
本文将讲述Mongoose的入门开发教程，以及通过一些示例演示对mongoDB数据库的增删改查操作。
2024-01-03 16:19:55
2327
2
原创 uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解
企业项目开发流程上一般都要配置多个运行环境（不同的服务器请求地址）。不同环境有不同用途，主要用于区分开发、测试、上线，对应的环境称为开发环境、测试环境、生产环境。实际开发中经常要在不同环境进行联调或者打包，对于uniapp每次都要手动修改服务请求地址很是麻烦，有什么方法能实现按需运行按需打包呢，答案是——自定义条件编译平台HBuildex默认编译平台例如有H5端、小程序端、APP端,像小程序端细分还有微信小程序，钉钉小程序等，不同编译平台我们可以用条件编译来指定特殊代码运行在哪种平台上。
2023-11-24 16:30:52
7743
原创 web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程
本文将讲述如何利用高德地图JS API实现地图标点、聚合点、自定义图标、点击窗体信息展示等基本功能实现，结合实际项目中遇到场景需求进行演示聚合点自定义样式通过设置renderClusterMarker字段配置渲染函数，并在渲染函数中通过dom操作生成样式节点插入聚合点父节点上//聚合点实例renderClusterMarker:renderClusterMarker,//自定义样式渲染});//渲染函数//自定义图标背景//聚合个数。
2023-08-18 21:47:30
7997
11
原创 vue移动端手把手教你封装一个可移动悬浮窗、可移动打开扇形悬浮按钮组件
本文将手把手教你封装一个可移动的悬浮框组件，利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端（H5、小程序、APP）通用的悬浮组件。
2023-06-18 17:49:26
7515
1
原创 uniapp APP端在线升级功能实现讲解——强制或可选升级，下载进度显示
本文主要讲述uniapp APP在线升级功能实现，并用代码演示包括强制升级、可选升级、下载进度显示、下载自动安装等功能，示例代码已经过测试可结合实际开发场景做调整直接引入使用
2023-06-16 15:20:33
20641
80
原创 Three.js 快速入门教程【二十二】动画神器Tween.js使用指南
本文介绍了Tween.js在Three.js中的应用，详细讲解了其安装方法、基本语法与核心API。通过创建动画实例、定义目标属性、设置缓动效果等步骤，可实现平滑过渡的3D动画效果。文章还涵盖了动画控制方法（启动/暂停/停止）和事件回调机制，帮助开发者高效创建相机移动、物体变换等动画效果。
2025-05-26 14:58:54
1052
原创 Three.js 快速入门教程【二十一】CSS3D渲染器（CSS3DRenderer、CSS3DObject 、CSS3DSprite）介绍，实现场景中物体标注标签信息
本文介绍了如何在Three.js中使用CSS3DRenderer渲染3D场景中的标签，并对比了CSS3DRenderer与CSS2DRenderer的区别。CSS3DRenderer通过CSS 3D变换渲染HTML元素，支持完整的3D变换，元素可随相机视角产生透视效果，适合需要HTML元素深度融入3D空间的场景。而CSS2DRenderer仅支持2D变换，元素始终面向屏幕，适合静态标签和信息提示。文章还详细讲解了CSS3DObject的创建与使用，并提供了示例代码，展示了如何在正方体和圆柱体上标注标签。
2025-05-12 15:01:32
1021
原创 Vue3 Echarts 3D立方体柱状图实现教程
在前端开发的数据可视化场景中，ECharts 是一个强大且灵活的工具，它能创建各种复杂而美观的图表。本文将详细阐述如何利用 ECharts实现3D立方体柱状图type: “pictorialBar” 是 ECharts 中的一种特殊柱状图类型，它允许使用自定义图形（如图片、形状）来代替传统的柱状条，为数据可视化增添更多创意和灵活性。type: "pictorialBar"也被叫作象形柱图。它首先是个柱状图，但是柱状图的柱子并不显示。
2025-04-30 16:51:17
1353
原创 Vue3 Echarts 3D圆柱体柱状图实现教程以及封装一个可复用的组件
在前端开发的数据可视化场景中，ECharts 是一个强大且灵活的工具，它能创建各种复杂而美观的图表。本文将详细阐述如何利用 ECharts实现3D圆形柱状图，并封装一个可复用的组件。type: “pictorialBar” 是 ECharts 中的一种特殊柱状图类型，它允许使用自定义图形（如图片、形状）来代替传统的柱状条，为数据可视化增添更多创意和灵活性。type: "pictorialBar"也被叫作象形柱图。它首先是个柱状图，但是柱状图的柱子并不显示。
2025-04-29 16:23:58
1578
5
原创 Three.js 快速入门教程【二十】3D模型加载优化实战：使用gltf-pipeline与Draco对模型进行压缩，提高加载速度和流畅性
在 Three.js 开发中，3D 模型的体积直接影响加载性能与用户体验。gltf/glb 格式虽已是行业标准，但高精度模型仍需进一步压缩。本文将详细介绍基于 gltf-pipeline 工具链结合 Draco 算法的模型压缩方案，涵盖工具使用、实际项目开发中的实践，助你构建高性能 3D 应用。gltf-pipeline 是 Cesium 开发的基于 Node.js 的开源 gltf/glb 模型转换工具。
2025-03-28 15:04:14
1190
1
原创 Three.js 快速入门教程【十九】CSS2DRenderer（CSS2D渲染器）介绍，实现场景中物体或设备标注标签信息
在 Three.js 中构建 3D 场景时，有时我们需要为场景中的设备或对象添加标签标注，以提供更多的信息。本文将讲解如何使用 CSS2DRenderer 在 Three.js 场景中实现设备标签标注CSS2DRenderer 是 Three.js 提供的一个非常有用的工具，它允许我们使用 CSS 和 HTML 来创建 2D 元素，并将它们渲染到 3D 场景中，使其能够跟随场景中的对象移动和旋转，同时保持 2D 界面的灵活性和易操作性。
2025-03-28 15:03:38
1296
原创 Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体
在上一篇文章介绍了射线和射线投射器Raycaster使用，了解了射线拾取的核心原理。要实现鼠标点击选中模型的功能，还缺失关键的一步——如何将鼠标的2D屏幕坐标转换为三维空间坐标，并以此坐标为原点，相机与该坐标连线方向为射线方向检测这条射线与场景中模型是否相交。本教程将介绍该核心步骤实现。通过本教程，你应该已经了解了射线（Ray）、射线拾取模型（Raycaster）、屏幕坐标转标准设备坐标的相关概念和实现方法，以及相关 API 的使用。
2025-03-24 15:03:58
1220
原创 Three.js 快速入门教程【十七】射线拾取模型——射线与射线投射器Raycaster介绍
在 Three.js 开发的 3D 场景中，我们经常会遇到这样的需求，如何通过鼠标控制选中目标模型，这个行为也称为拾取模型。拾取模型是一个非常实用的功能，它允许用户通过鼠标点击或者触摸屏幕来选中场景中的特定模型，为交互性的 3D 应用程序增添了更多可能性。本教程将介绍射线拾取模型的相关概念和实现方法。在 Three.js 中，射线（Ray）是一个表示从一个点出发，沿着特定方向无限延伸的几何对象。
2025-03-24 15:03:27
1085
原创 Three.js 快速入门教程【十六】调试神器 gui.js使用详解，可视化面板控制场景参数提高开发效率
在使用 Three.js 进行 3D 场景开发时，我们常常需要动态调整场景中的各种参数，如物体的位置、旋转角度、材质属性、灯光强度等。手动修改代码再重新运行显然效率低下，这时 GUI.js 库就派上了用场。它能帮助我们快速创建用户界面，方便地控制场景中的参数进行调试。本文将详细介绍如何在 Three.js 项目中使用 GUI.js 库。（1）使用 npm 安装（2）使用 CDN通过本文的介绍，你学会了如何在 Three.js 项目中使用 gui.js 库来创建用户界面，方便地控制场景中的参数。
2025-03-12 15:00:26
1052
原创 Three.js 快速入门教程【十五】交互神器DragControls使用详解，实现对物体或模型拖拽
在 Three.js 中创建 3D 场景时，让用户能够与场景中的物体进行交互是提升用户体验的重要部分。DragControls 是 Three.js 提供的一个非常实用的工具，它允许用户通过鼠标拖动场景中的物体，从而实现更直观的交互。本文将详细介绍如何在 Three.js 项目中使用 DragControls。DragControls 是 Three.js 官方提供的交互辅助类，用于实现物体在三维空间中的拖拽操作。基于 CSS 坐标系的屏幕点击检测通过 Raycaster 进行三维物体拾取。
2025-03-11 15:08:32
1118
原创 Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化
在使用 Three.js 进行 3D 图形开发时，了解场景的渲染性能，特别是渲染帧率（FPS），对于优化和调试应用程序至关重要。Stats.js 是一个轻量级的 JavaScript 库，用于实时监控和显示应用程序的性能指标，其中就包括渲染帧率。在本篇教程中，我们将学习如何在 Three.js 项目中集成 Stats.js 来查看渲染帧率。//为面板添加class=stats.stats {important;top: 20px!important;left:auto!important;
2025-03-06 15:41:31
1178
原创 Three.js 快速入门教程【十三】外部模型加载后常见的处理操作
在使用 Three.js 进行前端 3D 开发时，加载外部模型是一项非常重要的功能。当我们成功加载外部模型后，还需要对其进行一系列的处理，以满足我们的项目需求。本文将详细介绍在 Three.js 中加载外部模型后常见的处理操作递归遍历：自动遍历对象及其所有子对象执行回调：对每个节点执行自定义处理继承特性：所有继承自Object3D的对象都具备该方法// 递归遍历所有模型节点//是否是网格模型//对网格模型进行修改操作.......});
2025-03-06 15:35:56
1097
原创 Three.js 快速入门教程【十二】外部模型加载（ gltf、glb、fbx、obj等格式模型）
在使用 Three.js 进行 3D 场景开发时，加载外部模型是一项非常常见且重要的操作。通过加载外部模型，我们可以快速丰富场景内容，实现更加复杂和逼真的 3D 效果。本教程将详细介绍如何在 Three.js 中加载常见的 3D 模型格式。通过本篇教程，我们了解了加载外部模型的基本流程以及学会不同格式模型文件的加载方法。模型加载是3D可视化开发的基础技能，但也仅仅是起点，还有诸如模型动画、物理效果和着色器改造更多开发技能等着你学习，在实践中掌握技巧，让你的3D场景更具生命力。
2025-02-28 16:59:44
1412
原创 Three.js 快速入门教程【十一】天空盒的多种实现方式
在使用 Three.js 构建 3D 场景时，天空盒是一个非常重要的元素。它可以为场景提供一个广阔的背景，增强场景的真实感和沉浸感。本文将介绍多种方法实现天空盒。方法对比性能表现适用场景立方体贴图（六面）6张宽高一样的图片优静态高清环境等距圆柱投影1张全景图良动态天空、全景图通过以上介绍，我们学会了使用多种方式在 Three.js 中创建一个天空盒。天空盒为 3D 场景增添了真实感和氛围感。在实际应用中，可以根据场景的主题和风格选择合适的纹理图片，进一步优化天空盒的效果。
2025-02-28 14:35:06
1011
原创 Three.js 快速入门教程【十】常见的纹理类型
在 Three.js 中，纹理是为 3D 模型添加细节和真实感的重要元素。通过纹理，我们可以为模型表面赋予各种材质和图案，如木纹、石纹、金属光泽等。本文将介绍 Three.js 中一些常见的纹理类型和使用讲解。通过本文的介绍，我们了解了 Three.js 中一些常见的纹理类型及其使用方法，对纹理在 3D 场景构建中的作用有了较为全面的认识。从基础的 Texture 加载和应用，到 CubeTexture 为场景带来的环境映射效果，每一种纹理都有着独特的功能和应用场景。
2025-02-27 15:43:18
1418
原创 Three.js 快速入门教程【九】光源类型
在3D场景中，光源是赋予物体材质灵魂的关键，它不仅赋予场景真实感，还能引导用户的注意力，营造出独特的氛围。本文将深入探讨 Three.js 中各种类型的光，以及如何运用它们来打造令人惊叹的 3D 场景。在 Three.js 中，光的运用是打造出色 3D 场景的关键因素之一。通过了解和掌握不同类型光的特点和使用方法，以及光与材质的交互原理，我们可以创造出更加真实、生动和富有吸引力的虚拟世界。无论是简单的演示场景还是复杂的游戏环境，合适的光照设置都能为作品增色不少。
2025-02-24 16:13:04
1180
原创 Three.js 快速入门教程【八】常见材质类型
在 Three.js 的三维世界里，材质（Material）就像是给物体穿上的 “衣服”，它决定了物体如何与光线交互，以及最终呈现出的视觉效果。对于前端开发者来说，掌握材质的使用是构建逼真且富有表现力的 3D 场景的关键。本文将带你深入了解 Three.js 中常见的材质类型及其应用。通过本文的介绍，我们对 Three.js 中的材质有了更深入的了解。
2025-02-24 16:04:20
1066
原创 Three.js 快速入门教程【七】常见几何体类型
在Three.js的三维世界中，几何体（Geometry）是构建所有可视对象的基础骨架。它定义了物体的形状和结构，如同建筑中的钢筋混凝土框架，理解几何体是掌握Three.js开发的关键一步。本文将带你快速了解 Three.js 中常见的几何体类型及其基本使用方法。通过以上对 Three.js 常见几何体类型和相关属性设置的介绍，相信你已经对如何创建和操作几何体有了基本的了解。在实际应用中，你可以根据具体需求选择合适的几何体类型，并灵活设置其属性，以构建出丰富多样的 3D 场景。
2025-02-21 15:37:23
1395
原创 Three.js 快速入门教程【六】相机控件 OrbitControls
在3D可视化开发中，用户交互体验直接影响项目的成败。OrbitControls 是 Three.js 库中一个非常实用的相机控制辅助工具，它能极大地增强用户与 3D 场景的交互性，让用户可以像在现实世界中观察物体一样对场景进行操作，从而更好地观察 3D 场景。
2025-02-21 15:36:40
1646
原创 Three.js 快速入门教程【五】动画渲染循环
在使用 Three.js 进行 3D 场景开发时，实现流畅的动画效果是至关重要的。而动画渲染循环则是实现动画的核心机制之一，其中 requestAnimationFrame 函数扮演着关键角色。如果你有看过该系列教程之前的文章对动画渲染循环一定不会陌生，经常出现在示例代码里面。本文将详细介绍 Three.js 中的动画渲染循环，并深入讲解 requestAnimationFrame 的工作原理和使用方法。
2025-02-20 15:35:59
1314
uniapp vue3 自定义下拉刷新组件pullRefresh，带释放刷新状态、更新时间、加载动画
2024-11-26
uniapp vue3 下拉菜单组件（dropdownMenu）
2024-11-23
web端播放rtsp/rtmp视频流demo
2024-04-02
微信小程序隐私协议引入组件demo
2023-09-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人