工作中接触到的
工作中遇到的及需要学习的部分积累及总结
33子~
一个立志成为前端工程师的柿子
展开
-
【工作】keep-alive+van-list 实现滑动位置保留
这样实现是不是好多了呢?不需要考虑ios和安卓差异性的问题。不需要考虑这个页面需要缓存滑动,再次实现滑动的问题。也不需要考虑数据没返回之后,滑动失败的问题。欢迎大家一起交流~~原创 2023-02-07 14:57:00 · 721 阅读 · 0 评论 -
【工作】-pdfh5
移动端需要类似直接展示pdf的场景,可以使用pdfh5来解决~原创 2023-02-06 18:12:53 · 149 阅读 · 0 评论 -
【工作】vue对比数据差异展示
调研了很多比对的插件,由于我们的数据是动态的且有一些业务逻辑存在,所以最后采用的是html-diff这个依赖。对应的链接为【html-diff提示:以下是我的解决办法,欢迎大家积极留言交流更好的解决方案以上就是今天要分享的内容啦,本文仅仅简单介绍了html-diff的使用从而解决实现比对的业务场景,如果大家对于以上场景有更好的实现方式,欢迎大家积极评论一起交流呀~~~原创 2023-02-02 17:25:16 · 2595 阅读 · 2 评论 -
【工作】van-list 分页查询数据切换页面后滑动位置保留
因为会多个请求,考虑可以一个请求,把分页参数pageSize修改为需要请求的数量。目前这样分页请求,会出现滑动停顿滑动停顿的反复,虽然loading展示,但是也可以看到这么一个交互。应用场景为从A页面点击到B页面,B页面操作后自动回到A页面,A页面滑动位置保留且对应项数据更新。2.在返回到A页面时,scroll有值,展示loading(要不然页面自己搜搜往下滑好奇怪)3.监听滑动,如果滑动高度curScroll与scroll相同,loading隐藏。数据是分页请求的,页面滑动也需要基于所有数据都拿到后。原创 2023-01-30 10:44:30 · 1032 阅读 · 0 评论 -
工作-safari时间格式
在执行new Date( string ) 的时候,不同浏览器会采用不同的parse,目前chrome两种格式都支持,而Safari只支持yyyy/mm/dd。原创 2022-09-05 14:53:31 · 545 阅读 · 0 评论 -
工作-数字字符串进行比较
这样一个场景,如果A收入的钱比B收入的钱少,那么就应该有一个友情提示,告知用户A收入的钱比B收入的钱少。最近测试童鞋反馈了一个问题,她那笔订单A返回的金额是15.00,B返回的8.00,但是我那个提示竟然非常突出的展示在了页面上。(当时我的表情如下:)这时候第一反应,让我直接拿着两个数字在控制台输出下。哦莫莫,我真的会栓Q。。一顿搜索之后,终于知道为什么了。像这种数字型字符串进行比较的话,这种比较为ASCII码比较,依次取每个字符,字符转为ASCII码进行比较,ASCII码先大的即为大,这时候就不原创 2022-06-21 15:12:07 · 475 阅读 · 0 评论 -
工作-iview的Tooltip+render函数
最近需要实现一个列表中一项展示部分文案,鼠标移动到该文案上,在左边悬浮提示框。比如iview组件内这种效果:因为使用的是render来进行渲染列表的,所以就需要在render中渲染Tooltip。原创 2022-06-08 16:45:59 · 699 阅读 · 0 评论 -
工作-一个依赖依赖的依赖导致的血案
背景(S)最近了解到一种写文档总结很好的公式,虽然说这个貌似是用在写简历上的,哈哈哈哈哈,但是我觉得万物皆可套嘛。我的文档也要越来越正规这样才有意义嘛~今天遇到了一个之前没有遇到的问题。简而言之,本地运行编译溜的一匹,很好提测部署,在部署平台上提测,等呀等,失败。。第一反应,是不是部署平台的问题,在点击一下,重新提测部署下,等呀等,失败。。what?(此处是一个外国友人撅嘴what的表情包,自行想象)任务(T)这不行啊,要今天上线的,得赶紧处理下提测失败!!行动(A)查看了下失败日志,说原创 2022-04-02 18:45:29 · 234 阅读 · 0 评论 -
工作-根据base64或者url获取图片字节大小
背景在上传图片时,发现如果图片过大,传给后端时会出现数据丢失的情况。如果统一压缩处理,又会出现原本很小的文件再次压缩导致图片严重失真。结合诸多背景,就需要在根据网络url或者base64拿到图片大小。再根据大小考虑是否需要压缩。参考一些文章,总结以下几种拿到图片大小的方式,方便后续自己使用:通过请求的content-length通过访问这个网络资源通过base64的长度通过生成img之后在load方法拿到size下面挨个说下这几种方法:1、通过请求的content-lengthva原创 2022-03-22 21:10:28 · 1695 阅读 · 0 评论 -
工作-相册上传&相机上传
背景今天开发遇到了一个非常奇怪的问题,前端逻辑相同,后端接口也是同一个。但是这时候奇怪的事情发生了(搬好小板凳,不清楚缘由会觉得很玄学)相机上传非常速度,非常正常相册上传非常缓慢,接口失败率90%这时候第一反应:原生的问题(哈哈哈,对不起)排查:打印原生回调的base64,拿到了。这时候第二反应:服务端的问题排查:同样的接口,只有相册不行,服务端也没做其他处理咦,奇了怪了,抓包,我不信我参数没传过去抓包,对了吧,服务端的问题,我穿过去了。这时候找来后端小伙伴帮忙一起查看这个问原创 2022-03-17 20:23:00 · 225 阅读 · 0 评论 -
工作-vue+@amap/amap-jsapi-loader
背景:最近又遇到了地图相关的东西,还额外了解到定位原来分好几种呀,真是涨知识呢,后续会对这个定位再额外出个小记录。因为之前对地图这里不熟悉呀,每一个新场景,导致我都需要提前了解一波,所以又来记录一番,方便后续使用,hhh。实现效果下面就是引入此依赖的各种代码了,仅供参考。(除此之外,如果对定位的位置不是要求特别精准的话,可以使用h5自带的定位,但是如果对定位要求比较精准的话,还是建议大家用高德的呦,具体差别,大家试一下就知道了,确实是非常大)在要展示地图的页面引入在重新绘制地图之前要把之原创 2022-03-16 18:17:38 · 550 阅读 · 0 评论 -
「工作」-vue组件监听props监听不到
背景最近在实现一个功能的时候发现,在一个vue页面中组件的部分一直不能展示,看了看代码,展示条件也符合啊,为何展示不出来呢?在仔细看了下逻辑,发现组件只有在接收props中的值发生改变的时候,才会执行下面的逻辑,才会展示内容。代码// 父页面<div class="nav"> <div class="nav-item" :class="{'active':type=='scatter'}" @click="onTabClick('scatter')"原创 2021-12-01 18:50:41 · 1172 阅读 · 0 评论 -
工作-iview render Input输入一个字符自动跳出焦点
背景有一个场景,需要在表格中渲染输入框。这简单,但是,当我美美的欣赏的时候发现了一个问题。嗯,我输入一个字符后,就失去焦点了!这是why?删除一个就失去焦点了!代码const desc = h('span', { style: { margin: '0 10px' },}, "至");const maxDistance = h('Input', { props: { type:'text', value: params.row.maxDistan原创 2021-12-01 18:32:28 · 784 阅读 · 0 评论 -
工作-uniapp加载服务端返回的index.html以及token携带问题
背景最近在用uniapp重构我们的项目,因为原本的app中内嵌了非常多的H5页面,更严谨的说是app内嵌着weex页面,weex嵌套着H5页面,复杂程度可想而知。uniapp这个一套代码,多端使用的优点真的是非常打动人,再也不需要搬来搬去,这感觉别说有多爽,但是随着不断开发,也会遇到一些各种各样的问题。项目中H5页面都是通过后端接口返回的(因为还没有彻底分离导致),在uniapp中直接把webview的url赋值上接口以及对应的目录就会有一个问题,接口会返回token错误❌。。解决通过不断搜索查询可原创 2021-09-23 15:11:02 · 1475 阅读 · 0 评论 -
工作-vue动态修改标题
背景最近做了好多事情,没时间整理,最近还是要每天固定整理一波新接触的东西,不断沉淀。今天就简单整理一下动态修改标题。VUE是一个单页面,一般我们都会在index.html中去修改我们要展示的标题。比如下面:但是如果在同一个项目下,不同的页面,我想要展示不同的标题应该怎么处理呢?解决搜索了一番,找到了以下一些办法。1、document.title=“xxx”这也是我本次采取的办法。(看好多博客说这个比较笨,但是我个人觉得还行啊) created () { document.title原创 2021-09-23 14:45:04 · 535 阅读 · 0 评论 -
工作-页面滑动到一定高度吸顶
背景在页面中间有一个固定的tab栏,当页面滑动到tab栏到达页面顶部的时候,tab栏吸顶。点击tab页面滑动到指定元素的位置。代码 <div class="tab"> <div ref="serviceTab" :class="serviceTabActive ? 'tab_title tab_after' : 'tab_title'" @click="goToServiceTab" > 服原创 2021-07-29 19:39:44 · 131 阅读 · 0 评论 -
工作-react组件通信
背景公司一个项目是用react去写的,之前也没有接触过react,所以对通信这里也不熟悉,借此机会,整理下这里,供以后参考。PS:看博客觉得这句话说的特别通俗易懂核心:谁的数据 数据的修改方式就谁里面定义 别人只能调用 需要处理的 把声明好的方法传过去父传子通信:通过props去接受。子传父通信情景 子控制父弹窗// 在父页面{ this.orderData && this.orderData.orderid && ( <Ord原创 2021-07-14 14:59:26 · 57 阅读 · 0 评论 -
工作-vue的keep-alive实现缓存
背景最近做的需求有一个场景,在登录页面有一个协议,用户点击这个协议会跳转到另一个页面查看当前协议,此时就有一个问题,当用户跳转到协议页面查看协议的时候,在返回登录页面,页面重新刷新了,之前填写的信息就不存在了。解决办法keep-alive有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。官方文档代码示例// App.vue<keep-alive> <原创 2021-07-08 10:53:39 · 125 阅读 · 0 评论 -
工作-版本号校验
背景最近排查一个bug,安卓手机一个按钮不展示,但是ios手机没有影响。经过排查代码才发现,这个按钮展示是根据后端返回的字段以及一个版本号来进行判断的。同一个账号,在安卓手机和ios手机返回的字段不一样这显然是不现实的,所以很显然,是由于版本号导致的这个错误。在看了一下逻辑,原来当时是在某个版本之后,才有这个按钮,所以有一个版本判断。现在中间已经差了起码5个大版本,可以说最基础的版本覆盖率肯定100%了。现在进入正题吧观察如下:具体为啥第二个会为false,我猜测是因为隐式转换的时候,3.10.1原创 2021-07-01 16:30:03 · 239 阅读 · 0 评论 -
工作-vue路由
记录一些日常工作中遇到的vue路由相关,积累。vue跳转打开新窗口const routeData = this.$router.resolve({ name: 'OrderDetail', query: { orderId: this.idStr, },});window['open'](routeData.href, '_blank');...原创 2021-06-22 16:10:03 · 47 阅读 · 0 评论 -
工作-H5活动页唤起APP
背景最近做了一个618活动页,当用户点击图片的时候,如果本地有APP,唤起本地APP;若没有,则跳转到app store下载。参考了很多文档,因为安卓和苹果以及各个浏览器还是有很大区别的。针对此次情景总结如下:安卓&iOS采用的是通过一段时间内,监听当前页面是否隐藏,如果隐藏了,就说明跳转成功了。PS:因为没有现成的API可以知道是否用户本地有APP,大家有什么好办法,欢迎说出来~~~// 点击图片唤起APP poster.onclick = function () {原创 2021-06-15 14:05:00 · 183 阅读 · 0 评论 -
工作-cookie信息请求没有携带
背景做了一个618活动的需求,因为原本这个页面是在服务器上直接运行的,所以这次顺便把它整理到我们专属静态页面的项目下面。但是出现了一个问题,就是在发起一个请求的时候,cookie信息没有携带过去。打印页面的window.location.href会发现都有拼接上一些token等信息。解决办法因为原本是通过后端一个接口返回前端静态页面的方式来实现的,所以也不存在跨域以及cookie信息携带不上的问题,但是这次是直接前端页面访问后端接口,所以需要xhr.withCredentials = true;来允原创 2021-06-08 15:44:36 · 710 阅读 · 0 评论 -
工作-VUE+vue-amap
背景根据VUE+vue-amap实现定位、搜索定位、移动地图反向搜索位置。因为以前也没接触过高德地图这里,所以趁着这次机会也整理下高德相关这部分。避免后续遇到啥也不晓得~主要其实是这两部分:// 首先是在main.js中引入需要用到的高德插件import AMap from 'vue-amap';AMap.initAMapApiLoader({ key: '高德的key', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.Pl原创 2021-06-02 14:21:37 · 230 阅读 · 2 评论 -
工作-触底刷新
背景刚刚做了一个需求,其中一个小功能是H5页面触底刷新的功能,因为直接接触小程序最多,直接用小程序API简直不要太好用,所以冷不丁不知道该去如何实现这个功能,一顿百度+翻一些成熟组件库,最后还是不知如何实现????。但是我不能放弃啊!!!(毕竟只有我自己一个前端,我觉得这个机会也很好,俗话说靠人不如靠自己!!)仅凭着稀有的记忆,费劲吧啦想起一些关于当前可视区高度等等。最后跋山涉水可算实现了这个功能,借此机会,趁热乎,来整理下这里的相关知识点。PS:以我现在的认知,我觉得一般都是借用这两种加载方式来实原创 2021-05-27 18:49:04 · 270 阅读 · 0 评论 -
工作-Vue的v-model的几种修饰符
补充一些以前没怎么注意,在工作中接触到的小知识点。.lazy并不是实时改变,而是在失去焦点或者按回车时才会更新。.number将输入转换成Number类型。.trim可以自动过滤输入首尾的空格。原创 2021-04-26 14:17:30 · 125 阅读 · 0 评论 -
工作-更改桌面图标
背景:因为微信小程序并不支持ios用户添加桌面,所以有一个引导ios用户的需求,当引导用户添加书签到桌面之后,默认图标是网页的截图。这样子很丑,并且没有桌面应用的感觉,所以需要换成我们自己的logo。解决办法:link: [ {rel: 'apple-touch-icon-precomposed', href: ''}, {rel: 'apple-touch-icon', href: ''}, ],因为我们的项目是Nuxt.js,所以通过配置head方法,返回一个对象。正常html原创 2021-03-02 19:39:10 · 114 阅读 · 0 评论 -
工作-window.open和window.location.href
背景:最近在做H5页面,当用户在浏览器读完引导之后自动打开小程序。原本一些按部就班,毕竟这一阵一直在搞外部访问的,但是当我测试的时候我发现,并不符合我的预期,在安卓机上弹出是否允许拦截弹出,点击允许之后新打开了一个空白页;而ios上直接莫得任何反应。原因:一顿搜寻了一番,拒说因为浏览器只有在认为click和submit在打开新窗口时(如果是_self则不会有此限制),这些操作是由用户主动触发时才是安全可以被执行,而不是用户主动触发的,浏览器会认为是弹出的广告进而进行拦截。解决办法:既然如此,那就不用w原创 2021-03-02 17:46:32 · 324 阅读 · 0 评论 -
工作-sass和css3选择器如何结合使用
背景: 最近一堆页面改版优化用户体验的需求,想着在旧页面还要兼容旧页面的代码,还不如自己重构一版来的快。所以连带了页面,样式都重写一版吧,哈哈哈哈哈,非常之爽啊~情境:跨行展示不同的背景色原代码在js中去判断的,可是css3选择器是不香嘛~,结合sass再结合BEM规范再结合CSS3~代码都节省了不止一点半点呀~@include e(text) { width: 100%; height: 140rpx; padding:24rpx 30rpx; box-sizing: bo原创 2021-02-24 18:21:27 · 154 阅读 · 0 评论 -
JS-import和require的区别
今天在当正在搬手头小砖的时候,一个同事告诉了一个关于我的bug当时,我???这个竟然会有报错,没道理啊!!!排查排查深入挖掘发现了是import和require的区别。搜索各种博客,了解到了它俩的区别。require// CommonJS模块let { stat, exists, readFile } = require('fs'); // 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;原创 2021-01-18 20:29:44 · 234 阅读 · 0 评论 -
微信小程序-记录判断当前环境
背景最近做了一个需求,是要外部链接点击可以跳转到小程序,所以就接触到了环境判断的问题~var ua = navigator.userAgent.toLowerCase(); var isWXWork = ua.match(/wxwork/i) == 'wxwork'; this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'; if (navigator.原创 2021-01-12 18:08:11 · 759 阅读 · 0 评论 -
微信小程序-开放标签
本篇背景最近做了一个h5的需求,不知道大家会不会这样,一直写小程序说实话提手有点忘了该怎么敲html。。。通过这个需求,还学到了很多东西:开放标签,JS-SDK等等,此篇作为沉淀下子的文章。PS:虽然写这个需求一顿咨询公司大佬,嘻嘻嘻。微信官方文档官网PS:微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫等微信特有的能力,为微信用户提供更优质的网原创 2021-01-08 16:09:55 · 1448 阅读 · 0 评论 -
ElementUI-<el-row>、<el-col>
公司用的是element-ui,在写代码的过程中,发现对<el-row> <el-col> 并没有搞懂到底啥区别,仔细看了下官方文档(所以就是以前看的不认真喽)<el-row> <el-col>标签是属于element的Layout布局控件,并且分成24分栏。可以理解为<div>=<el-row> 、<span>等于<el-col>。官网还提供了很多方便的属性,比如分栏间隔、对齐方式等。附上地址:官网地原创 2020-11-13 11:51:18 · 27530 阅读 · 0 评论 -
微信小程序-WXML转换类型
情景:需要在WXML中把字符串转化成数字类型解决:引入WXSwxs是小程序的一套脚本语言,结合wxml,可以构建出页面的结构。wxs不依赖于运行时的基础库版本,可以在所有版本的小程序中运行wxs与javaScript是不同的语言,有自己的语法,并不和javaScript一致wxs中不能调用其他javaScript文件中定义的函数,也不能调用小程序提供的api由于运行环境差异,在IOS设备上小程序内的wxs会比javaScript代码快2~20倍。在android设备上无差异。var.原创 2020-11-12 16:34:46 · 1396 阅读 · 0 评论 -
微信小程序-e.target和e.currentTarget
情景:e.target没有拿到想要取到的值,log一下在e.currentTarget中看到了,查了下两个的区别,如下:e.target:添加(注册)监听事件的对象e.currentTarget:指向的是触发事件监听的对象<view bindtap = "clicks"> 事件</view>// clicks 事件处理函数// bindtap 事件// e 事件对象clicks:function(e){ }总结:如果绑定的事件所在组件没有子元素.原创 2020-11-12 16:28:45 · 644 阅读 · 0 评论 -
JS-转为正数
情景:后端传过来的是个负数,前端不可以直接展示负数,需要转化下如下:原创 2020-11-12 14:43:21 · 669 阅读 · 0 评论 -
JS-时间戳
时间戳转化为正常时间最近遇到一个需求,但是后端传过来的时间是时间戳,需要自行转化下~在线转化工具时间戳分为两种,13位是毫秒,10位是秒__initData(time) { const date = new Date(time)// 时间戳为10位需*1000,时间戳为13位的话不需乘1000(time * 1000) var Y = date.getFullYear() + '-' var M = (date.getMonth() + 1 < 10 ? '0' + (date原创 2020-11-12 14:28:53 · 421 阅读 · 0 评论 -
JS-js最大值
今天碰到一个bug,提示服务端错误,最后排查排查原来是后端传过来的数字已经超过16位了,搜索了一番才了解到原来javaScript有个最大值。javaScript最大值为2的53次方===9007199254740992。如果超过这个值,那么js会出现不精确的问题。这个值为16位。...原创 2020-11-12 14:18:14 · 797 阅读 · 0 评论 -
微信小程序-广告相关
微信小程序广告分类近期有一个需求是跟广告相关,趁此机会,对微信广告这里进行了详细的了解。下面是对广告相关的大概介绍官方文档Banner广告微信官方文档也有写:<view class="adContainer"> <ad unit-id="xxxx" bindload="adLoad" binderror="adError" bindclose="adClose"></ad></view>Page({ adLoad() { con原创 2020-11-03 20:26:26 · 984 阅读 · 0 评论 -
微信小程序-ios屏幕可左右滑动问题
现象:苹果手机页面可以左右滑动引起原因:部分元素超出屏幕.ad-finger{ width: 152rpx; height: 75rpx; position: absolute; top: 156rpx; right:-8rpx;}// 或者下面的情况.ad-test{ position: relative; display: flex; justify-content: space-between; width: 100%;原创 2020-10-30 11:11:05 · 1584 阅读 · 1 评论 -
JS-Js异步编程四种方法
学而不思则罔原创 2020-10-30 10:58:30 · 333 阅读 · 0 评论