- 博客(26)
- 收藏
- 关注
RSS订阅原创 vue-cli+uni-app+vue3.0+ts构建自定义条件编译（飞书）小程序
一、新建项目1.全局安装 vue-cli，如果有用vue-cli构建过项目可跳过该步npm install -g @vue/cli2.创建uni-app+vue3项目vue create -p dcloudio/uni-preset-vue#vue3 uni-vue3-projectuni-app模板选择：默认模板(TypeScript)二、添加配置1.做一些对应飞书小程序的配置，可参考官网说明package.json中加入如下配置："uni-app": {
2021-09-11 09:59:26
3377
6
原创 html2canvas在ios中文字错乱重叠
一、问题出现之前有给项目加水印的需求，是好多年前的旧项目，直接引入js的方式，加了水印过之后没有修改过但是测试反应出现了文字重叠的问题：正常水印：文字错乱水印：细心的小伙伴已经看出来错乱水印中的”术“和”海)“都向上偏移了并且偏移位置仍保留空白位置。二、解决问题怕是受到了什么样式的影响，把生成水印的源元素上的样式都去掉了还是有问题，思来想去，灵光一现：是不是版本问题。因为新项目里通过装包引入的方式是没有问题的。替换了旧版本的js之后果然解决了问题，害我之前还试了好多种text-alig.
2021-08-08 14:53:24
4537
6
转载 vue项目的自动化测试
参考kukuv2大神的讲解整了个新项目搞了一下，只跑起了unit tests，e2e还是不行。报错：Error retrieving a new session from the selenium server。重新装了chromedriver也不行，弃了，人间不值得。有了解的大神可以指导一下初入坑的我，还想拯救一下。...
2021-06-09 17:40:02
324
原创 温故而知新之css
1.在背景色的一个示例中发现body元素设置margin之后背景依然会占据margin的空间，查找一番找到了合理解释。2.clip用来裁剪元素值为(x1, x2, y2, y1)即x起始到x结束到y最大值到y起始。3.引自leon的笔记：伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有
2021-06-01 17:22:15
142
原创 安卓手机调整系统字体大小之后影响html2canvas中的文字
一、发现问题之前做的h5项目中使用html2canvas给图片加水印的功能，查看用户上传的图片时发现文字拥挤字体变大，尝试了扁宽和细长的图片都没能复现，灵机一闪：会不会不是图片的问题，是不是系统字体影响的？（我可真是bug杀手）。设置系统字体特大号之后果然出现了略显拥挤的文字。二、解决问题既然找到了问题就好办了。ios中调整系统字体不会影响html2canvas，可以加以下样式以防万一：body { -webkit-text-size-adjust: 100% !important
2021-05-27 17:16:00
1324
9
原创 温故而知新之html
1.id作为属性只能写一个，以空格分隔的多个无效2.a标签的href可以链接到页面上的一个拥有id的元素，如：<a href="#test">去test</a><!-- 省略若干代码 --><p id="test">到我这里</p>a标签可以使用mailto关键字发送邮件，如：<a href="mailto:zhangrr601@163.com?cc=抄送人邮箱&bcc=密送人邮箱&subject=这是
2021-05-16 17:29:00
75
原创 移动端拍照上传图片之后压缩以及图片旋转问题
一、问题针对旧项目翻新，旧的项目是使用lrz（官网）插件压缩图片，17年的项目了使用原生js写的，要翻成vue+webpack，同样使用lrz压缩图片时在部分小米手机和ios就会出现图片旋转的问题，其实不压缩图片时图片就是旋转的，就想有没有一个压缩组件又可以压缩又可以解决原本图片的旋转问题。二、解决最终找到了这个宝藏组件compressorjs，可以兼容安卓和ios解决旋转问题，其实在这之前试了lrz-lw等压缩组件可以解决ios的旋转但是小米手机一直不行。可以使用测试链接来拍照上传看看是否兼容
2021-04-22 14:39:40
697
2
原创 html2canvas页面滚动时截图不全空白问题
一、问题h5项目中有给上传的图片加天气、地理位置等水印信息需求，本来想用cavas画，但是代码又长又臭，样式也不那么灵活。然后想到用html2canvas，我可真是个小机智。在页面内容不多的页面上没有问题，效果也不错，但是内容很多会滚动的页面就出现了截掉一半内容的情况。这是为什么呢？二、解决一番查找之后，在官网看到了scrollY属性，这个属性官网注解是渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed），我要截图的元素正是fixed定位的，所以截图渲染的时候元素在画布上相对Y轴
2021-04-20 16:14:17
2389
原创 手把手教你使用npm和vite 2.0创建vue项目（非ts），配置打包环境
Vite 需要node版本 >= 12.0.0，使用node --version 查看当前node版本，过低的话需要去官网下载更高的可用版本。1、创建项目：使用npm，yarn的同学可以去官网查看此步骤使用 npm --version 查看npm版本，然后创建项目：# npm 6.xnpm init @vitejs/app my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init @vitejs/app my-vue-app --.
2021-03-22 17:38:18
3976
转载 Vite 2.0 搭建 Vue3 移动端项目，vant框架
尤大送了新年礼物之后，vite2.0就逐渐被尝试使用了，作为一个前端就要保持与时俱进，因此跟着这篇Vite 2.0 搭建 Vue3 移动端项目搭建起了第一个vite的项目。大型的公司项目还是要使用稳定的webpack，vite2.0可以先做了解和尝试，毕竟要紧跟技术前沿才不会被淘汰。...
2021-03-16 13:55:21
694
原创 vue动态组件中使用keep-alive缓存遇到的
认真阅读本篇文章并实践大约需要15分钟，时间紧迫可以直接跳至【二、问题解决】。一、问题描述问卷列表页list进入到填写问卷页question，问卷页question进入题目详情detail页查看题目详细说明，详细说明页返回题目详情时保留已填写题目的答案，因此给question页用vue的keep-alive来缓存，在router/index.js中给question的meta添加keepAlive属性：{ path: "/question", name: "question", c
2021-03-13 15:30:07
456
1
原创 立flag
今天开始，一天一个小技能：深入理解一道面试题、做一道leetcode或者读5页书并实际编码理解。小伙伴们一起打卡哟，冲鸭❤菜鸟准备今天深入防抖节流，嘿嘿嘿~
2021-03-07 10:12:41
144
10
转载 使用element ui实现点击按钮预览图片
element ui点击图片可以放大预览，那能不能点击按钮预览呢？看官方文档大图预览的previewSrcList感觉应该有个预览的组件，于是就去搜索了一下，发现了这篇文章：版权声明：本文为CSDN博主「qq_39906719」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：element UI自带的图片预览插件，实现点击按钮预览图片列表 el-image-viewer真是guud！如果本文对你有些许帮助，动动手指点个赞吧（记得给原博主也点一个哟），你
2021-02-26 13:23:33
2907
原创 Quasar CLI新建项目时，quasar dev命令报错：Missing .babelrc file...
一、问题为了迎合海外项目公司决定尝试quasar框架，按照官网的步骤创建项目之后运行发现项目跑不起来，报Missing .babelrc file...二、解决一番查阅之后发现是quasar cli版本的问题，需要安装最新版本：如果使用npm：npm install -g @quasar/cli如果使用yarn：yarn global add @quasar/cli然后再quasar dev就跑起来啦。如有雷同纯属巧合，如有错误请指出，原创文章如需转载请标明出处哦
2021-02-02 11:28:54
2926
7
原创 responseType为blob的请求，如何获取错误信息
一个请求如下：axios({ method: 请求方式, url: 接口路径, data: 接口参数, dataType: 'json', responseType: 'blob', headers: { // 项目中请求头需要的信息（如果不需要可不写），如用户登录信息验证： authorization: localStorage.getItem('authorization') }}).then(response => {}).catch(err
2021-02-01 13:56:14
19197
19
转载 vue中computed和watch的区别和使用场景
之前不是很明白的理解computed和watch的区别和具体使用哪个更合适一些，然后去官网上看了官方解释，是可以明白的。最近看到一篇博文写的让人看了之后恍然大悟，特意记录分享。主要区别点在于：作为计算属性的变量：应是受到data或props中一个或多个值影响的；作为watch的变量：应是该值改变时影响到其他值或想要根据该值的改变做些处理操作的。土豆同学的原文在这里：vue中的watch和computed详解，推荐！...
2021-01-30 17:56:31
213
原创 js window对象之h5判断所处浏览器/APP环境
阅读本篇文章大约需要3分钟。今天来说一说window对象的navigator属性，话不多说上代码：// *以下均为博主当前使用的谷歌浏览器输出情况navigator.appCodeName // 浏览器的代码名，如：Mozilla。navigator.appName // 浏览器名称，如：Netscape，一般用以区分不同的浏览器。navigator.appVersion // 浏览器版本，如：5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537
2021-01-29 18:11:43
2896
原创 vue + webpack + element ui自定义主题使用scss踩坑记录
阅读本篇文章大约需要4分钟，可以直接搜索你现在遇到的坑无需全文阅读，如果不是踩坑而不小心打开了这篇文章可以略读，建议收藏以备。一、问题描述项目中原本没有用scss所以需要按照下面来安装npm i sass-loader node-sass --save-dev好的，坑来了！二、好多坑① 错误："py.exe" is not in PATH or produced an error gyp ERR! find Python gyp ERR!解决方法：以管理员身份运行命令行：npm
2021-01-25 10:38:20
1454
原创 js日渐趋于同步的异步处理方式
js是单线程依赖异步处理机制的一门语言，今天就来说一说js异步处理的发展。一、回调函数异步处理机制就是阻塞的任务就先跳过，等到阻塞结束在回调返回里再执行。如下代码：console.log(1)setTimeout(() => { console.log(2) // 阻塞1秒}, 1000)console.log(3)没有异步处理的同步语言的话会等待阻塞，拿上面的代码来说就是先输出个1，然后等啊等输出2，最后输出3。但是js的异步处理机制不酱紫，它会按1>3>2的
2021-01-21 17:52:25
165
2
原创 js 中的console你会用吗
阅读本篇文章大约需要2分钟，如果你有充足的时间，可以跳至文末参考文章细品。我在调试项目的时候一般用的打印就是console.log()，其实js的console还有其他更强大的信息输出，让我们一起来康康！一、不同的输出信息console.log('正常信息') console.info('普通信息') console.warn('警告信息') console.error('错误信息')这样输出我们在控制台就看的更清晰啦~二、计时console.time('timeConsumi.
2021-01-18 17:36:19
308
原创 前端代码中的一些css、js、html规范
一、问题来源以前以为用eslint是基本，但是新加入的团队代码刷新了我认知：eslint基本都没有在用。好在新的领导者正致力于代码规范，所以我也想借此机会整理一下一些我正在用到的前端代码规范，并希望前端的亲人们看到对方的代码比人更亲切。二、一些规范基于eslint的一些规范和对代码长得好看有些许强迫症而整理了少许正在用的习惯，仅供参考。1.命名规范（1）文件夹、文件、类选择器、链接（包括链接上的参数）：全小写，见名晓义且简短但不过度缩写，单词之间使用横杠即：- 连接：例：search
2021-01-14 11:21:43
231
转载 element ui修改主题色
问题：公司PC端项目用的element ui结合vue、webpack，没有用到scss，并且要求用公司高大上的主题色，所以查看官方文档的命令行主题工具中给出的方法进行大逆不道的修改主题色，结果叛逆果真受到了惩罚，报错：ReferenceError: primordials is not defined解决方法：多方查阅，找到了真实有效的秘籍，做下记录以便后续参考。引用标注：引自WhyNot同学的element-ui 自定义主题的坑（ReferenceError: primordials i
2020-12-30 17:08:51
314
原创 微信小程序管理后台添加了域名之后开发者工具依然报错
一、发现问题项目中画分享海报中有用户头像，之前一直挺正常的，今天突然图片画不出来了（页面显示该链接的头像是没有问题的，画图会报错），开发者工具中看到如下报错：二、解决问题这很简单嘛，让后台管理配置上这个域名不就好了。于是添加上了，但是开发者工具死活还是报这个错啊。一番纠结之后关掉开发者工具，重新打开发现它就好了，就这么好了！！！后台添加了之后开发者工具理应更新，可能这也是个bug，...
2019-04-10 17:57:15
2220
原创 vue中h5项目怎么使用weui
注：项目使用vue cli脚手架，最新版脚手架创建项目参考这里一、安装weui安装weui js文件和css文件：cnpm i weui.js weui --S二、将文件引入项目中在main.js中添加如下代码：import weui from 'weui.js'import 'weui'Vue.prototype.$weui = weui三、页面中使用具...
2018-11-29 16:17:35
5949
原创 微信小程序绘制网络图片的问题
一、问题描述我的绘图过程是这样的：1.创建画布；2.绘制一些内容，绘制到网络路径的图片，绘制接下来的内容；3.draw出图片，canvasToTempFilePath生成图片。开发者工具一切顺利，手机上显示不出网络路径画的图片。二、解决办法查看了多篇文章之后发现，网络图片下到本地是需要时间的！所以，在画到网络图片的时候再下载图片可能来不及了，具体解决方法有两种，原理是一样的。...
2018-11-26 15:54:50
1248
原创 移动端适配终极大招
前端工作至今终于找到一个比较理想的适配方案，觉得颇为好用，特来分享。原文链接：https://www.w3cplus.com/mobile/vw-layout-in-vue.html原文作者讲解很是详细（我看到的时候还没有收费哈哈哈），特意总结记录一下，项目建立在vue基础上，vue起步可以看这篇文章。注：此篇文中用到的vue-cli已有更新的版本，可自行到官网查看学习。主要总结一下需...
2018-10-25 19:23:46
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人