- 博客(146)
- 收藏
- 关注
RSS订阅原创 uni-app打开外部链接方式汇总
App平台可以使用 plus.runtime.openURL、plus.runtime.openWeb或web-view组件；1. 在App内部打开一个浏览器，加载这个地址，在App端打开，这个方法会新开内置窗口打开页面，而且自带标题栏和返回。注意：web-view组件可能会存在跨域，比如你要打开一个发布的公众号页面，web-view肯定是会跨域。在应用中打开一个外部的http/https链接的页面，h5通过window.open或是内嵌。该组件的行为是在app内打开外部浏览器，在h5打开新网页。
2024-08-15 11:07:10
369
原创 uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数
1、App端跳转微信小程序（注意id一定是小程序的原始ID，在小程序后台设置-基本设置里可以看到），App平台打开微信小程序，需要使用plus.share的。注意：与微信小程序跳转微信小程序不同，App端不支持。2、微信小程序端返回App端。
2024-08-15 10:50:48
470
原创 JavaScript做网页是否过期的处理
基于这篇文章我们做网页是否超时，网页是否过期的处理。打开一个网页允许他在一定时间内可以访问，过了这个时间就不可以访问了，encrypt是h5加密方法，看看上面的文档解释：其实原理也很简单：就是设置一个过期时间，加到了当前时间上，然后再解析的地方获取一下这个过期时间的值，和当前时间做个比较就行了var tokenExpireSec = Math.floor(Date.now() / 1000) + 20 // 在当前时间上+30s表示30s之后过期用到的地方：// 拿到当前时间。
2024-07-31 17:50:20
372
原创 封装一个React的公共Toast组件
/ 上面的Toast.tsx文件。前言：很多toast的库不是自己理想的，也不太好看，下面封装一个TypeScript的Toast组件。.show('小芳学前端')第三步：定义一个ToastRef的ref对象用于控制显隐。组件源码贴到下面，可以随便修改成自己想要的样子。最后显示效果就是这样子的。，2500ms之后消失。第二步：放到dom里。
2024-07-18 11:36:01
215
原创 TS一个页面上如果用到了很多key一样的字段，可以用枚举
前言：如果页面内部有很多一样的key名，就可以考虑把他们抽离出来，下面是ts的写法，js写法逻辑类似可以参考，其中searchParams是路由上的参数，只供参考。
2024-07-17 15:02:00
216
原创 路由上传一个ui_control参数（uint32类型）控制页面UI显隐
按位与操作符和按位或操作符都是二进制位运算符。按位与操作符（&）：对于每一个二进制位，只有当两个操作数的对应位都为1时，结果的对应位才为1，否则为0。例如，5（二进制101） & 3（二进制011）的结果是1（二进制001）。按位或操作符（|）：对于每一个二进制位，只要两个操作数的对应位有一个为1时，结果的对应位就为1，否则为0。例如，5（二进制101） | 3（二进制011）的结果是7（二进制111）。这两种操作符在计算机编程中常用于位操作，如设置位标志、清除位标志、切换位标志等。
2024-07-17 14:47:07
300
原创 通过路由上的参数生成唯一md5和路由上token做验证
路由上的token和本地生成的md5值应该是一模一样才可以正常访问系统，token是和三方或者其他调用折约定好的。，通过路由上的mediaId,X-Test-Timestamp,ui_control 这三个字。为了防止用户通过修改路由上的某一个字段也能正常访问系统的问题，算是安全访问的一个优化。其中token是三方传的，代码内部用md算法来自己生成，规则必须保持一致，参数ru。段生成一个md5值，然后和token要、做一个对比，路由上有很多的参数，同时有一个token字段。前言：有这么一个场景，
2024-07-16 14:13:05
308
原创 DOM元素可编辑自定义样式获取编辑后的数据
内容比较多，好好看看，收获匪浅前言：有这么一个场景，比如一个dom元素是可以编辑的，并且编辑样式得自己写一下，这时候我们考虑单独写一套div来控制编辑样式和编辑的内容。内部有很多的span节点需要渲染，对这些span里面的文本需要修改调整，调整完对应文本传给后台做更新，那么这个流程应该怎么做？接下来我们梳理一下做法咱们分两种情况来讲：第一种是简单场景，只编辑一个div里面的文本内容，比较简单。第二种是复杂场景，编辑div下很多个span里面的元素内容。
2024-07-12 11:09:34
391
原创 uniapp的uni.request请求在浏览器H5和微信小程序都可以发送请求，真机和基座发送请求无效，解决方案
请求的时候会有各种各样的报错，比如下面等等，主要是 "errMsg":"request:fail abort statusCode:-1 看这个报错。但是我们并没有配置app的跨域问题，所以请求的时候把地址写全了，app端不要这个proxy就行了，下面针对h5和app做个兼容。2. 请求封装的地方, h5及其他baseURL是接口前缀，如果是app，把baseURL配置成接口全地址就行。4. 接口定义的地方还是正常用请求地址就行，比如api/user/info, 到3的app的请求url就是。
2024-05-08 14:49:28
644
原创 uniapp使用vconsole调试 兼容App
前言：引入vconsole发现uniapp打出来的包里，看不到vconsole，uniapp开发的h5需要使用vconsole真机调试，如果直接在main.ts引入，打包后整个项目会页面空白，经实验在单个页面引入可解决，以下是解决方案。而且引入后vconsole在其他页面并不会消失，因此并不是只能调试单个页面，直接在入口页面引入即可全局使用。在main.ts或js里引入vconsole，h5用。3 uniapp解决vconsole无法正常使用。
2024-05-08 14:35:04
1412
2
原创 关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结
项目中需要线下 扫描二维码 进入到小程序指定的页面，二维码中 要动态传递多个参数，接下来看看具体怎么实现，整个过程还比较顺利，特把整个过程中遇到的坑点做以总结。
2024-01-18 18:15:30
1656
原创 合并分支中 rebase 和 merge 的区别
git merge 会让2个分支的提交按照提交时间进行排序，并且会把最新的2个commit合并成一个commit。最后的分支树呈现非线性的结构git reabse 将dev的当前提交复制到master的最新提交之后，会形成一个线性的分支树添加好友备注【进阶学习】拉你进技术交流群。
2023-12-29 13:46:27
404
原创 WeakMap 和 Map 的区别，WeakMap 原理，为什么能被 GC？
WeakMap 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakMap 的 key 是不可枚举的。最早最简单的垃圾回收机制，就是给一个占用物理空间的对象附加一个引用计数器，当有其它对象引用这个对象时，这个对象的引用计数加一，反之解除时就减一，当该对象引用计数为 0 时就会被回收。JS 中的垃圾数据都是由垃圾回收（Garbage Collection，缩写为 GC）器自动回收的，不需要手动释放，它是如何做的呢？
2023-12-29 11:05:10
1776
原创 如果 100 个请求，你怎么用 Promise 去控制并发？
现在面试过程当中 ，手写题必然是少不了的，其中碰到比较多的无非就是当属 请求并发控制 了。现在基本异步编程的理解了。
2023-12-28 14:06:31
893
原创 10 分钟了解 nextTick ，并实现简易版的 nextTick
在 Vue.js 中，有一个特殊的方法nextTick，它在 DOM 更新后执行一段代码，起到等待 DOM 绘制完成的作用。本文会详细介绍nextTick的原理和使用方法，并实现一个简易版的nextTick，加深对它的理解。nextTick简单的说，nextTick方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。
2023-12-28 13:41:11
997
原创 分享11 种有用的 JavaScript 技巧
今天这篇文章，我想与你分享 11个有用的JavaScript实用小技巧，它们将极大地提高你的工作效率。虽然，我们通过递归函数将多维数组转换为一维数组，但是有一个非常简单的方法可以解决这个问题。许多翻译网站都有此功能，你可以选择文本并将其翻译成另一个国家的语言。以上就是我今天想与你分享的11个有用的技巧，希望对你有所帮助。非常方便的帮助我们获取浏览器中的cookie信息。
2023-12-27 16:17:19
1259
原创 分析diff算法与虚拟dom（理解现代前端框架思想）
React和Vue作为目前国内主力的前端开发框架，想必大家在日常的开发当中也是非常熟悉了。不可否认的它们的存在大大地提高了我们的开发效率以及使得我们的代码可维护性得到提高，但是使用它们的“巧妙”的之后，对技术有着追求的你，是不是应该了解一下这些框架背后的一些思想呢？如果还没有，没关系，我们一起来！
2023-12-27 14:21:26
1180
原创 如何实现准时的setTimeout
想得到准确的，我们第一反应就是如果我们能够主动去触发，获取到最开始的时间，以及不断去轮询当前时间，如果差值是预期的时间，那么这个定时器肯定是准确的，那么用 while 可以实现这个功能。运行代码如下，通过一个计数器来记录每一次 setTimeout 的调用，而设定的间隔 * 计数次数，就等于理想状态下的延迟，通过以下例子来查看我们计时器的准确性。依旧非常的稳定，因此通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时，至此我们完成了如何让 setTimeout 准时的探索。
2023-12-26 15:04:06
913
原创 分享3种常用的前端埋点方式
因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。方法可用于通过 HTTP POST[1] 将少量数据 异步[2] 传输到 Web 服务器。前端埋点上报常使用ajax，img，navigator.sendBeacon。不推荐使用ajax。如果考虑兼容性的话，img是不二之选。
2023-12-26 13:55:48
850
原创 React、Vue3中父组件如何调用子组件内部的方法
当父组件需要调用子组件的方法时，可以通过useImperativeHandle钩子函数实现。以下例子是ts实现方式。在子组件中使用钩子，将指定的方法暴露给父组件，以便父组件可以通过子组件的引用来调用该方法。在子组件中使用了 useImperativeHandle 钩子将 someMethod 方法暴露给父组件。注意，为了使用 useImperativeHandle，需要将子组件包裹在 forwardRef 函数中，并在参数列表中添加 ref。上述代码中。
2023-12-26 09:00:00
474
原创 React组件在什么情况下会重新渲染
当我们使用React编写组件时，组件的重新渲染是一个重要的概念。重新渲染是指React组件在特定情况下会重新执行其渲染函数，更新用户界面以反映最新的数据。很多情况下，组件不必要的重新渲染会严重影响性能，所以要充分了解触发组件重新渲染的条件。当Context的值发生变化时，订阅了该Context的组件将重新渲染。在React中，组件的props是父组件传递给子组件的数据。当这些props发生变化时，子组件将重新渲染以反映最新的数据。当一个子组件嵌套在一个父组件中时，父组件重新渲染，子组件也会重新渲染。
2023-12-25 13:46:23
497
原创 JS 现代化的深克隆
前端手写深拷贝/深克隆是一道回头率超高的笔试题，但笔试版一般不适用于生产环境，JSON 的奇技淫巧和 Lodash 的工具函数也各有缺点。您知道吗，JS 现在有一种原生方法可以深层复制对象？您是否注意到，上述示例中我们不仅复制了对象，还复制了嵌套数组，甚至是Date对象？不仅可以如上操作，还可以：克隆无限嵌套的对象和数组克隆循环引用。
2023-12-25 13:31:38
927
原创 如何设计更优雅的 React 组件?
在导入依赖项的下方，通常会放那些使用 TypeScript 或 Flow 等静态类型检查器定义的文件级常量和类型定义。组件中的所有magic值，例如字符串或者数字，都应该放在文件的顶部，导入依赖项的下方。由于这些都是静态常量，这意味着它们的值不会改变。因此将它们放在组件中是没有意义的，因为放在组件中的话，它们会在每次重新渲染组件时重新创建。对于更复杂的静态数据结构，可以将其提取到一个单独的文件中，以保持组件代码整洁。下面是使用 TypeScript 声明的组件propsid: number;
2023-12-22 13:01:36
1073
原创 js 如何判断对象自身为空？很多人错了~
如何判断一个对象为空是我们在开发中经常会遇到的问题，今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。判断一个对象是否为空时，使用方法最为完美。添加好友备注【进阶学习】拉你进技术交流群。
2023-12-22 12:58:29
323
原创 浏览器渲染原理
如果主线程解析到link的位置，此时link的CSS资源文件还没下载解析好，主线程不会等待，继续解析后面的HTML。合成线程拿到每个层、每个块的位图后，生成一个个的quad（指引）信息，指明位图信息位于屏幕上的位置，以及会考虑到transform的旋转、偏移、缩放等矩阵变换。这就是transform效率高的主要原因，因为不会引起样式的计算、布局、生成绘制指令等，它与渲染主线程无关，这个过程发生在合成线程中，且只需要进行最后一步-画。当进行了会影响布局树的操作后，需要重新计算布局树，就会引发重新。
2023-12-21 17:25:59
891
原创 代码提交分支规范
feature-${ver}：当前开发分支，从master分支创建。线上环境出包回归通过，feature-v_1.2.0代码合并到master，并由feature-v_1.2.0分支打tag。feature-jenkins：自动打包分支，由开发分支往该分支合并代码，自动触发jenkins打包流程。feature-${dev}：个人开发分支，从版本分支拉取创建，修改提交到版本分支。封版之后，feature-v_1.2.0版本分支出包线上环境回归。个人从版本分支创建/同步个人分支：feature-lisj。
2023-12-21 17:21:30
811
原创 页面滚动时隐藏element-ui下拉框/时间弹框
在系统中，当（有垂直滚动时）点击下拉框后滚动页面，会发现下拉项会遮盖住页面中的元素，不会隐藏。在页面滚动或者缩放时隐藏下拉项即可（借助点击目标元素，下拉项会自动隐藏的特点）1、监听当前滚动元素的scroll事件。2、定义滚动监听的容器。3、隐藏popper。
2023-07-26 17:55:17
1421
原创 video/audio timeupdate事件触发粒度（更新频率）调节
一旦触发该监听器，就立即分5次执行，每50毫秒执行一次，执行5次，恰好就是250毫秒。所以这个timeupdate事件触发频率也是250毫秒触发一次。一般来说，视频的进度条底层默认都是250毫秒更新一次的。其实可以在里面加上计时器。
2023-06-08 16:37:43
1238
原创 在nuxt引入element插件，报错，The client-side rendered virtual DOM tree is not matching server-rendered conten
翻译：[Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的，例如在。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。组件，该组件只是占位且用于仅在客户端渲染其他组件.在nuxt引入element插件，报错。在这element-ui组件最外层加上。警告: Nuxt 版本小于。中嵌套块级元素，或者缺少。
2023-05-30 15:34:21
352
原创 JS 生成唯一UUID的几种方法
在开发中偶尔会遇到需要生成唯一id的时候，比如对数组的任意一项进行多次增删改，这时就需要给每一项添加唯一标识符来加以区分。以下总结了几种生成唯一标识的方法，仅供参考。
2023-02-11 11:12:12
2049
原创 vue el-checkbox、el-switch绑定值问题
后端返回的值为1（number类型）对应el-switch值true（打开）状态，值为0（number类型）对应el-switch值false（关闭）状态。注：增加两个属性值即可 :true-label="1" :false-label="0"二、el-switch值true、false改为number类型的1和0。一、el-checkbox绑定值用0 1表示。
2023-02-07 15:37:03
3824
原创 ES6的一些常用用法思考
恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。
2023-02-03 16:32:34
392
1
原创 indexedDB存储
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
2023-02-02 15:28:18
934
原创 一个关于image访问图片跨域的问题
通过 'img' 加载的图片，浏览器默认情况下会将其缓存起来。当我们从 JS 的代码中创建的 'img' 再去访问同一个图片时，浏览器就不会再发起新的请求，而是直接访问缓存的图片。但是由于 JS 中的 'img' 设置了 crossorigin，也就意味着它将要以 CORS 的方式请求，但缓存中的图片显然不是的，所以浏览器直接就拒绝了。连网络请求都没有发起。
2023-01-16 17:34:52
7518
1
原创 JS 点击某元素以外的地方触发事件
本来就只是使用e.target就行了，但是点击事件的target的机制问题，单纯地使用e.target并不能根本解决这个问题，因为目标区域内可能有很多的元素，这个点击事件会选择其内部的元素，就举当前的html代码为例子，现在我的目标区域demo内有一个p标签，如果我点到这个p标签，e.target会指向这个p标签，而不会去指向这个demo元素。点击颜色画板之外的区域，隐藏颜色画板。这个功能多用于关闭自己设置的弹窗，设置好最外层的判断元素，点击弹窗之外，弹窗就会关闭，这个在用户体验方面是非常有利的一个功能。
2023-01-16 17:23:53
2113
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人