- 博客(152)
- 资源 (11)
- 收藏
- 关注
RSS订阅
原创 Vue3 从零搭建项目及插件的使用
node：v14.16.1vue：@vue/cli 4.5.121、项目初始化1.1、项目前期需求//使用Vue3，需要升级vue-cli，全局安装最先版本@vue/cli；npm install -g @vue/cli@next// 安装成功后输入,显示，安装成功 vue -V //@vue/cli 4.5.12 1.2、安装成功后搭建Vue3项目vue create myproject1.3、 启动服务cd myproject //进入文件npm run serv
2022-01-20 09:35:36
1187
原创 UniApp 实现 H5 + 小程序 跨端图片上传（含压缩、Base64/Blob 处理）
本文分享了UniApp中兼容H5和小程序的图片上传方案。针对H5和小程序的环境差异，采用条件编译实现分端处理：H5端通过Canvas压缩图片，将Base64转Blob后使用Fetch上传；小程序端直接调用uni.uploadFile原生API。方案包含图片压缩（尺寸和质量）、Base64转Blob、统一错误处理等核心功能，解决了跨端兼容性问题。同时提供了避坑指南，如H5跨域设置、Token传递方式等注意事项，最终实现了一套功能完善、用户体验良好的跨端图片上传方案。
2026-03-12 11:21:57
350
原创 UniApp 全端兼容 OSS 视频上传实现方案
本文介绍了UniApp中实现全端兼容的视频上传阿里云OSS方案。通过使用uni.chooseVideo选择视频，配合OSS插件实现直传功能，包含视频预览、上传状态管理等功能。方案适配微信小程序、App和H5平台，并详细说明了各平台的注意事项：小程序需配置域名白名单，App需配置权限，H5需处理跨域问题。核心代码提供了视频选择、上传、删除等完整实现，可直接集成到项目中，有效降低服务器压力，提升上传效率。
2026-01-30 10:51:20
748
原创 UniApp/Vue2 通用工具函数库（完整版）：覆盖校验、格式、业务全场景
在 UniApp/Vue2 开发中，重复编写基础工具函数是低效且易出错的行为。本文整理了一套「一站式通用工具库」，涵盖数据校验、格式转换、通用工具、UniApp 业务辅助四大核心模块，所有函数均经过实战验证，可直接复制到项目中使用，大幅提升开发效率。
2026-01-23 16:20:04
349
原创 【UniApp 实战】封装高性能本地缓存工具类：支持过期自动清理、数据类型自动转换
该工具类基于 UniApp 原生存储封装，解决了 “无过期机制、仅支持字符串” 的核心痛点；通过main.js全局挂载后，项目中可直接用uni.$cache调用所有方法，大幅简化代码；适配多端场景，兼顾易用性和健壮性，是 UniApp 本地缓存的通用解决方案。无论是小程序还是 APP 开发，这套全局缓存工具类都能显著提升开发效率，减少重复代码，同时保证缓存数据的有效性和安全性。
2026-01-23 15:41:04
874
原创 UniApp 路由配置实战：从全局守卫到 404 页面优雅处理
本文介绍了UniApp中使用uni-simple-router实现跨端路由配置的方案。核心内容包括：1）创建路由实例时处理多端差异和404兜底；2）通过全局路由守卫实现权限控制和页面拦截；3）错误捕获机制处理路由跳转异常。特别展示了404页面的友好交互设计，以及H5端手动挂载路由的特殊处理。该方案解决了UniApp开发中的路由适配、权限管理和异常处理三大关键问题，为跨端应用提供了稳定可靠的路由体系。
2025-12-19 15:17:30
392
原创 Vue 实现阿里云 OSS 视频分片上传：安全实战与完整方案
本文介绍了基于Vue和阿里云OSS实现安全视频分片上传的完整方案。核心技术采用Vue 2.x框架结合OSS分片上传(multipartUpload)功能，通过STS临时授权确保安全性，避免密钥泄露风险。方案优势包括：支持大文件上传(GB级)、断点续传、进度可视化显示和自动生成唯一文件名。核心代码展示了从获取临时凭证、初始化OSS客户端到分片上传的完整流程，包含100KB分片大小设置、上传进度监控及错误处理机制。该方案已在实际项目中验证，所有敏感信息均经过加密处理，可直接参考落地实施。
2025-11-18 15:46:26
386
原创 实现一个优雅的城市选择器组件 - Uniapp实战
【Uniapp城市选择器组件实现】 本文介绍了一个基于Uniapp的功能完善的城市选择器组件，包含以下核心功能： 按字母分组显示城市列表 右侧字母索引快速导航 城市搜索功能 平滑滚动和触摸交互反馈 组件采用uni-popup实现底部弹窗，包含搜索框、城市列表和字母索引三部分。核心代码展示了数据处理、搜索过滤和触摸交互的实现逻辑，通过scroll-view的scroll-into-view特性实现字母跳转功能。该组件具有良好的用户体验，支持点击选择、搜索筛选和字母索引三种交互方式。
2025-09-10 14:03:39
480
原创 Uniapp 图片前端上传功能实现与详解
UniApp跨平台开发框架提供了一套完整的图片上传解决方案。本文介绍了核心代码结构，包括图片选择配置、上传流程优化和错误处理机制。关键点包括限制单次选择、添加时间戳确保唯一文件名、完善的异常捕获和用户取消操作处理。文章还提出了性能优化方向（大图压缩、多图队列）和扩展功能建议（预览、裁剪、重试）。这套方案代码清晰、错误处理完善，可直接集成到各类UniApp项目中。
2025-09-01 11:56:23
390
原创 UniApp 分页效果实战：触底加载 + 状态管理（通用模板 + 多场景适配
本文提供了一套UniApp通用分页模板，适用于博客、地址、商品等多场景列表开发。核心功能包括：触底自动加载（onReachBottom）、分页参数管理（pageNum/pageSize）、三种加载状态提示（加载中/完成/失败）以及数据拼接处理。模板采用Flex布局适配多端，包含完整代码示例及样式实现，支持直接复制复用。关键点在于分页逻辑控制、滚动加载触发和加载状态管理，开发者可根据实际需求扩展数据处理逻辑。
2025-08-27 13:50:45
146
原创 Vue中实现纯粘贴上传图片功能
本文介绍了如何在Vue项目中实现纯粘贴上传图片功能，替代传统的文件选择上传方式。通过监听粘贴事件获取剪贴板中的图片数据，直接上传至服务器，为用户提供更加便捷的上传体验。
2025-08-04 11:04:51
736
原创 UniApp H5 适配 PC 端新姿势：打造跨设备一致体验
本文介绍了一种UniApp H5应用适配PC端显示的解决方案。通过在app.vue中添加设备判断逻辑，当检测到PC端访问时自动跳转至专门设计的pc.html页面。该页面使用iframe模拟手机显示效果，并随窗口大小变化自动调整。方案核心在于：1)通过设备识别实现自动跳转；2)利用iframe保持移动端布局；3)响应式设计适应不同屏幕。这种方法既保持了开发效率，又提升了PC端用户体验，特别适合以移动用户为主的应用场景。注意需根据实际项目调整文件路径和样式细节。
2025-07-23 11:15:33
1409
原创 UniApp 多端人脸认证图片上传实现
UniApp跨端人脸认证实现方案 本文介绍UniApp实现多端（H5/小程序/App）人脸认证的统一方案。通过条件编译区分H5与非H5平台：H5端需canvas压缩图片并转Blob后使用fetch上传；非H5端直接调用uni.uploadFile上传本地文件。核心流程包括调用前置摄像头拍摄、图片处理、上传认证三个步骤，并处理了不同平台的API差异。代码提供完整的错误处理和加载状态管理，确保用户体验一致性。开发者只需配置后端接口地址和token即可快速集成。
2025-07-16 13:39:55
509
原创 UniApp 页面布局自定义头部导航
在移动端应用开发中，页面布局的精准适配是一个关键问题。尤其是在 UniApp 中，不同设备的屏幕尺寸、状态栏高度以及头部布局的差异，可能导致页面内容错位或显示不全。本文将分享如何通过动态计算头部高度，实现页面内容的精准定位，确保在不同设备上都能正确显示。
2025-04-09 10:47:50
997
原创 在Uniapp中使用阿里云OSS插件实现文件上传
本文介绍了如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。通过引入阿里云OSS插件，配置初始化参数，并结合uni.chooseVideo选择或拍摄视频文件，最终将文件上传至阿里云OSS。文章详细讲解了插件的初始化、文件上传的实现步骤，以及如何监听上传状态。通过本文，开发者可以快速掌握在Uniapp小程序中集成阿里云OSS的方法，轻松实现高效的文件上传功能。
2025-02-10 11:37:31
1849
原创 阿里OSS前端分片上传实现
阿里OSS前端分片上传实现,在现代Web开发中，文件上传是一个常见的需求，尤其是在处理大文件时，分片上传可以显著提高上传效率和用户体验。通过以上步骤，你可以实现一个高效的前端分片上传功能，适用于处理大文件上传场景。阿里云OSS提供了强大的存储和传输能力，结合前端技术，可以为用户提供更好的使用体验。分片上传大文件：使用multipartUpload方法进行分片上传，并在上传过程中处理进度条。直接上传小文件：如果文件小于100KB，直接使用put方法上传。初始化OSS客户端：使用获取到的凭证初始化OSS客户端。
2025-01-22 10:34:56
768
原创 使用 Element-UI 中的 el-button 添加防抖指令防止重复提交
在现代Web开发中，防止用户在短时间内多次点击提交按钮是一个常见的需求。本文将介绍如何在Vue.js项目中使用自定义指令来实现按钮的防抖功能，防止用户在短时间内多次点击提交按钮。在使用Element-UI的el-button组件时，如果用户在短时间内多次点击提交按钮，可能会导致表单数据被多次提交。为了避免这种情况，我们需要在按钮上添加防抖功能，即在用户点击按钮后的一段时间内禁用按钮，防止重复点击。接下来，在需要添加防抖功能的按钮上使用v-no-more-click指令。
2025-01-20 14:58:30
1720
原创 创意实现！在uni-app小程序商品详情页轮播中嵌入视频播放功能
通过uni-app框架实现商城小程序商品详情页的视频与图片轮播功能，以提升用户体验和增加商品吸引力。通过展示商品视频和图片，用户可以更全面地了解商品细节，从而提高购买决策的便利性和满意度。这种功能适用于各类商品，如服装、家具、电子产品等。通过本文的步骤，您将学会如何在商城小程序中利用uni-app框架实现商品详情页的视频与图片轮播功能
2024-09-25 11:10:26
1714
原创 从秒到年：打造与过去日期相关的智能显示
在前端开发中，经常需要处理过去的日期，并将其转换为易读的形式，比如"刚刚"、"几分钟前"、"几小时前"等。本文介绍了一种自定义的JavaScript方法，可以帮助开发者轻松地格式化过去日期。通过该方法，你可以根据时间差的范围返回不同的字符串表示，同时还可以选择不同的格式类型，如"YYYY-MM-DD"、"YYYY年MM月DD日"等。
2024-03-07 15:16:25
448
原创 【Vue实用功能】elementUI 自定义表单模板组件
elementUI 实现一个自定义的表单模板组件【Vue实用功能】elementUI 自定义表单模板组件背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单直接上代码：
2022-12-20 17:12:53
4881
原创 uni-app app分享到朋友和朋友圈
可以分享文字、图片、图文、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。uni-app的App引擎封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。
2022-12-19 17:33:16
3315
2
原创 【Vue功能】weixin-js-sdk实现vue分享功能
h5链接分享到微信好友、朋友圈的链接卡片内容可以自定义安装微信sdk使用新建文件：plugins/wechat.js页面使用注意：使用微信自定义分享功能的时候，当分享链接中存在中文的时候，要进行encodeURIComponent()，原因：在安卓手机上能成功自定义分享，ios手机上则不能成功分享，安卓手机会自动encodeURIComponent，而IOS不会。
2022-12-07 19:30:00
975
原创 【uni-app】uni-app获取当前环境信息
使用uniapp 的 壳嵌套vue开发的网页端项目链接，在该Vue项目中获取当前环境是否为APP或者微信小程序，对不同环境下做专属的操作。HTML 在不同的环境下，可能需要执行不同的操作或传递不同的消息。在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK。2、使用Vuex，为其他页面使用时准备：store/index.js。1、在public/index.html中引入JS-SDK。3、在APP.vue中使用。运行到小程序看看效果。
2022-11-12 13:05:09
3356
原创 【Vue3】手把手教你创建前端项目 Vue3 + Ts + vite + pinia
手把手教你创建前端项目 Vue3 + Ts + vite + pinia
2022-11-03 15:46:30
3668
1
原创 【typescript】Typescript tsconfig.json全解析
tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要，如果有些选项你没配置，则需要严格按照TypeScript的规则来书写，书写出不符合规则的代码，会导致编译报错。我们早期可以关闭一些规则设置，从而更愉快的从js转为ts开发
2022-11-02 10:34:44
1648
原创 【Vue实用功能】Vue实现拖拽元素、列表拖拽排序
【Vue实用功能】Vue实现拖拽元素、列表拖拽排序左右两个容器，左边和右边的元素可以拖动互换列表拖拽排序
2022-10-27 11:23:13
3630
1
原创 【Vue实用功能】Vue开发中非父组件之间的通信
1. 父子组件之间的通信问题 2. Vue开发中 `$emit、$on和$off` 的用法 3. eventBus遇到数据不更新的问题
2022-10-12 11:28:54
693
原创 【Vue实用功能】Vue监听浏览器刷新和关闭事件
【Vue实用功能】Vue监听浏览器刷新和关闭事件。在前端开发中，我们通常会遇到这样的需求，用户离开、刷新页面前，修改数据未进行保存操作，需要提示框提醒用户。
2022-10-11 16:08:02
4306
原创 git多账号配置
利用ssh-keygen -t rsa -f github_id_rsa 生成一个github的秘钥，并且名称为github_id_rsa，-f 的意思是指定生成的秘钥的名称。然后添加一个config文件。然后就可以进行clone。最后生成这样的秘钥对。
2022-10-11 14:51:08
263
原创 nvm下载安装及使用方法
nvm下载安装及使用方法我们通常在开发中，会存在不同的项目用到不同的node版本和npm版本，这时候我们就可以用到nvm来快速切换版本
2022-09-27 16:53:47
1547
原创 【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。动态粒子要展示的位置，id放到了使用页面最外层的父元素上。
2022-08-16 14:20:17
2298
jason-alioss-upload.js（阿里云 OSS 图片上传工具 SDK）
2025-09-01
基于Vue3 + Element Plus 的后台管理系统
2022-07-22
微信小程序商城demo
2022-01-25
uni-app 版商城wxapp-mall-uni
2022-01-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人