- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue路由切换页面的时候，卡顿：当前页面停留了一下，才切换到新页面
问题:我司项目嵌套了一个二开的编辑器页面，由于编辑器很大，初次进入编辑的时候需要加载很久大概3S左右才能显示页面。后续有需求需要通过router路由跳转到编辑器页面，每次在点击跳转按钮的时候会在当前页面停留4s到9s不等才能前往到编辑器页面。老总说用户体验很不好叫我先进入到编辑页面再去加载数据。动态路由使用 components 就是懒加载的路由路径 类似 () => import('@/views/home/index.vue') 你只需要在你项目的返回懒加载路径改成我下面这个写法就可以了。
2024-09-14 16:29:00
370
原创 Uniapp中image的@load不触发问题
事件通常不会被触发。这是因为浏览器认为这个图片已经成功加载过了,所以不会再次触发。这是因为浏览器认为这个图片已经成功加载过了,所以不会再次触发。很简单 在图片容器上面加一个唯一的key就行了 用时间戳就行了。属性值没有发生变化,即使图片是从网络上加载的,当图片从浏览器缓存中加载时,
2024-07-16 10:51:41
498
原创 canvas实现画布拖拽效果 适配Uniapp和Vue (开箱即用)
需求:我司是做AIGC项目最近和地铁项目有关需要实现海报效果图，并且需要使用画布拖拽和修改上传删除等等功能 当时连续加班花了10个工作日搓出来 实现挺简单的但是Canvas数据处理还是挺麻烦的 大概功能如图下首先我们需要引入Fabric.js 这个库封装好了原生的Canvas的Api使用uniapp和vue项目。
2024-06-17 14:58:27
1274
14
原创 Uniapp在屏幕尺寸低于960出现样式错乱(开箱即用)
我司项目突然要做平板兼容,我在调试的时候发现当屏幕尺寸低于960px发现样式但凡是以rpx单位的全部失效，如果是以px为单位那么影响就比较小，当时解决方案是写了不少媒体查询和把单位rpx改成px，步骤配置 找到文件pages.json。官网也有文字说明但是文字比较多 配置。
2024-06-17 10:37:00
518
4
原创 Vue2/Vue3使用WebSocket 心跳检测(开箱即用,附带原理)
我司突然来了个大数据项目需要使用长连接 本来心想用定时器解决的但是后面业务涉及到一个操作最多同时只能一个人触发。这样的话定时器就无法满足需求的，就需要使用WebSocket。1.首先创建WebSocket实例对象 这是JS原生自带的无需下载第三方库 如果需要心跳检测一定要封装成函数 调用 不需要就可以直接找个位置即可。2.创建生命周期钩子监听各个阶段的事件。5.完整代码复制接口 开箱即用。
2024-02-28 16:53:01
1640
3
原创 认识Pointer-events 透视事件
比如这种场景：有一个canvas的涂鸦区域，用户可以在canvas上随便涂写啥，在该区域的特定位置会加一些点击事件，比如切换大小颜色啥的，此时就可以在该区域下加上按钮，把不同事件添加到不同按钮上。，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，让事件传递给下面的元素。现在有一个层级很高的遮罩层和一个按钮它们兄弟级关系 遮罩层脱离了文档流 按钮有一个点击事件 现在需要点击按钮触发按钮的点击事件。
2024-02-19 17:44:39
338
1
原创 Vue3实现国际化语言 vue-i18n 已踩坑(开箱即用)
这是因为这里的数据是初始化产生的，并不能跟着local变化而响应变化，关于这一点，我是放在了computed里面解决的。这是因为切换语言是修改的全局变量locale，当页面一刷新，相当于又重置为默认值了，所以上面。开发了一个跨境项目需要实现国际化语言,这里采用的是vue-i18n库实现 超简单。
2024-02-19 14:58:13
591
1
原创 微信小程序用户隐私保护指引fail api scope is not declared in the privacy agreement(不一样的踩坑 已解决)
近日,我司弄了一个纯原生的微信小程序,里面刚好就用到了一个微信提供的button的bind:chooseavatar属性可以获取到用户的头像以及微信昵称。这个属性是在uniapp使用的,纯原生开发是不需要加上这个属性的,一但加上就报错了,所有在全局的app.json里面找到这个删掉就可以了。1.网上有很多方案是更新隐私协议以及降低基础库来解决的 (我是本地开发这个协议更新是针对于生产环境的(所以不可取),2.这个是我最优的解决方案,方案一在我尝试来是没有效果的。基础库降低到2.2版本左右就可以正常使用,
2024-02-01 15:47:12
2343
原创 Vue3版本 水波纹特效 (亲测有效 开箱即用)
import { ripple } from '@/directives/waves/waves' //这是我的路径。步骤一:创建一个waves.ts文件(直接复制即可 在vue3项目保证可以用)没用ts的话就直接把语法声明去掉即可。const vRipple = ripple//这个常量名就是后面页面会使用的指令名 可以随便命名。步骤二:在需要使用的页面进行引入你创建的waves.ts路径同时注册指令。下图是使用页面的截图主要红框标注的地方即可 不然会导致水波纹定位不准确。// 自定义水波纹指令。
2024-01-05 14:27:35
1203
1
原创 Vue2/3 实现打印功能 亲测有效
注意:如果打印文本的内容是后端返回或者是异步的需要绘制一个预览页面 能预览页面的DOM数据加载完成之后再去掉用打印操作 (打印操作的唤起在Mounted之前 会导致打印页面为空白的)第四步:实现打印 使用v-print="printObj"可以使被绑定的元素获得点击唤起打印页面的功能。总结：打印功能很简单绘制需要打印的页面即可 麻烦的是打印中包含条形码 我们需要做PDA扫码容错。-- 打印的范围区域 id是用来获取打印的区域 -->下面是A4和挂牌的效果图↓↓↓↓↓↓↓。第一步:安装第三方库。
2024-01-02 16:07:50
2694
原创 Vue2/Vue3 实现条形码生成(以及打印条形码踩坑)
解决方案 在同样的条形码条宽度手机的条形码识别宽度要小于扫描枪的识别宽度 可以配置options 的width配置项来解决。解决方案:options 的width配置项 不同打扫码枪能识别的条形码的条width宽度不一样。注意:在打印中使用条形码就不一样了 我们需要注意条形码容器的类型 可以回到第三步阅读。我司用到的扫码枪是PDA 可以在扫描出电脑上的但是无法扫码打印纸上的(注意:条形码的内容会影响条形码的长度 内容文本越长 条形码宽度越宽。怎么舒服怎么来 在打印踩的坑我放到文章第三步和结束了。
2024-01-02 15:28:24
2757
原创 Vue 根据经纬度计算两点直接的距离(OA考勤打卡)
我司需求需要根据用户的实时地理位置来实现OA范围打卡功能，这就需要计算两个经纬度直接的距离。// 根据经纬度计算距离，参数分别为第一点的纬度，经度；这个工具函数复制即可 开箱即用 亲测有效。
2023-12-26 15:11:34
580
1
原创 Vue3+Element Plus 中Table同时只能展开一行
前言：本文目的——我在el-table中使用expand嵌入了新的table,当点击顶层table行时展开新的table内容并显示，同时内层table需要实现分页效果等。:row-key="" //设置行的唯一标识，用于配合expand-row-keys使用，(行的唯一标识 expand-row-keys存放的值就是行的唯一标识):expand-row-keys="" //设置当前展开行，要求值为数组(白话就是 存放在这个数组的ID会在页面中展开,没有就不会展开)三、在内层设置展开行的书写插槽。
2023-12-23 11:52:14
2496
1
原创 Element-Plus/Ui 单个input输入框（脱离表单的），添加校验
1.只能输入正整数且默认值是1 (栗子 后面的写法只需要更改oninput对应的函数即可)我司开的黄金项目需要在表格里面添加输入框并且需要校验用户输入的类型以及默认值。4.只允许输入正整数和正小数且小数只保留2位数同时默认值是1。亲测有效 vue2和vue3都可以用 开箱即用。4.只允许输入正整数和正小数且小数只保留2位数。这个时候我们就需要用到oninput事件了。3.只允许输入正整数和正小数。
2023-12-08 11:47:32
1752
2
原创 第三方组件(亲测 兼容性没有问题)
vue3-print-nb(打印组件 页面兼容性好 vue3可以使用)jsbarcode(条形码 vue3可以使用)
2023-11-23 09:11:46
81
原创 uni-app vue3 使用骨架屏 以及实现骨架屏
*query.selectAll 参数就是class类名 可以获取到所有带skeleton-circle类名的节点 这个类名可以自己起 *//*query.selectAll 参数就是class类名 可以获取到所有带skeleton-rect类名的节点 这个类名可以自己起*//* 获取当前组件的实例 vue2里面是用this vue3里面没有this就要换成getCurrentInstance()来获取实例 *//* 我这边用的是定时器来模拟后端数据异步返回的结果从而实现骨架屏 */
2023-10-23 17:50:34
1107
原创 Vue3+vite中使用import.meta.glob
/ 数组写法同时获取指定文件夹下面的所有文件。我们已经知道 "*"是代表所有文件 "**"是代表所有文件夹 它们是指目录下的所有而并不是单个文件或文件夹 当我们指定某一个目录那么他就是获取指定目录下的所有文件。
2023-10-20 17:04:53
3983
1
原创 高德地图会报高德地图加载报错-------禁止多种API加载方式混用
【代码】高德地图会报高德地图加载报错-------禁止多种API加载方式混用。
2023-10-17 17:14:53
2067
原创 uni-app真机预览调试,ios系统真机调试步骤
第六步:选择ipa文件路径这个是我的完整路径D:\Hbuilder\HBuilderX\plugins\launcher\base。第十步:进入到HBuilder里面 点击运行>运行到手机或模拟器>运行到ios App基座。恭喜你到这一步就已经完成所有配置了(注意要使用自定义基座运行,基本基座运行已经不支持了)第八步:Apple ID就是你第二步注册的账号 设备标识符就是你第二步获取的码。第九步:注意点击勾选的地方是空白的 点对应的位置就是了(已经框出来了)第二步:获取手机的UUID号。
2023-10-14 17:20:11
658
1
原创 Vue 中使用高德地图API 获取地理位置+逆地理编码+正地理编码 附带高德教学
在初始化配置的时候我尽量多分步骤详细 毕竟配置项有点多 容易蒙圈 用一个东西我们主要的目的是学习他而不是直接用 授人以鱼不如授人以渔(可以跳过 文章后面有完整代码)第一步 :引入高德API库：第二步:绘制地图<template>第三步:添加密钥找到index.html页面 添加密钥securityJsCode: "", //你项目的密钥</script>第四步:初始化地图配置(下面代码所有都亲测有效 直接按照步骤复制阅读就行)步骤一 :在需要的页面进入引入。
2023-10-14 16:43:58
5190
4
原创 2023最新 最完整uniapp——ios证书申请——详细步骤+遇到的坑——技能提升
的程序，又遇到了uniapp的需求，之前没有自行申请ios证书，现在终于要自己生成证书了。。。前言: 申请证书必须使用苹果系统 window电脑无法申请生成ios证书的详细步骤1.申请ios证.1.1准备环境1.2登陆IOS Dev Center ------申请开发者账号，就可以登陆(踩坑)1.3申请苹果App ID1.4生成证书请求文件 ------ 需要使用mac 苹果电脑1.5申请开发证书和描述文件 -----developent 要使用mac 苹果电脑(踩坑)
2023-10-14 12:46:07
6160
4
原创 UniApp开发安卓以及H5实现页面级权限管理,避免用户浏览器直接输入url访问页面
uni-app如何像vue-router中的beforeEach一样实现跳转拦截功能呢？为此uniapp官方提供了专门的API方法。
2023-10-12 15:52:15
2263
原创 Vue富文本wangeditor5对接阿里oss图片上传 亲测开箱即用 附带报错解析
第五步:由于我是用的wangeditor5富文本找到下面的配置 editorConfig配置MENU_CONF属性。
2023-09-21 18:44:07
722
1
原创 手把手教学 Vue使用MD5和AES对称加密步骤 亲测开箱即用
目录的src文件夹中的utils公用文件夹中添加文件AES.js，在文件中添加代码。要注意使用AES加密的时候加密和解密的key必须要是相同否则无法解密对应加密的内容。找到mian.js，将md5挂载到vue的原型上。二、局部导入(在需要使用的项目文件中引入)三、在需要的地方引入AES.js文件。在需要使用的文件下进行使用。
2023-09-18 11:12:13
1113
原创 Vue2和vue3如何配置多个代理服务器 亲测有效开箱即用 附带原理教学
在开发过程中，由于使用第三方框架只配置一个代理服务器和后端联调满足不了我们的需求,我们通常会在 vue.config.js或者是vite.config.js 中配置 devServer 来在本地启动一个服务器，在这个选项中，我们会配置proxy 属性来将指向到本地的请求（例如： /api/action） 代理到后端的开发服务器上避免跨域。
2023-09-15 17:59:51
2953
原创 uniapp HBuilderX 安装 MuMu模拟器12 测试有效 包含安装失败问题解决方案
在模拟器的 “设置” 里 找到 “关于手机” 然后进去找到 “版本号” 位置，连续点击 “版本号”9次，会提示 进入开发模式，OK 就这么开着模拟器吧。显示红色的字显示 未检测到基座 之类的语句，下面也有没 ip:端口 的内容，那就请你继续往下看。有的人的软件这里会直接显示基座明名，但是我的还是显示“运行到Android App基座”，这都无所谓。1、找到 “运行” > 运行到手机或模拟器 >Android模拟器端口设置。mumu模拟器12 进入到开发者模式无需任何额外操作。
2023-09-13 15:27:39
1897
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人