- 博客(146)
- 资源 (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
1143
原创 实现一个优雅的城市选择器组件 - Uniapp实战
【Uniapp城市选择器组件实现】 本文介绍了一个基于Uniapp的功能完善的城市选择器组件，包含以下核心功能： 按字母分组显示城市列表 右侧字母索引快速导航 城市搜索功能 平滑滚动和触摸交互反馈 组件采用uni-popup实现底部弹窗，包含搜索框、城市列表和字母索引三部分。核心代码展示了数据处理、搜索过滤和触摸交互的实现逻辑，通过scroll-view的scroll-into-view特性实现字母跳转功能。该组件具有良好的用户体验，支持点击选择、搜索筛选和字母索引三种交互方式。
2025-09-10 14:03:39
358
原创 Uniapp 图片前端上传功能实现与详解
UniApp跨平台开发框架提供了一套完整的图片上传解决方案。本文介绍了核心代码结构，包括图片选择配置、上传流程优化和错误处理机制。关键点包括限制单次选择、添加时间戳确保唯一文件名、完善的异常捕获和用户取消操作处理。文章还提出了性能优化方向（大图压缩、多图队列）和扩展功能建议（预览、裁剪、重试）。这套方案代码清晰、错误处理完善，可直接集成到各类UniApp项目中。
2025-09-01 11:56:23
312
原创 uniapp分页效果
这是一个基于分页逻辑的博客页面实现方案，主要包含三个部分： 模板部分：采用清晰的博客列表展示结构，包含标题、内容和元信息（作者、时间），并集成加载状态提示组件。 脚本逻辑： 保持核心分页机制，通过pageNum和pageSize控制分页 实现滚动触底自动加载(onReachBottom) 包含三种加载状态：加载中/完成/失败 支持下拉刷新重新加载功能 样式设计：采用Flex布局和响应式单位(rpx)，确保在不同设备上的显示效果，包含加载动画效果。 该实现保留了原始分页核心逻辑，同时针对博客场景进行了适配优化
2025-08-27 13:50:45
102
原创 Vue中实现纯粘贴上传图片功能
本文介绍了如何在Vue项目中实现纯粘贴上传图片功能，替代传统的文件选择上传方式。通过监听粘贴事件获取剪贴板中的图片数据，直接上传至服务器，为用户提供更加便捷的上传体验。
2025-08-04 11:04:51
504
原创 UniApp H5 适配 PC 端新姿势：打造跨设备一致体验
本文介绍了一种UniApp H5应用适配PC端显示的解决方案。通过在app.vue中添加设备判断逻辑，当检测到PC端访问时自动跳转至专门设计的pc.html页面。该页面使用iframe模拟手机显示效果，并随窗口大小变化自动调整。方案核心在于：1)通过设备识别实现自动跳转；2)利用iframe保持移动端布局；3)响应式设计适应不同屏幕。这种方法既保持了开发效率，又提升了PC端用户体验，特别适合以移动用户为主的应用场景。注意需根据实际项目调整文件路径和样式细节。
2025-07-23 11:15:33
930
原创 UniApp 多端人脸认证图片上传实现
UniApp跨端人脸认证实现方案 本文介绍UniApp实现多端（H5/小程序/App）人脸认证的统一方案。通过条件编译区分H5与非H5平台：H5端需canvas压缩图片并转Blob后使用fetch上传；非H5端直接调用uni.uploadFile上传本地文件。核心流程包括调用前置摄像头拍摄、图片处理、上传认证三个步骤，并处理了不同平台的API差异。代码提供完整的错误处理和加载状态管理，确保用户体验一致性。开发者只需配置后端接口地址和token即可快速集成。
2025-07-16 13:39:55
393
原创 UniApp 页面布局自定义头部导航
在移动端应用开发中，页面布局的精准适配是一个关键问题。尤其是在 UniApp 中，不同设备的屏幕尺寸、状态栏高度以及头部布局的差异，可能导致页面内容错位或显示不全。本文将分享如何通过动态计算头部高度，实现页面内容的精准定位，确保在不同设备上都能正确显示。
2025-04-09 10:47:50
854
原创 在Uniapp中使用阿里云OSS插件实现文件上传
本文介绍了如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。通过引入阿里云OSS插件，配置初始化参数，并结合uni.chooseVideo选择或拍摄视频文件，最终将文件上传至阿里云OSS。文章详细讲解了插件的初始化、文件上传的实现步骤，以及如何监听上传状态。通过本文，开发者可以快速掌握在Uniapp小程序中集成阿里云OSS的方法，轻松实现高效的文件上传功能。
2025-02-10 11:37:31
1484
原创 阿里OSS前端分片上传实现
阿里OSS前端分片上传实现,在现代Web开发中，文件上传是一个常见的需求，尤其是在处理大文件时，分片上传可以显著提高上传效率和用户体验。通过以上步骤，你可以实现一个高效的前端分片上传功能，适用于处理大文件上传场景。阿里云OSS提供了强大的存储和传输能力，结合前端技术，可以为用户提供更好的使用体验。分片上传大文件：使用multipartUpload方法进行分片上传，并在上传过程中处理进度条。直接上传小文件：如果文件小于100KB，直接使用put方法上传。初始化OSS客户端：使用获取到的凭证初始化OSS客户端。
2025-01-22 10:34:56
587
原创 使用 Element-UI 中的 el-button 添加防抖指令防止重复提交
在现代Web开发中，防止用户在短时间内多次点击提交按钮是一个常见的需求。本文将介绍如何在Vue.js项目中使用自定义指令来实现按钮的防抖功能，防止用户在短时间内多次点击提交按钮。在使用Element-UI的el-button组件时，如果用户在短时间内多次点击提交按钮，可能会导致表单数据被多次提交。为了避免这种情况，我们需要在按钮上添加防抖功能，即在用户点击按钮后的一段时间内禁用按钮，防止重复点击。接下来，在需要添加防抖功能的按钮上使用v-no-more-click指令。
2025-01-20 14:58:30
1288
原创 创意实现！在uni-app小程序商品详情页轮播中嵌入视频播放功能
通过uni-app框架实现商城小程序商品详情页的视频与图片轮播功能，以提升用户体验和增加商品吸引力。通过展示商品视频和图片，用户可以更全面地了解商品细节，从而提高购买决策的便利性和满意度。这种功能适用于各类商品，如服装、家具、电子产品等。通过本文的步骤，您将学会如何在商城小程序中利用uni-app框架实现商品详情页的视频与图片轮播功能
2024-09-25 11:10:26
1595
原创 从秒到年：打造与过去日期相关的智能显示
在前端开发中，经常需要处理过去的日期，并将其转换为易读的形式，比如"刚刚"、"几分钟前"、"几小时前"等。本文介绍了一种自定义的JavaScript方法，可以帮助开发者轻松地格式化过去日期。通过该方法，你可以根据时间差的范围返回不同的字符串表示，同时还可以选择不同的格式类型，如"YYYY-MM-DD"、"YYYY年MM月DD日"等。
2024-03-07 15:16:25
399
原创 【Vue实用功能】elementUI 自定义表单模板组件
elementUI 实现一个自定义的表单模板组件【Vue实用功能】elementUI 自定义表单模板组件背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单直接上代码：
2022-12-20 17:12:53
4727
原创 uni-app app分享到朋友和朋友圈
可以分享文字、图片、图文、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。uni-app的App引擎封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。
2022-12-19 17:33:16
3159
2
原创 【Vue功能】weixin-js-sdk实现vue分享功能
h5链接分享到微信好友、朋友圈的链接卡片内容可以自定义安装微信sdk使用新建文件：plugins/wechat.js页面使用注意：使用微信自定义分享功能的时候，当分享链接中存在中文的时候，要进行encodeURIComponent()，原因：在安卓手机上能成功自定义分享，ios手机上则不能成功分享，安卓手机会自动encodeURIComponent，而IOS不会。
2022-12-07 19:30:00
899
原创 【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
3176
原创 【Vue3】手把手教你创建前端项目 Vue3 + Ts + vite + pinia
手把手教你创建前端项目 Vue3 + Ts + vite + pinia
2022-11-03 15:46:30
3597
1
原创 【typescript】Typescript tsconfig.json全解析
tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要，如果有些选项你没配置，则需要严格按照TypeScript的规则来书写，书写出不符合规则的代码，会导致编译报错。我们早期可以关闭一些规则设置，从而更愉快的从js转为ts开发
2022-11-02 10:34:44
1570
原创 【Vue实用功能】Vue实现拖拽元素、列表拖拽排序
【Vue实用功能】Vue实现拖拽元素、列表拖拽排序左右两个容器，左边和右边的元素可以拖动互换列表拖拽排序
2022-10-27 11:23:13
3549
1
原创 【Vue实用功能】Vue开发中非父组件之间的通信
1. 父子组件之间的通信问题 2. Vue开发中 `$emit、$on和$off` 的用法 3. eventBus遇到数据不更新的问题
2022-10-12 11:28:54
660
原创 【Vue实用功能】Vue监听浏览器刷新和关闭事件
【Vue实用功能】Vue监听浏览器刷新和关闭事件。在前端开发中，我们通常会遇到这样的需求，用户离开、刷新页面前，修改数据未进行保存操作，需要提示框提醒用户。
2022-10-11 16:08:02
4239
原创 git多账号配置
利用ssh-keygen -t rsa -f github_id_rsa 生成一个github的秘钥，并且名称为github_id_rsa，-f 的意思是指定生成的秘钥的名称。然后添加一个config文件。然后就可以进行clone。最后生成这样的秘钥对。
2022-10-11 14:51:08
246
原创 nvm下载安装及使用方法
nvm下载安装及使用方法我们通常在开发中，会存在不同的项目用到不同的node版本和npm版本，这时候我们就可以用到nvm来快速切换版本
2022-09-27 16:53:47
1469
原创 【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。动态粒子要展示的位置，id放到了使用页面最外层的父元素上。
2022-08-16 14:20:17
2250
原创 【Vue实用功能】Vue 项目首次打开加载很慢的优化方案
当SPA（单页应用程序）变得很复杂时，构建后的包会变得很大，从而导致页面的加载时间过长。vue-router 支持 webpack 内置的异步模块加载系统。所以采用路由被访问时按需加载，使用较少的路由组件就不用打包进 bundles 中。方案2：CDN加速...
2022-06-20 14:54:49
5904
1
原创 【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
Vue实现文档在线预览文档，在线预览PDF、Word、Excel和ppt等office文件
2022-05-30 13:41:44
51493
16
原创 【Vue实用功能】Vue实现tab页多页面切换
Vue实现tab页多页面切换实现路由发生变化时，新增一个tab标签页，点击其他标签时切换到对应的页面，刷新网页同时保留状态这里就直接说它实现的代码就OK！！！VueX记录下每次新增后的tab标签页路由store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 路由导航start // 缓存组件页面 ca
2022-05-19 17:26:06
8760
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关注的人