- 博客(400)
- 资源 (3)
- 收藏
- 关注
RSS订阅转载 vue-router beforeEach钩子，next(‘/login‘) 跳转问题
在使用vue-router的beforeEach钩子进行登录状态验证时，若未正确处理登录页面的重定向逻辑，会导致死循环问题。当用户未登录时，直接跳转至'/login'页面，但未排除当前页面已是登录页的情况，从而造成无限重定向。解决方案是在else分支中增加判断：若当前路径已是'/login'则直接放行，否则才执行跳转。这一处理避免了路由循环，是使用导航守卫时的常见注意事项。
2025-11-12 09:40:31
51
原创 在 Vue 项目中，vue.config.js 同时配置代理和别名
摘要：本文介绍了如何在Vue项目中配置vue.config.js文件来同时设置代理和路径别名。主要内容包括：1) 通过devServer配置API代理；2) 使用configureWebpack或chainWebpack两种方式设置路径别名；3) 演示了将两种配置整合在同一文件中的方法。这些配置能帮助开发者更方便地管理API请求和模块路径，提升Vue项目的开发效率。
2025-11-04 09:53:16
304
转载 Vue常见问题汇总（一）：Cannot set property $http of #＜Vue＞ which has only a getter
摘要：文章指出在使用Vue时遇到问题，可以通过注释掉import VueResource from 'vue-resource'和Vue.use(VueResource)这两行代码来解决。该方法来源于CSDN的一篇技术博客，为开发者提供了简单的解决方案。（49字）
2025-11-03 09:36:56
54
转载 sourcetree修改密码
本文介绍了修改SourceTree中存储的Git密码的方法。对于有用户账户的情况，可直接在选项的验证设置中修改密码；若无用户账户，建议删除C:\Users[用户名]\AppData\Local\Atlassian\SourceTree目录下的passwd文件（注意AppData是隐藏文件夹），重启SourceTree后即可重新输入密码。这种方法解决了因公司强制修改密码导致的密码变更问题。（注：原文链接已移除）
2025-10-29 17:37:51
172
原创 uniapp video 加载完成后全屏播放
本文介绍了在UniApp中实现视频加载完成后自动全屏播放的方法。主要步骤包括：1）在页面中添加video组件并设置基本属性；2）通过监听play事件，在事件触发后调用requestFullScreen方法实现全屏。文章提供了完整的代码示例，并指出在微信小程序等平台可能需要用户手动触发全屏。该方法适用于大多数UniApp应用场景，能有效提升视频播放体验。
2025-10-24 17:04:29
524
原创 wangeditor 富文本上传视频并给视频添加封面
本文介绍了一个基于Vue.js和WangEditor的富文本编辑器组件实现。该组件具有以下功能：1) 支持图片上传配置，包括最大文件大小限制和回调处理；2) 提供视频上传功能，支持封面图设置和上传回调；3) 实现内容变化监听和父组件事件传递；4) 包含编辑状态回显功能。文章还详细说明了如何修改WangEditor源码以支持带封面图的视频插入功能，针对不同浏览器提供了兼容性处理方案。该组件通过props接收初始内容和编辑状态，并提供了完善的配置选项和回调处理机制。
2025-10-22 10:53:59
263
原创 uni-app从后端返回的富文本中的视频截取一帧为封面
本文介绍了一种使用renderjs提取视频截图并生成封面图的方法。通过解析HTML中的视频标签，创建视频元素并设置自动播放属性，利用canvas获取视频指定时间点的画面作为封面图。该方法包含以下关键步骤：1)使用正则表达式提取视频URL；2)创建video元素并设置跨域、自动播放等属性；3)通过canvas绘制视频帧并生成base64格式的封面图；4)将封面图添加到视频标签的poster属性中。该方案适用于uniapp开发环境，可自动为富文本中的视频生成封面，提升用户体验。
2025-10-20 15:52:11
1297
转载 vue文件内使用sass时报错: this.getResolve is not a function
本文解决了一个常见的Vue项目中使用Sass后出现的编译错误问题，原因是sass-loader版本过高导致，将版本从8.0.0降级到7.x.x即可修复。
2025-09-29 15:12:12
35
转载 uniapp点击图片预览，关闭预览图片后自动触发onshow生命周期，怎么解决？
摘要：文章讨论了小程序开发中图片预览与页面数据更新的冲突问题。当用户预览图片时，为避免触发onshow中的数据更新导致页面回到顶部，作者设置了变量figh控制数据请求。但发现预览关闭后无法自动恢复figh状态，影响再次进入页面时的数据加载。尝试通过预览成功/失败回调修改figh属性，并建议在离开页面时重置figh状态，确保返回时能重新触发数据更新。该问题源于小程序API对图片预览关闭事件的支持不足。
2025-09-17 10:49:16
72
转载 uni-app nvue 中web-view 如何设置双指缩放
在uni-app中实现web-view组件双指缩放功能，需在APP-PLUS平台下通过获取当前webview对象并设置scalable属性为true。关键代码是在onReady生命周期中延迟1秒后执行样式设置。此方法适用于页面初始化场景，具体实现参考uni-app官方文档的web-view组件说明。
2025-08-25 14:20:47
217
转载 uniapp在线预览pdf文件
本文介绍了在uniapp项目中实现H5和App在线预览PDF文件的解决方案。由于插件市场收费插件较少，作者采用pdf.js插件实现，支持H5及打包后的Android/iOS应用。实现步骤包括：获取并修改pdf.js文件（添加了放大缩小和懒加载功能）、将资源放入static文件夹、创建pdfview.vue页面通过web-view加载PDF。最终通过传递PDF文件URL参数实现页面跳转和PDF渲染。方案已在项目中成功应用，效果良好。
2025-08-25 11:41:44
418
2
转载 使用 vue-cookies 插件操作cookie,设置token有效期
这篇文章介绍了如何在Vue项目中安装和配置vue-cookies插件，包括在main.js中全局引入，以及设置和管理Cookie的方法，如设置不同的过期时间和删除Cookie。同时，提供了设置、获取、删除和检查Cookie的代码示例。
2025-07-10 11:56:14
221
转载 Vue下载excel文件模板，Vue 下载本地静态资源static文件夹
在Vue CLI3项目中，由于打包时assets目录下的文件路径不固定，为实现本地docx文档下载，需将文件放在public/static下。通过`<a>`标签的href属性指定 `/static/serviceAgreement.docx` 的路径，并设置download属性实现下载。注意不同Vue CLI版本对静态资源位置的要求，Vue CLI2需要放在static，而CLI3及以上版本则应放入public。下载;项目需要下载本地的。
2025-07-09 14:58:43
431
1
转载 【vue】vue的生命周期，uniapp的组件生命周期
本文详细介绍了Vue的生命周期，包括beforeCreate、created、beforeMount、mounted等关键阶段的作用，以及它们在组件状态变化中的触发条件。3、beforeMount：将vue组件编译成html代码，此时还没上树，无法访问到dom节点（可以作为初始化状态的最后一个机会）1、beforeCreate：在初始化事件后，但是还没拦截（所以此时修改数据，但是还没被拦截，所以没反应）6、updated：状态修改完虚拟dom重新渲染，并且更新，可以访问到更新后的dom。
2025-06-27 16:23:09
59
原创 uniapp uni.chooseMedia 判断是拍摄还是相册 弹出权限说明
在使用uni-app开发应用时，接口可以用来选择图片或视频，包括从相册选择或使用相机拍摄。如果你想在使用这个接口之前判断用户是从相册选择还是使用相机拍摄，并相应地弹出权限说明，你可以通过在调用之前先询问用户，或者在调用后检查返回的数据来判断用户的选择。
2025-06-26 17:42:40
846
1
转载 uniapp定义new plus.nativeObj.View实现APP端全局弹窗
7.maskClick: true // 是否允许点击遮罩层关闭弹窗 是:true 否:false(默认)6.showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false。3.confirmBoxColor:"", //确认按钮背景色。/utils/AppPopupView.js 定义弹窗文件。4.cancelText:"", //取消按钮文字。5.confirmText:" //确认按钮文字"2.content:"", //内容。1.title:"", //标题。
2025-06-25 12:03:01
279
转载 Uniapp WebView 全屏导致遮挡状态栏的解决方案
当使用 WebView 组件时，默认情况下 WebView 会占据整个屏幕，包括状态栏区域，导致状态栏内容被遮挡。为了确保状态栏可见，我们需要动态调整 WebView 的布局。
2025-06-13 16:03:24
924
1
转载 uni-app使用button的时候设置border的问题，去border边框问题
这样就可以解决这个button自带的边框问题了。uni-app的button想要直接使用。去掉边框线是不行的，需要设置。
2025-06-12 11:40:51
274
原创 flex布局左边固定，右边自适应，右边内容超出会影响布局
右边内容超出的话，就会导致左边固定的宽度大小不起重要了，这时只需要加上min-width: 0;左侧宽度固定，右侧自适应。
2025-06-06 17:44:34
156
转载 uniapp对接极光推送（超详细）
注：标准基座只包含了uniapp基础的一些框架内部的东西，但是如果我们要调试第三方的插件SDK，就需要自定义基座以上是uniapp集成极光服务的一个常见方式，但通过这种方式可能会存在向andriod手机推送不过去的情况。如果有小伙伴碰到这种问题，请改用通过Android Studio离线打包配置的方式集成极光推送服务，解决这一问题。具体请看我的另一篇博客uniapp对接极光推送（Android Studio 离线打包配置）。
2025-06-06 13:57:40
1032
原创 国家气象局免费天气预报接口，城市代码（JSON格式）
API地址：http://t.weather.sojson.com/api/weather/city/101210101。2. 想要测试自己城市，把最后的101210101换成自己的城市代码（city_code）即可。1. 地址最后的“101210101”代表杭州。
2025-06-05 10:45:25
1886
原创 使用flex实现三栏布局，两边固定，中间自适应
使用CSS的Flexbox布局可以很容易地实现三栏布局，其中两边固定宽度，中间栏自适应宽度。以下是一个简单的示例：在这个示例中，.container元素被设置为，使其成为一个flex容器。.left和.right元素被设置了固定的宽度，而.center元素使用了flex: 1;属性，这意味着它会占据剩余的空间，从而实现自适应宽度。则确保了三栏之间有适当的间距。请注意，如果你希望三栏之间紧密相连，没有间距，你可以移除这一行。另外，背景色只是为了在示例中更好地展示布局效果，你可以根据需要自行调整或移除。
2025-05-30 11:58:14
886
转载 uni-file-picker文件选择上传功能实现
一、 基础用法，可以使用样式选择图片limit="1"，则最多选择张图片file-mediatype="image"，限定只选择图片file-extname='png,jpg'，限定只选择 png和jpg后缀的图片auto-upload="false",可以停止自动上传，通过ref调用upload方法自行选择上传时机。与ref="files"搭配使用，this.$refs.files.upload()
2025-05-30 09:24:04
1097
原创 在uni-app中修改上一个页面的值，可以通过多种方式实现，这里提供几种常见的方法：
以上几种方法各有优缺点，选择哪种方法取决于具体的应用场景和需求。在实际开发中，可以根据项目的复杂性和数据共享的需求来选择合适的方案。同时，需要注意数据更新的逻辑和时机，确保数据的一致性和准确性。
2025-05-22 15:42:17
1095
转载 JS判断当前对象是否为null和undefined和空
通过上面的代码结果显示null和undefined和空 时都返回了true，想判断一个值是undefined、null和空。如果想判断一个值不是undefined、null和空字符串中的一种，则用!中的一种，只要用!
2025-05-14 10:25:57
346
转载 如何在uni-app中计算出微信小程序导航栏的高度
本文详细介绍了在uniapp中为何需要获取并计算导航栏高度，主要目的是为了实现自定义导航栏以满足特定的业务需求，如放置搜索框或设置自定义背景。作者分享了如何通过获取微信小程序的状态栏高度和胶囊位置信息来计算导航栏高度，并提供了在App.vue和mixin.js中封装的方法，以便在不同页面中灵活应用。同时，文章提醒注意不同页面的可使用窗口高度变化，强调不应在全局变量中提前固定该值。拿到导航栏的高度当然是为了自定义导航栏，默认为我们提供了一个导航栏，也就是每个页面上面的标题，但如果对这个默认的导航栏不满意，我们
2025-05-06 13:54:49
911
1
转载 vue使用bus进行兄弟组件传值
3.定义传值的方法，使用bus.$emit('methodName',data), methodName是自定义的方法名。4.在要接收值的组件里，使用bus.on('methodName',val =>{ }) ,val 就是传过来的值。2.在需要传值和接受值的vue文件中，各自引入bus.js。子组件HelloWorld.vue。子组件Child.vue。1.新建bus.js。
2025-04-25 14:18:44
128
转载 Vue 中mixin的用法详解 （uni-app使用vue的语法，也同样适用）
vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错，具有参考借鉴价值，需要的朋友可以参考下说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？ 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本
2025-04-14 15:50:35
216
转载 uniapp中的easyCom是什么
uniapp中的easyCom是一种组件自动注册机制，可以让开发者更加方便地使用和管理组件。它能够自动扫描指定目录下的所有组件，并注册到全局组件中，这意味着无需手动在components中引入组件，也无需在每个页面中单独引入组件，只需要在组件的目录下创建一个index.vue文件，就可以自动注册组件并在全局中使用。使用easyCom非常简单，只需要在项目根目录下的pages.json中配置easyCom属性即可。例如JSON复制。
2025-04-14 15:38:04
407
转载 npm install报错提示证书过期CERT_HAS_EXPIRED
请注意，这种做法不推荐在生产环境中使用，因为它会使您的连接不安全。只有在服务器的SSL证书更新之前，才应作为临时解决方案使用。这个错误是由于您尝试连接的服务器上的SSL证书已过期。这不是您可以直接修复的问题，因为需要服务器所有者更新他们的SSL证书。运行此命令后，再次尝试您的npm命令。一旦您完成，或者SSL证书问题解决了，您应该将。然而，您可以通过告诉npm对此请求不需要SSL来临时绕过此问题。，以重新启用严格的SSL。
2025-04-10 11:19:08
328
转载 .env.development、.env.production、.env.staging
文件（如）用于根据环境（开发、生产、测试等）配置应用程序的行为。
2025-04-09 09:28:07
808
原创 vue PC仿小红书发文章时添加标题效果（选择特色标签可自行输入，删除时可控制光标位置
【代码】vue PC仿小红书发文章时添加标题效果（选择特色标签可自行输入，删除时可控制光标位置。
2025-03-31 12:01:45
279
转载 在项目中查看仓库的git地址
但是此时有个同事，本地是有这个代码的，让这个同事帮忙指向一下这个命令就可以知道项目的git地址了。需要看一个项目中代码，很尴尬，找不到项目的git地址，
2025-03-28 15:57:21
89
转载 el-date-picker组件的picker-options常规属性设置
【代码】el-date-picker组件的picker-options常规属性设置。
2025-03-28 10:54:55
370
转载 【Element】el-form和el-table嵌套实现表格编辑并提交表单校验
用户只对模块设置区的排序或多选框进行了操作，没有对自定义设置区进行操作就保存，因对自定义设置区的表单进行了校验，此时无法提交，需更改现有代码；自定义设置区默认要有一条空数据在页面展示，可供用户自定义操作，不管用户是否填写，保存时都能正常保存，如果用户填写了表单但不完整，此时需对表单进行校验通过再保存成功。表格增加操作项，具有添加和删除按钮，第一项无法删除，点击添加时，动态增加表格的行数，点击删除的时候，删除表格的行数据。背景：页面中包含2个功能设置区，当用户进行操作后，统一进行保存，如下👇。
2025-03-20 15:33:52
2460
转载 uni-app 路由跳转方式
uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数pages.json。key=value&key2=value2，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。该组件类似HTML中的<a>组件，但只能跳转本地页面。保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
2025-03-18 10:25:14
671
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人