自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

热爱编码,享受创造

热爱编码,享受创造 在这里记录学习笔记、分享开发经验、探索技术边界 常驻技术栈:Vue3 • React • TypeScript • Node.js 近期探索:AI + 前端 • 微前端 • 低代码 简单写代码,认真做技术

  • 博客(41)
  • 收藏
  • 关注

原创 使用 uni-app 开发小程序

uni-app 是一款跨平台开发框架,支持一套代码发布到iOS、Android、Web及各大小程序平台,显著提升开发效率。其开发流程主要包括:环境搭建(基于HBuilderX)、项目结构理解(如pages.json配置)、页面开发(使用Vue语法和Flex布局)、功能实现(路由导航/网络请求)、以及多端调试发布。核心知识点涵盖Vue.js语法、uni-app组件(如scroll-view/swiper)、API调用(如uni.request)和真机调试技巧。

2025-11-17 09:23:08 481

原创 vue3开发使用框架推荐

Vue 3 生态已形成成熟的工具链体系:Vite 作为官方构建工具,Pinia 为状态管理标准,Vue Router 4 提供路由方案。UI 组件库推荐 Element Plus(企业级)、Naive UI(TS友好)和 Quasar(跨平台)。全栈开发首选 Nuxt.js 3(SSR/SSG),管理系统可基于 Vue-Vben-Admin 等模板开发。实用工具库 VueUse 提供 200+ 组合式 API 函数。选型建议:后台系统用 Vite+Pinia+Element;内容网站选 Nuxt;

2025-11-14 16:08:25 627

原创 GIS前端开发详解

本文全面解析了GIS前端开发的核心技术与实践方法。主要内容包括:1)主流地图引擎(如Leaflet、OpenLayers、Mapbox等)的技术特点与适用场景对比;2)GIS开发核心概念如坐标系系统(WGS84、WebMercator等)和地图瓦片原理;3)实战开发指南,展示了Leaflet基础应用和Vue3+OpenLayers集成方案的代码示例。文章提供了完整的开发框架和技术路线图,适合GIS开发初学者快速掌握关键技术和开发流程。

2025-11-14 15:14:52 604

原创 在 UniApp 中为小程序实现视频播放记录功能

UniApp 视频播放记录功能实现有两种方式:使用现成插件或原生开发。插件方式(如hao-playVideo)集成快捷但定制受限,需要设置historyTime属性并监听暂停事件保存进度。原生开发通过video组件和createVideoContext API实现,需注意timeupdate事件频率过高问题,建议在暂停时保存进度,并延迟执行seek确保跳转精准。关键点包括:区分多视频存储、平台兼容性测试、定时保存优化及播放完成清理策略。两种方式均需使用uni.setStorageSync进行本地存储。

2025-11-14 10:17:33 1223

原创 在Vue 3项目中配置和使用SCSS

本文详细介绍了在Vue 3项目中配置和使用SCSS的方法。首先通过npm或yarn安装sass和sass-loader依赖,并在vue.config.js中配置全局SCSS变量。然后展示如何在Vue组件中使用SCSS语法,包括嵌套规则和父选择器。接着讲解如何管理全局样式和变量,推荐使用_variables.scss和_mixins.scss组织代码。此外还介绍了SCSS模块化方案和深度选择器的应用场景。最后提供了版本兼容性、路径别名等常见问题的解决方案及优化建议。全文涵盖了从基础配置到高级应用的全流程指南。

2025-11-14 09:28:09 601

原创 UniApp 小程序中使用地图组件

UniApp小程序地图组件使用指南:通过<map>组件实现地图展示(需使用GCJ-02坐标系),配合uni.getLocation()获取用户位置(需指定type:'gcj02')。支持标记点、多边形绘制等功能,各平台底层引擎不同(App端为高德,微信为腾讯地图)。注意权限配置、组件层级及性能优化,避免在scroll-view中使用地图组件。使用uni.openLocation()可打开手机地图应用进行导航。开发时需特别注意坐标系一致性和平台差异处理。

2025-11-13 10:18:43 659

原创 Vue 3中集成GIS(地理信息系统)

Vue3集成GIS方案解析:对比主流地图库并提供实战指南。介绍了Cesium、Mars3D等5种常用GIS库的特点和适用场景,重点演示了Leaflet、Cesium和Mars3D在Vue3中的集成步骤。包含代码示例、注意事项及优化建议,如按需引入和地图Token配置,帮助开发者快速实现地图功能集成。

2025-11-13 10:13:42 715

原创 Vue 3中使用JSX

在Vue 3中配置JSX有两种主要方式:通过Babel或Vite插件。Babel插件(@vue/babel-plugin-jsx)适用于已有Babel配置的项目,配置灵活;Vite插件(@vitejs/plugin-vue-jsx)与Vite深度集成,配置简单。JSX提供了更高灵活性,支持条件渲染、列表渲染和事件处理等,但相比模板语法优化较少。建议根据项目需求选择,复杂逻辑用JSX,常规UI用模板语法。配置时需注意文件扩展名和TypeScript支持。

2025-11-12 11:46:36 824

原创 uniApp使用二维码

UniApp二维码功能实现指南 本文介绍在UniApp中集成二维码功能的两种主要场景:扫描识别和生成。扫描功能可通过官方API uni.scanCode 快速实现,或使用第三方插件 u-zm-scan 支持持续扫码等高级功能。生成二维码推荐 zx-qrcode(适配微信小程序)或 lime-qrcodegen(支持Logo和高级定制)。文章提供了核心代码示例,并强调平台兼容性、权限配置、纠错级别等注意事项,适用于App、小程序及鸿蒙平台开发。

2025-11-12 11:42:25 649

原创 子组件内直接使用 `onReachBottom` 不生效

摘要:Vue2子组件中onReachBottom不生效的原因是它是页面级钩子。解决方案:父组件通过onReachBottom监听触底事件,传递reachBottom属性给子组件;子组件通过watch监听属性变化执行加载,完成后用$emit通知父组件重置状态。需注意页面滚动条件和uni-app可能的兼容性问题,如内容高度不足或局部滚动干扰。核心思路是利用父子通信间接实现触底监听功能。

2025-10-30 11:27:22 358

原创 微信小程序中使用 Vant Weapp 组件库

摘要:本文详细介绍了在微信小程序中引入Vant Weapp组件库的完整流程,包括项目初始化、npm安装、构建配置及组件使用。重点解析了安装后构建npm、移除app.json的v2样式、组件路径规范等关键步骤,特别说明Toast/Dialog等函数式组件的特殊用法。同时提供了组件未找到、样式混乱等常见问题的排查方法,帮助开发者快速上手这一高效的小程序UI组件库。

2025-10-20 15:05:42 483

原创 UniApp开发时数据保存详情

UniApp本地存储方案指南:uni.storage提供跨端键值存储(5-10MB限制),适用于简单数据;文件存储(plus.io)适合App端大文件;SQLite数据库用于App端结构化数据。建议优先使用uni.storage的异步API,大文件用文件存储,复杂数据用SQLite。注意H5端基于localStorage可能被清理,App端可使用状态持久化插件优化性能。

2025-10-20 11:00:27 1182

原创 uniApp 使用uni.login时报用户解析失败详解

UniApp微信小程序登录报"用户解析失败"问题排查指南 核心问题:uni.login报错通常由用户信息获取方式错误、登录流程顺序不当或前后端数据协同问题导致。

2025-10-17 15:44:16 1188

原创 Vue3 响应式系统详解

Vue3响应式系统深度解析:从Proxy原理到API实践 本文系统介绍了Vue3响应式系统的核心机制和API使用方法。Vue3采用Proxy重构响应式系统,相比Vue2的Object.defineProperty具有全面拦截、性能更优等优势。文章详细解析了reactive、ref、toRefs等核心API的使用场景和区别,并提供了响应式工具函数的使用指南。最后通过简化代码示例深入剖析了Vue3依赖收集和触发更新的核心原理,帮助开发者理解响应式系统的工作机制。

2025-10-17 10:54:55 619

原创 前端 JavaScript 面试题大全(含答案及解析)

本文总结了JavaScript前端面试中的核心知识点,主要包括变量作用域、数据类型、异步编程等常见问题。重点解析了var/let/const的区别、闭包应用、类型转换规则、Promise使用及事件循环机制等高频考点。每个问题都配有代码示例和详细解析,涵盖了变量提升、块级作用域、严格相等比较、Promise链式调用、async/await错误处理等关键概念。这些内容既能帮助面试准备,也能加深对JavaScript核心机制的理解,特别适合前端开发者系统复习基础知识。

2025-10-16 14:15:41 1182

原创 uniApp开发微信小程序 微信授权问题详解

本文详细介绍了UniApp开发微信小程序时的授权处理要点。首先解析了授权机制,包括用户登录流程和特定权限申请方式,强调敏感信息获取必须由用户主动触发。其次列出了常见授权问题排查方法,如授权窗口意外弹出、请求失败的原因及处理方案。最后提出了最佳实践建议:确保用户主动触发、按需申请权限、保证服务器端安全处理、封装权限检查逻辑。全文为开发者提供了系统性的授权问题解决方案。

2025-10-16 10:30:51 603

原创 vue3前端面试题(附答案及解析最新版)

本文系统梳理了Vue 3的核心面试考点,包含五大模块:核心概念与新特性、Composition API、组件开发、路由与状态管理、性能优化。重点包括:Proxy响应式原理、Composition API的优势、ref/reactive区别、组件通信方式、Pinia特性、编译优化等。文章对比了Vue 3与Vue 2的主要改进,如性能提升、TypeScript支持等,并详细解析了15个关键面试问题,涵盖原理、使用场景和最佳实践。最后给出了面试建议,强调理解原理和实战经验的重要性。

2025-10-15 15:33:36 1015

原创 Vue3 常见问题解决方案:模板编译、组件渲染与依赖冲突

本文总结了Vue3开发中常见的三大类问题及解决方案:1)模板编译错误,包括组件命名、v-for指令和属性绑定语法问题;2)组件渲染问题,重点解决响应式数据丢失和数组更新;3)生命周期和异步数据处理的最佳实践。针对每类问题,文章提供了错误示例和正确解决方案,特别强调了响应式系统的正确使用方式、模板类型检查以及异步状态的完整处理流程。这些解决方案能有效帮助开发者避免常见陷阱,提升Vue3应用的稳定性和开发效率。

2025-10-15 09:17:30 471

原创 UniApp 项目打包发布到 H5、微信小程序、支付宝小程序和抖音小程序

UniApp多平台发布指南:轻松打包H5、微信、支付宝、抖音小程序。核心步骤包括配置AppID、HBuilderX发行、使用对应开发者工具上传。H5需注意路由模式和服务器配置,小程序需依赖各平台开发者工具。实用技巧:使用条件编译处理平台差异、检查第三方库兼容性、活用转换工具迁移项目。掌握这些方法,即可实现一次开发多端发布,提升开发效率。

2025-10-14 14:02:24 898

原创 Vue3 + Vite 使用详解:从入门到实战优化

本文详细介绍了Vite与Vue3的集成使用,从基础配置到高级优化。主要内容包括:1)Vite作为新型构建工具的优势,相比传统工具提供更快的启动和热更新;2)通过命令行创建项目并解析目录结构;3)Vite核心配置详解,包括服务器设置、环境变量管理和构建优化;4)开发环境优化技巧,如依赖预构建和HMR热更新。文章特别强调了性能优化策略,如代码分割、CDN引入第三方库等,帮助开发者打造高效的Vue3开发工作流。

2025-10-14 11:35:04 1207

原创 VSCode 常用插件全面详解

VSCode 插件配置指南摘要: 本文详细介绍了VSCode中前端开发必备插件的配置与使用,重点涵盖Vue 3和TypeScript开发工具。主要内容包括: Vue 3开发核心插件Volar的配置与模板类型检查、组件Props提示等高级功能 Vue代码片段插件的使用技巧与自定义代码片段配置 TypeScript开发增强工具,包括自动导入管理和行内错误提示 代码质量工具如ESLint的详细配置方法 文章提供了大量实用配置代码示例,帮助开发者优化VSCode开发环境,提升Vue和TypeScript项目的开发效

2025-10-13 15:03:09 723

原创 Vue 3 开发中 TypeScript 类型错误详解

摘要:本文系统介绍了 Vue 3 开发中常见的 TypeScript 类型错误及解决方案,涵盖以下关键场景:1) 组件 Props 类型定义错误(推荐使用泛型或 withDefaults);2) Ref 和 Reactive 类型错误(需明确指定泛型类型);3) 模板引用类型错误(DOM 元素需指定具体类型,组件实例可用 InstanceType);4) 事件处理类型定义。针对每个问题提供了具体错误示例和多种正确解决方案,强调使用类型断言、可选链和 defineExpose 等技术确保类型安全。

2025-10-13 09:52:49 1029

原创 Vue 3 生命周期钩子全面详解

Vue 3 生命周期钩子全面解析:本文详细介绍了 Vue 3 的生命周期系统,对比了 Options API 和 Composition API 的不同实现方式。Composition API 提供了 onBeforeMount、onMounted、onBeforeUpdate 等钩子函数,替代了传统 Options API 中的 beforeCreate、created 等方法。文章通过代码示例展示了各生命周期钩子的执行时机和典型应用场景,包括 DOM 操作、数据获取、错误处理和清理工作。

2025-10-11 13:52:12 629

原创 Vue 3 中 `this.$refs` 报错的解决方案

Vue3 中 $refs 的正确使用方式 核心变化 Vue3 移除了直接通过 this.$refs 访问的方式 推荐使用 Composition API 的 ref() 函数 两种解决方案 Composition API(推荐)

2025-10-11 10:07:47 435

原创 考研准备全流程

如果你有潜在感兴趣的专业方向,或者对某个具体环节有疑问,我们可以继续深入探讨。祝你大学生活充实而精彩!把这四点做好,你就已经为三年后的那场考试做好了最充分、也最有效的准备。打好地基,保持高GPA,探索未来方向。确定考研大方向,积累硬核履历。系统复习,成功上岸。

2025-10-10 09:25:38 608

原创 四六级备考四阶段全流程

这个流程为你提供了清晰的路径,让你从大一就开始的努力更有方向。坚持下去,你不仅能轻松通过四六级,更能拥有实实在在的英语能力。希望这个详细的学习流程能帮你理清思路,祝你备考顺利,一举过关!如果你在具体执行中遇到任何困难,随时可以再来问我。提升真实英语能力,而非仅仅应试。这是你超越其他考前突击同学的关键。熟悉考试技巧,强化真题训练,一举高分通过。你可以根据这个模板,安排自己的学习时间。

2025-10-09 16:51:41 775

原创 大学英语四六级备考指南

备考大学英语四六级,选对资料和方法能让你的复习事半功倍。我为你整合了一份实用的备考指南,涵盖了主流备考资料和高效的复习策略,希望能帮助你顺利通过考试。下面这个表格整理了目前市面上口碑较好、使用广泛的备考资源,你可以根据自己的需求进行选择。

2025-10-09 16:40:49 809

原创 Uniapp 微信小程序常用组件全面详解

本文详解了Uniapp微信小程序开发中的常用组件,重点介绍了基础布局组件的使用。View组件作为最基础的布局容器,支持hover效果、网格布局等多种样式配置;Scroll-View组件实现滚动视图功能,支持垂直/水平滚动、滚动监听和位置控制。文章通过代码示例展示了这些组件的实际应用场景和配置方法,包括样式定义、事件处理和交互控制等核心功能,为Uniapp微信小程序开发提供了实用的组件参考方案。

2025-10-09 09:27:41 572

原创 Uniapp 微信小程序使用 Vant Weapp 完整指南

Uniapp 集成 Vant Weapp 微信小程序组件库指南 本指南详细介绍了如何在 Uniapp 项目中集成和使用 Vant Weapp 组件库: 环境配置 - 通过 npm 安装 Vant Weapp 并进行微信开发者工具和 Uniapp 项目配置 组件引入 - 提供全局引入、页面级引入和使用 easycom 三种方式 基础使用 - 以按钮组件为例展示基础用法和不同状态配置 表单实战 - 演示表单组件的综合应用,包括输入验证和选择器 Vant Weapp 提供了丰富的 UI 组件

2025-09-30 09:16:35 1142

原创 Vue 3 响应式数据全面详解:ref、reactive 与响应式原理

Vue 3 响应式系统详解:本文全面介绍了 Vue 3 的核心响应式特性,对比了 Vue 2 与 Vue 3 响应式实现的差异,重点讲解了 ref 和 reactive 的使用方法。ref 适用于基本类型数据,通过 .value 访问,而 reactive 专为对象设计,提供深层响应式支持。文章包含丰富代码示例,展示响应式数据的声明、更新和类型定义(TypeScript),并强调 Vue 3 基于 Proxy 的实现带来的性能优势,如自动支持数组操作、新属性添加等特性。

2025-09-29 10:21:16 520

原创 Uniapp 开发小程序手机适配全面指南:打造多端兼容的完美应用

主要挑战包括不同设备的屏幕尺寸、状态栏高度、安全区域、CSS 兼容性和 API 差异。文章提供了获取设备信息的实用工具函数,并详细讲解了 rpx 响应式单位的应用场景和换算规则。通过示例代码展示了弹性布局的实现方式,包括顶部导航栏、滚动内容区和底部安全区域的处理。特别针对全面屏设备,给出了安全区域适配方案,确保内容不会被异形屏遮挡。核心建议包括:使用 rpx 实现响应式布局、获取设备信息动态计算尺寸、正确处理安全区域以及采用弹性布局保证多端兼容性。

2025-09-29 09:51:53 594

原创 Vue 3 Pinia 状态管理全面详解:下一代 Vue 状态管理

本文全面介绍Vue.js下一代状态管理库Pinia。Pinia由Vue核心团队维护,相比Vuex具有更简洁API、更优TypeScript支持和更小体积(仅1KB)。文章详细对比了Pinia与Vuex4的特性差异,并提供了完整的安装配置指南。重点讲解了两种创建Store的方式:类似Vuex的Option风格和推荐的Composition风格,包含状态定义、计算属性和操作方法实现。通过计数器示例展示了在组件中使用Store的完整流程,包括状态访问、方法调用、异步操作处理和状态监听。

2025-09-28 15:47:09 931

原创 Vue 3 组件传值全面详解:8 种方式应对各种场景

本文全面介绍了 Vue 3 中组件通信的 8 种主要方式,涵盖父子、兄弟、祖孙及无关组件间的数据传递。重点讲解了 Props/Emits 和 v-model 两种基础方式:Props 用于父向子传递数据,支持类型验证和默认值;Emits 实现子向父通信;v-model 提供双向绑定功能,Vue 3 支持多个 v-model 绑定。文章还演示了 TypeScript 下的高级用法,包括接口定义、类型检查和响应式处理。这些方法为不同场景下的组件通信提供了灵活解决方案。

2025-09-28 09:52:31 857

原创 Vue 3 开发小程序常见问题大全

主要内容包括:1) 环境配置与项目初始化问题,如版本兼容性和编译器配置;2) Composition API 使用中的生命周期钩子混用问题及其时序控制;3) Vue 3 响应式系统的正确使用方法;4) <script setup> 语法糖在组件通信与暴露中的注意事项。针对每个问题提供了具体的代码示例和解决方案,帮助开发者避免常见陷阱,提高开发效率。

2025-09-27 20:37:35 1093

原创 Uniapp 开发微信小程序常见问题大全:从入门到上线避坑指南

主要内容包括: 环境配置问题:项目初始化报错、开发者工具无法自动打开等问题,建议检查Node版本、重装依赖、正确配置路径。 样式问题:样式不生效或rpx单位异常,需要注意小程序样式限制,使用支持的选择器,正确理解rpx单位特性。 功能问题:网络请求、图片显示、数据缓存等常见API使用问题,提供了封装请求方法、图片路径处理和安全缓存工具类的实现方案。 文章通过具体代码示例,详细说明了各类问题的原因分析和解决方法,帮助开发者快速定位和解决开发过程中的常见问题。

2025-09-26 11:13:10 1042

原创 Uniapp 输入框错位问题全面解决方案:告别光标漂移和页面跳动

Uniapp 输入框错位问题解决方案 核心问题 Uniapp 开发中常见输入框错位问题,包括光标漂移、页面跳动和键盘遮挡等现象,主要源于 Uniapp 渲染机制和平台差异。

2025-09-26 09:06:37 988

原创 Uniapp H5 端微信支付接入全攻略:从原理到实战

本文详细讲解Uniapp H5端接入微信支付的完整流程。关键点包括:1) 仅支持微信浏览器环境,需依赖JS-SDK;2) 必须配置支付授权目录和域名;3) 后端需调用微信统一下单API生成支付参数;4) 前端通过uni.requestPayment或JS-SDK调起支付。文章提供了Node.js后端代码示例和Uniapp前端实现方案,强调支付签名生成、参数校验等关键环节,并指出常见配置错误。支付流程涉及商户平台配置、服务端交互、前端调起三个核心环节,需严格遵循微信支付规范。

2025-09-25 17:28:08 1298 1

原创 Uniapp 与微信小程序原生能力融合指南:打破跨端框架的界限

条件编译机制:通过#ifdef MP-WEIXIN等指令实现平台差异化代码,确保功能精准适配微信小程序环境。 原生API调用:直接使用wx对象访问未封装的微信API,并通过Promise封装实现优雅的跨端兼容方案。 原生组件使用:在模板中直接嵌入微信特有组件(如open-data、ad等),同时处理原生组件的层级问题。 WXS脚本集成:利用.wxs文件处理复杂模板逻辑,提升性能并实现微信特有的功能增强。

2025-09-25 09:22:37 820

原创 Uniapp 常用 API 详解与实战指南

Uniapp 核心 API 实战指南 本文系统介绍了 Uniapp 开发中最常用的 API 及其使用技巧: 基础调用规范 支持 Promise 和 Callback 两种风格,推荐使用 async/await 处理异步操作 核心 API 分类 网络请求:uni.request 及封装技巧 数据存储:setStorage/getStorage 同步异步操作 界面交互:showToast/showModal 等反馈组件 其他设备、媒体、位置服务等 API

2025-09-25 08:42:07 928

原创 Uniapp 微信小程序路由跳转详解:从基础到高级实践

四大跳转API:uni.navigateTo:保留当前页跳转(最多10层)uni.redirectTo:关闭当前页跳转uni.reLaunch:关闭所有页跳转uni.switchTab:仅限跳转tabBar页面

2025-09-24 16:30:12 1437

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除