javascript
yunchong_zhao
这人比较懒,不喜欢写简介
展开
-
js原生设置cookie和获取cookie 不需要引入什么插件
经常用本地缓存 可能cookie用的少了就不会用了,其实不然,有的时候还是要用到cookie的。这玩意很简单,不需要引入什么插件 自己编写两个方法即可。直接拿去使用不用谢 关注我 持续更新前端知识。原创 2023-03-16 09:52:02 · 97 阅读 · 0 评论 -
vite项目中 引入本地word文档,docx文件渲染到本地
又是一周休息的时刻了 关注我 持续更新 前端知识 帮助刚入行的前端童鞋一点,能帮点就帮点,都是踩坑的经历。在本地渲染很简答 需要一个插件 就可以了。这个样式注意下 如果是在移动端使用的话。原创 2023-03-10 21:34:44 · 171 阅读 · 0 评论 -
微信公众号h5关闭当前窗口
有的时候我们h5支付成功之后 需要关闭整个窗口。关注我 持续更新 前端知识。这个时候可以有两种方式了。原创 2023-03-10 21:26:15 · 93 阅读 · 0 评论 -
html2canvas 生成h5海报图片底部有白边
如果背景是一个背景颜色的话 其实还是比较好搞的将 hmlt2canvas的背景图改成和背景色一样就好了。这个大概率就是因为定位最后拍照的那一刻偏移导致的。这样白色边线 就看不见了。关注我 持续更新 前端知识。原创 2023-03-10 21:23:29 · 136 阅读 · 0 评论 -
ios点击input输入框 页面变大 (禁止浏览器缩放)
本来这个东西是为了优化用户体验,手机上点击输入框太小了 所以会在用户点击的时候放大屏幕中的内容。user-scalable=no 这个加到html中的head中。关注我 持续更新前端知识。我们其实是可以禁止的。原创 2023-03-02 20:14:02 · 1360 阅读 · 0 评论 -
周末无事做一个,左右滑动的容器,底部有滑动进度指示的 前端小demo(常见于移动端)
先上效果图吧 其实还是比较简单的,就是监听上面滚动的距离 占 父元素可滚动距离的百分比进行 在手机上查看效果更好。啥都不说 先上例子 这个在移动端非常常见哈!我们web前端 什么小程序和h5其实也会碰见。关注 长期更新前端相关知识。原创 2023-02-04 10:43:22 · 126 阅读 · 0 评论 -
vant4 + vite3.* + vue-router@4.* + pinia 模板
我好像没有找到现成的,只好自己简单配置了下,有需要的童鞋直接拿去用。原创 2023-01-03 15:03:05 · 130 阅读 · 1 评论 -
微信内置h5浏览器 getBrandWCPayRequest支付
最后还有一个小问题就是 如果你的微信支付商家是 微信那边特约商家的话。支付完成后 会把你h5网页关闭 这个需要你参加那个“点金计划”// 有一个点需要记住 就是那个时间戳那块是字符串哈 如果接口给你返回的是 int类型的话 记得修改下。通过这个API进行微信支付,好的一点是不用在引入那个weixin-jssdk那个文件库了。但在新版本的微信中其实都不建议使用这个方式进行支付了 都推荐wx.chooseWXPay。但是吧微信到现在 也仍然支持这个方法。关注我 持续更新前端知识。具体公告详情 请查看。原创 2022-11-22 10:35:22 · 2609 阅读 · 0 评论 -
将html2canvas 生成的图片传给接口
但是吧 有的时候就需要通过html2canvas 生成一张图片,然后拿来上传给接口,这种在用户看来好像是一种“隐式上传” 因为用户感觉不到,我生成了一张图片然后进行上传!好了不扯了 直奔主题吧!因为正常来说 我们上传图片 一般都是通过input:file标签。用户进行选择一张图片,然后进行上传!这个样我们的问题就迎刃而解了。我们看到了 这个file构造函数。哇哦 看见了 上传的文件资源了。然后把这个 上传给接口 应该就是可以了。然后就是 我们能不能通过FIle 构造函数生成一个file类型。原创 2022-10-02 20:04:52 · 1276 阅读 · 4 评论 -
js 正则匹配连续的字符,一般用于密码输入框(禁止输入连续的字母或者数字等)
相信广大网友可能碰见过这样的一些网站,就是设置密码的时候, 如果我们设置连续的字母或者数字,会提示我们的密码比较简单 不让设置,特别是一些支付密码,如果你设置六位连续的数字, 比如: 111111, 66666,888888等。是不是很容易破解呢对我们前端来说,在用户输入完成之后,就需要进行判断用户输入的是否满足条件,首先你可以不通过正则匹配判断用户输入是否满足条件 比如不过这样看起来 是不是太low。哈哈哈🤔相信很多童鞋肯定喜欢正则匹配了,那么联系的字符要怎么写呢?原创 2022-09-20 09:08:10 · 2412 阅读 · 1 评论 -
uniapp h5使用原生的input标签
其实在uniapp中我们编译h5平台的时候,会发生我们使用input标签都会被二次封装,我们想给这个input原生标签加的类名和id都会加到最外层的包括的uni-input自定义标签上。我看有人问过 为啥不加个什么属性,放置进行编译,好像人家说那样做的话 表现的和文档就有所不同了 所以才不那样做。有没有什么方法 能防止它被转义呢,目前好像没有有点难受,呢。总体上来说 uniapp 还是很不错的。但是我们可以通过其他的方式。关注我 持续更新前端知识。原创 2022-08-24 16:56:34 · 1713 阅读 · 1 评论 -
vue作用域插槽,初级vue开发进阶必备知识之一, 实现数据和ui分离
上来先介绍下博主哈,之前写的是jq项目,后面直接就转react,现在业余vue开发者,作为一年react开发经验,一年jq项目, 菜鸟vue水平,在这里扯一扯 博主对vue插槽的看法哈如果我面试的vue初级开发,我会问你有没有自己封装过组件,你说有的话,我会继续问你 有没有用到插槽呢, 如果用到插槽的话,说下你对作用域插槽的理解呢, 如果你说的可以,我就会当场说 你明天来上班吧,工资好谈呢.包括你以后想进阶成为高级vue开发那么你必须要知道怎么用slot-scope去做一些数据和 ui 分离的封装什原创 2022-05-27 11:23:55 · 350 阅读 · 0 评论 -
THREE.AxesHelper is not a constructor
这个是因为最新版本的 three.js 已经更新这个api的名字 不再叫这个了改成了。new THREE.AxisHelper()但是文档上还没有更新 我看最近的一次代码更新是七天前 但是文档国内外的哦度没有更新学习three.js 算是踩的的一个坑吧...原创 2022-05-17 20:49:26 · 2371 阅读 · 1 评论 -
一行css代码让整个网站变灰, 通过js控制定点触发和关闭
今天是5.12是个特殊的日子,有的时候吧 会把整个网站变灰的需求这个我们用css过滤器 一行代码就能实现了filter: grayscale(100%);问题是 出在定点触发 这块,我们可以通过js 来实现核心就是时间的判断这块比如: 我们要在5.12凌晨十二点触发 到 5.13的凌晨关闭就可以这样写// 原生js 在三大框架中 都可以直接拿过去使用let nowTime = new Date().getTime(), overTime = new Date("2022/05/原创 2022-05-12 09:11:23 · 1286 阅读 · 0 评论 -
vue 全局注册组件,vue2 vue3两种方式
主要是有的组件 我们可能很多页面都会用到 这个时候 为了避免每个页面组件都引入,a.vueimport header from "@/components/header.vue"b.vueimport header from "@/components/header.vue"c.vueimport header from "@/components/header.vue"这样就造成很大的代码重复了 是不是很难受因为现在vue3 也慢慢替换vue2 但v2可能还是主流 所以这里我写出原创 2022-04-20 17:00:32 · 1444 阅读 · 3 评论 -
uniapp 实现无感刷新token, 适应大多数项目
不管你是用taro uni 还是vue-cli 或者 react-cli 刷新token这块一通百通 本质上 都一样我之前讲了一个是 在响应拦截哪里做token刷新 其实这样做还是不好的,因为这样我们发起了请求, 相对来说 还是在请求之前做比较好 那样可以避免 几次请求吧因为在 axis 中有帮我们处理的拦截器 在uniapp 中也需要我们做一个拦截器这里直接使用uniapp插件市场找到的一个。 但是其中很多我们可能用不到 我就给删减了很多。在common下创建一个 http.js我这里的是最简原创 2022-03-10 16:33:46 · 6453 阅读 · 2 评论 -
Mac使用pandoc 将docx文件转换成html文件 快速实现协议文件的转换
可能有一点让人很难受的就是 如果网站要更换整体的协议和政策时候,运营会给我们一个doc文档 或者docx文件 让我们转换成html然后放到网站中这里就介绍一个比较好用的工具mac安装brew install pandoc查看自己安装成功的话brew -h转换成html5pandoc -s example.docx -t html5 -o example.html最后发现转换成功了。然后就可以放到你的网站上了。还是比较方便 当然这个工具不仅仅是能转换html md.txt 都原创 2022-03-03 14:38:27 · 599 阅读 · 0 评论 -
前端缓存列表数据 设计思路和处理,应对大量并发的问题简易处理方案
我一直觉得 前端程序猿的水平有的时候真的和他所处的公司处理业务也有一定的关系公司有大量的并发业务处理,这个要求前端也要掌握一定的优化本领,记得之前当我还是小白的时候看见的一道面试题js前端面试题,js实现最多发送三个并发请求,后续有多个请求在等待发送,请设计思路?对我我这个小白来说实际的业务没有碰见过这个业务 确实还真的不好想出来解决方案,难就难在创造一个以前没有见过或者经历过的东西.应该大多数人都会难在第一步 可能第一步都迈不出, 难就难在第一步吧.好了 闲话说的有点多了 我们步入正题原创 2022-02-25 00:33:22 · 1315 阅读 · 0 评论 -
lottie-web的使用, 好看的动画使用, 跳转到动画的第几秒播放
直接先上效果哈有些动画效果 要很逼真的效果,不管是原生的css 还是 gif动图 可能效果都不是太理想吧选来选去 最后选择使用了。lottie-web 这个插件他这个是根据一个json文件渲染动画如果json中有引用的图片的话,你用ae做出来的图片最好放到静态服务器上,然后更换json中的本地图片路径换成删除原来u的那个字段使用方法安装npm i lottie-web --save or yarn add lottie-web --save使用import lottie原创 2022-02-21 20:23:40 · 4410 阅读 · 0 评论 -
uniapp,vue中h5项目实现数字密码键盘
本来原生的h5 直接input type=“password” 这样会发现 也不是说不能输入数字。只是让用户多了一步操作 的切换到数字的情况才能输入。 不知道安卓手机如何 反正苹果是这样的 (这样体验不好)即使是你自己做一个数字键盘也是不行的,响应比较卡顿(tips: 不让input输入框 弹出软键盘,直接设置readonly=true就可以)但是有没有这种 password + number 这种组合形式嘛。好像是没有吧但是我们可以做一个出来。利用vue的双向绑定快速实现tips 在pa原创 2022-02-19 15:26:48 · 2403 阅读 · 0 评论 -
uniapp 中onPageScroll中使用防抖, 以及this获取问题
哎。本来我想着我的想法也没错。onPageScroll: debounce((e) => { this.show = e.scrollTop > 800}, 300),但是一看报错就知道为什么了。因为this丢了。哎。大意了。好久没犯过this的相关问题了这个时候 就不能用 箭头函数了。我之后把自己书写的防抖函数也去掉了箭头函数。这样才获取到this 才正式没问题浏览器环境下,匿名函数默认的this是指向window,箭头函数本身没有自己的this,所以从所在环境的上层环境的thi原创 2022-01-26 21:01:24 · 2753 阅读 · 1 评论 -
create-react-app新版本快速搭建一个简易的路由页面
因为create-react-app 没有给我默认搭建路由所以只能让我们自己去搭建了 不过 简单的路由还是很快可以搭建好的npm i react-router-dom --saveor yarn add react-router-dom --save这里是 react-router-dom v6版本的哈然后就是使用了index.jsimport { BrowserRouter } from 'react-router-dom'ReactDOM.render( <BrowserR原创 2022-01-25 17:53:30 · 946 阅读 · 0 评论 -
uniapp文本支持换行,后端返回一串文本
怎么说呢。view标签是不支持的,因为接口返回的文本中函数 \n 换行的提示的这样说我们得找一个支持换行的才行text标签是支持 换行的。所以<text>这里放你的文本就行了</text>关注我 持续更新 前端知识...原创 2022-01-25 09:37:51 · 1501 阅读 · 2 评论 -
css制作一个简单的上下跳动 动画
如果只是简单的几个小动画 确实没必要引入一个动画库 去做 除非你的项目中很需要各种各样的动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi.原创 2022-01-20 20:57:44 · 1960 阅读 · 0 评论 -
vite中引入vue-router路由,以及文件简称
感觉 vite 有点学create-react-app了, 脚手架 也不给我们自动搞好 vuex 和 react-router ,让我这衣来伸手饭来张口的人感觉生活难了好多。好可恶啊对我这个小白,不想学习 只想吃老本的前端程序员来说 太难了,但想了想为了挣钱还是老老实实去学习吧。好了不恶搞了 开始步入正题了。vue用着真爽 vite真快, 推荐其实只要你是vue2 的熟练使用者的话,自己简单配置下 还是可以因为vite搭配的是vue3 那么 vue-router 也应该是搭配 vue3安原创 2022-01-19 17:50:05 · 8169 阅读 · 1 评论 -
taro中 scrollview下拉刷新 状态没有复位,一直保持刷新状态(小程序)
其实在scrollview中只要我们开启了自定义刷新refresherEnabled: true当用户下拉的时候 会出去 加载状态但是奇怪的是 他是不会自己回去的。 这个需要你自己设置因为 它不是双向绑定,不会自动帮你实现的const { refresherTriggered } = this.state<ScrollView className='scrollview' scrollY refresherEnabled refresherTriggered=原创 2022-01-17 16:59:10 · 3816 阅读 · 9 评论 -
小程序中元素滚动到元素的底部, 一直保持在底部
如果是在web端的话 这个还是比较简单的,直接设置那个元素的 滚动他底部就可以了但是小程序中 只有 页面滚动 pageScroll但是这个时候 我们就搞不了吗建议将长列表 改成 ScrollView滚动列表进行操作,然后通过设置这个列表的scrollTop 进行设置我这里拿taro举例子。其实原生小程序和uniapp 差不多和这个一样<ScrollView className='scrollview' scrollY scrollWithAni原创 2022-01-17 16:50:25 · 1483 阅读 · 0 评论 -
js删除字符串中的最后一个字符
var str = "hello world" // 方法1 console.log(str.slice(0, -1)) // 方法2 console.log(str.substring(0, str.length - 1)) // 方法3 console.log(str.replace(/.$/, '')) // 方法4 str = str.split('') str.pop() console.log(str.join(''))关注我 持续更新前端知识...原创 2022-01-12 11:21:43 · 333 阅读 · 0 评论 -
taro中全局引入某个sass文件
之前的一个taro项目。前辈们每一个样式文件 都引入的项目中用到的某个定义基础变量的文件,随着项目越来越大 引入的地方无比庞大。一旦文件发生大的变动。我光更改路径就改了半天。一旦那个页面忘记更改 就会发生一个小灾难了这个需要我们在配置文件中配置下就行全局引入某一个sass文件module.exports = { // ... sass: { resource: path.resolve(__dirname, '..', 'src/styles/variable.scss') }}原创 2022-01-11 11:37:06 · 1561 阅读 · 0 评论 -
axios 并发请求时,刷新token的处理方法
背景: 后端设计token 过期时间是四个小时,但有一个用户总是挂着账号,然后就投诉了好几次,账号明明登录着为啥就让我重新登录, 说什么token过期,哎 对客户来说 这个确实是个难以忍受的 bug算是吧。想起来大学的时候学过 软件测试。什么是bug。bug就是没有达到需求的都可以叫做是bug 当时可能有点广泛哈。????有点扯远了其实这个问题 我们可以理清下思路哈首先并发请求 肯定不至于 每一个都需要去刷新token 只需要第一个知道过期的那个请求去刷新就可以。这个时候需要我们怎么做呢?就是搞原创 2022-01-06 17:54:43 · 1325 阅读 · 4 评论 -
vue项目 axios上传图片到 阿里云 oss, 跨域,405, 400问题处理
跨域问题服务器端处理。添加请求允许的请求报错。405使用 formData格式请求数据let params = new FormData()注意 content-type 类型必须是 Content-Type: multipart/form-data如果有全局设置的axios 的请求拦截的话,注意 防止被更改哦请求报错 400先检查下参数有没有写错 大小写什么的。注意 请求的文件流 须放到最后一个位置上let params = new FormData()params.ap原创 2021-12-22 10:08:58 · 3272 阅读 · 0 评论 -
js判断元素是否进入可视化区域
如果是用来做一些悬浮或者图片懒加载,列表无限滚动等等效果,会用到判断是否提前 进入到用户的视野中的逻辑其实这个方法也有几种,我这里只是讲解其中的一种,通过 offsetTop 距离高度 和 scrollTop 滚动高度 来判断的一种方式公式: 元素距离顶部的距离 - 滚动的高度 <= 设备可视化高度即为 进入了 可视化区域当然 你也可以说 元素高度一半进入可视化区域才算 真正的进入 也行var bottom = document.querySelector('#bottom');//原创 2021-12-20 14:19:02 · 1277 阅读 · 0 评论 -
原生js修改元素样式的几种方式
用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式,有的时候确实需要我们通过原生的方式进行操作。今天就说几个 通过原生j s方式修改样式的方法最简单的就是 直接dom.style如果是 长一点的属性名字的话 是通过 驼峰的写法比如。“backgroun d-color” => backgroundColorvar bottom = document.querySelector('#bottom');bottom.style.backgroundColor = '#原创 2021-12-20 14:11:14 · 20079 阅读 · 0 评论 -
原生js, 监听移动端浏览器进入后台的情况,和切换到浏览器的操作
最近遇见了一个小问题,就是我们支付的时候,会开启一个轮询的情况,但发现用户 把浏览器切换到后台之后,轮训还是继续,这个就有点交互上的小问题了.查询了下 浏览器有没有 进入不可见的情况的监听事件,没想到还真有之前我还一直很纳闷, uniapp 是怎么监听onShow 和 onHide的方法。看了这个事件后,我似乎有些清晰了。visibilitychange 监听文档的是否可视化。同时查看浏览器可视化状态是什么Document.visibilityState 可见性状态**Document.vis原创 2021-12-10 20:17:49 · 3545 阅读 · 2 评论 -
js 判断是否是iPhone X, 针对iphonex 单独处理一些样式
因为iphonex 底部有一个横杠。导致和其他的手机底部样式有点不同,如果你的网站底部要做一些底部悬浮的效果的话,那么就得注意下 这个iphonex的情况,其实本来是在安卓上是正常的呢,其他的一些iphone也是正常的呢可以根据i phonex设备进行单独处理const isIphoneX = () => { return !!(window.navigator.userAgent.match(/iphone/i) && window.screen.h原创 2021-12-10 11:35:53 · 1028 阅读 · 0 评论 -
iOS唤起记住密码的数字键盘,输入的时候发生闪烁的问题
主要是数字键盘下面贴着type=password类型的密码输入框,浏览器记住密码,每次在数字键盘输入的时候,会自动尝试填充下 导致 会有闪烁问题的发生,给用户体验也不好很多网友也说了,在数字键盘下面写一个“空”(用户看不见)的输入框记住如果是vu e的话。 设置v-show 不显示是不起作用的<input class="clearFlicker"/>// 清除ios闪烁效果 .clearFlicker { height: 0; min-height: 0;原创 2021-12-10 10:58:13 · 2468 阅读 · 0 评论 -
html2canvas 不支持图片的object-fit样式
我本来给图片设置了object-fit:cover;但是 html2canvas画完之后 竟然消失了这个就很奇怪了,包括图片的圆角也没有了,我翻了翻一些文档说子元素设置相对于父元素宽高 然后在设置object-fit (我试了试不行pass掉了)就是通过设置父元素弹性布局。什么鬼我试了试也是不行最后看一个博客是 修改源码 最后成功了。本来想找到那篇博客呢。后来找不到 但是代码我这边还有保存我的html2canvas和那个博主的版本还不相同但是代码 没变多少找到你的项目中的node_原创 2021-12-06 21:16:30 · 1171 阅读 · 1 评论 -
使用html2canvas 生成h5项目中需要的海报效果,uniapp 生成h5海报
分享中有一个业务功能就是海报分享,把当前页面的数据整理下 然后生成一个图片让用户进行保存 然后发给其他的用户 扫码进入活动中,这个也是推广的一种形式吧对当前页面进行截图保存转换图片。那么就需要我们今天的主人公。html2canvas。首先进行说明,这个html2canvas也说了 毕竟只是对页面的进行截图 并不是达到原来的看到的效果那样,会有点模糊The script allows you to take “screenshots” of webpages or parts of it, directl原创 2021-12-03 19:47:37 · 1041 阅读 · 1 评论 -
SyntaxError: Invalid regular expression: invalid group specifier name. safari和ios报错
其实这个问题 我当初在谷歌上测试的好好的 然后就上safari进行测试。页面直接变成空白了就是报的这个错误一看说我那个正则表达式那里写错了。查了查 才知道 原来ios 对js中正则表达式的 几个新增的断言验证不支持(?!)零宽负向先行断言(?=)零宽先行断言(?<=)零宽后行断言(?<!)零宽负向后行断言。这四个玩意 如果你的正则中用的话 建议更改。上面的那个正则也就在谷歌中进行了支持。其实看望网上的有的文档说 换成 构造函数类型的就可以。我试试了还是不行,除非换成其他的实现原创 2021-11-22 21:27:17 · 2817 阅读 · 0 评论 -
vuex 中各个模块之间互相调用 actions
还是会出现这样的需求的,我们的业务中需要两个module中的数据 进行处理, 然后一个actions中的数据 依赖另一个module中actions的执行结果 这个时候就需要我 执行另一个modu le中的actions了其实调用还是比较简单的举个例子就是 a模块要调用b模块中的actions那么我们在a模块中就应该是书写是module aa.jsdispatch(‘b/getListData’, params, { root: true }){ namespaced: true, act原创 2021-11-20 11:57:56 · 2217 阅读 · 3 评论