- 博客(75)
- 收藏
- 关注
RSS订阅原创 React中九大常用Hooks总结
在实际使用中如果项避免页面抖动，可以把需要操作DOM的代码放在useLayoutEffect()中，在该函数中做DOM操作，这些DOM修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流重绘的代价。接收一个组件A作为参数并返回一个组件B，如果组件B的props没有改变，则组件B会阻止组件A重新渲染。useCallback()常用记忆时间按函数，生成记忆后的时间函数传递给子组件使用，useMemo()更适合经过函数计算得到一个确定的值，比如记忆组件。当上下文的值发生变化时，函数组件将重新渲染。
2024-09-13 11:49:35
1428
原创 地接侠小程序（Taro）兼容IOS系统Bug解决（redux持久化不成功、整个页面会拖动）
在写地接侠小程序的时候就是有考虑过兼容问题的，但是在写的过程中并没有用苹果手机进行调式，一直都是用的自己的安卓手机，一直都是没有问题的，但是毕竟项目需要上线，于是在上线前用苹果手机测试果然出现了预想中的问题。
2024-08-07 20:45:15
581
原创 Js改变this指向的三种方法以及区别
bind不会立即执行函数,，然后返回一个新函数，此时这个新函数this已经指向新的位置了。第一个参数:传入该函数this指向的对象，传入什么强制指向什么。第一个参数:传入该函数this指向的对象，传入什么强制指向什么。格式： 函数名.call(修改的this,参数1,参数2....);格式： 函数名.apply(修改的this, 数组/伪数组);格式：函数.bind(修改的this,参数...)()第二个参数:数组,数组里面放入我们原有的参数。第二个参数:将原函数的参数往后顺延一位。
2024-08-03 11:51:18
411
原创 多次调用请求方法每次都有返回数据，但是只发起一次接口请求怎么做？
将第一次请求的promise存储起来，在请求还没成功的时候，返回promise对象，相当于返回的就是第一次请求的内容结果。如果接口请求时间比较长，还没返回结果又调用了请求方法，怎么还是只发起一次请求，复用第一次请求的结果？这个问题我当时想到的是用定时器，具体的操作方法我没有写，但是应该会有一些问题。现在我推荐的是另一种方法，是直接返回第一次调用的promise，上代码！这个代码就是我在面试中回答的结果，但是后面面试官又问了另一个问题，这个场景属于一种性能优化吧，面试中也可能会问到你。
2024-07-20 10:58:30
346
原创 Taro自定义FromData实现本地路径转换为文件
在用Taro写头像上传功能时，因为需要对获得的图片进行剪切成圆形或方形。使用组件剪切完之后返回的是一个本地图片的相对路径。这个时候我们就需要自己实现将本地路径重新转换为二进制文件。咱们这是自己伪造的FormData，虽然结果全部相等。但是也需要后端进行处理一下，不能直接使用，需要后端进行一下转换。这两个js文件引入之后就可以直接 使用转换了。这样就可以正常上传了。
2024-07-09 21:42:31
323
原创 TCP和UDP的区别以及应用场景
TCP协议下双方发送、接受缓冲区都有，UDP并无实际意义上的发送缓冲区，但是存在接受缓冲区；TCP（传输控制协议）和UDP（用户数据报协议）是两种不同的。TCP只支持点对点通信，UDP支持一对一，一对多，多对多；TCP是面向字节流的，UDP是面向数据报文的；TCP报文首部20个字节，UDP首部8个字节；TCP是面向连接的，UDP是无连接的；TCP是可靠的，UDP是不可靠的；TCP有拥塞控制机制，UDP没有；页面请求(http,https)
2024-06-30 18:08:32
277
原创 文本省略实现展开和收起功能（Taro）
在写项目的过程中很容易有说明性文本溢出需要出现省略号的功能，并且可以展开查看所有信息，并能够收起。我在写项目的过程中就遇到了这个问题，本来是想要使用组件库中的组件进行功能的实现，但是结果不尽人意，组件库中的组件是在每一个文本上都添加展开和收起的提示，并不管文本是否到达溢出隐藏的要求，于是我就自己想着实现这个功能。
2024-06-11 08:57:28
1010
原创 Taro（React）使用富文本编辑器Editor
在写项目的过程中很容易涉及到让使用者，输入一些介绍或者文本等相关功能， 前端在拿到这些文本时是需要直接渲染的，如果不使用富文本编辑器，这个时候得到的文章是没有格式的，这对于使用者来说体验非常的不好，这个时候就需要使用富文本编辑器，获取到带有标签的文本。我在使用Taro写小程序的时候，有让用户编辑自我介绍的功能，这个时候就需要使用到富文本获取到带有标签的文本。还有更多的功能，大家可以自行查看。
2024-05-31 15:59:46
604
原创 Css属性transform详解（变形、旋转、缩放）
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
2024-05-17 10:26:44
3597
原创 微信小程序 和 Taro 两种写法，获取手机号实现一键登录
自己在写微信小程序项目的时候因为用到了一键登录的功能，在网上看了很多教程大多是用login()获取code，这个方法其实是不准确的。当时我也用这个方法，但是获取的code是不生效的，得不到用户的手机号。真正获取手机号对应code的方法是getPhoneNumber，是按钮的内置方法。
2024-05-17 10:13:11
1158
原创 微信小程序（Taro）获取经纬度并转化为具体城市
在获取到经纬度后，想要转换为具体的位置地点，需要使用高德地图或者腾讯地图，我使用的是高德地图。在添加key的过程中一定要选择web服务，因为只有它支持逆地理编码API。申请权限，想要使用微信小程序获取经纬度的方法是要申请该方面的权限。在获取经纬度的方法中，要把方法放到生命周期里面。我使用的是Taro.getFuzzyLocation(）获取经纬度的方法有很多选择其中一个使用就好。在app.config.js中需要添加设置。在高德开发平台注册账号后申请key。直接上代码，获取经纬度。
2024-05-07 09:14:43
786
原创 特别推荐一个学习开发编程的工具
为开发人员提供一系列好看的技术备忘单，方便开发过程中速查基本语法、快捷键、命令，节省查找时间，提高开发效率。【人生苦短，抓住重点】
2024-04-27 21:18:58
259
原创 URL地址解析至页面展示全过程（面试详细解答）
首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。需要获取的是输入的 URL 中的域名的 IP 地址浏览器缓存操作系统缓存，hosts⽂件路由器缓存ISPDNS缓存。
2024-04-20 20:59:42
1106
原创 uniapp原生下拉刷新在手机上不起作用
这就可能会导致下拉刷新不起作用，这时候就需要做到取舍，看看是保留scroll-view，使用自带的下拉刷新，还是保留原生的下拉刷新。
2024-04-06 09:47:23
1021
原创 双token刷新并把未请求成功的接口进行保存并重新请求
在接口调用中token都是有过期时间的，如果token过期，后端的接口是调用不成功的，如果没有和后端的交互，那么这个项目也就不能称之为项目了。如果在token过期的时候强制用户跳转到登录页面，这在app里面是不合理的，假设一下比如我正在激烈的团战，突然给我跳转到登录页面告诉我登录过期了，让我重新登录？？？这就很奇怪好吧。
2024-03-24 08:50:32
565
原创 Js事件冒泡和事件捕获
当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。事件源 =>根节点（由内到外）进行事件传播。在冒泡在捕获无论是事件捕获还是，它们都有一个共同的行为，就是事件传播。dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
2024-03-16 11:12:42
471
原创 uniapp聊天页面之消息滚动
刚进入页面的时候，有可能会没有滚动效果，这可能是因为消息列表的DOM节点还没有渲染到页面上，滚动的方法变已经执行了，导致滚动效果消失。所以调用的时候最好放在nextTick中。-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。-view一个固定的高度，并获取消息信息的高度。
2024-03-07 17:36:34
1511
原创 uniapp聊天记录本地存储(详细易懂)
写聊天项目，使用到了本地存储。需要把聊天信息保存在本地，实时获取。这个项目中，使用了websocket进行数据的交互，websocket部分就不写了，如果有需要可以看我关于websocket的博客。
2024-03-03 15:09:24
2024
1
原创 uniapp上传文件到腾讯云
不知道为什么，组件库获得的file文件对象不能直接上传成功，需要转换格式，所以我就进行了格式转换。SecretId和SecretKey是用来生成签名的（我后面会说）Bucket和Region是用来识别地区信息的。获取secretId和secretKey。1、创建upload.js文件进行封装。appleId很明显就是识别身份用的。
2024-02-20 19:38:01
902
3
原创 报错Error: params body format error, Only allow File|Blob|String文件上传到腾讯云 ,转换文件格式
获取到的文件格式不符合要去需要进行转换。
2024-02-20 19:34:17
590
原创 CSS设置盒子阴影
向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。a、给元素右边框和下边框加外阴影——把。
2024-02-15 17:01:04
1042
原创 JS中Set和Map用法详解
它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。它类似于数组，但是成员的值都是唯一的，没有重复的值。方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。Set 结构的实例有四个遍历方法，可以用于遍历成员。的一个键，然后又使用。
2024-02-02 21:36:09
824
原创 CSS之高度塌陷和外边距塌陷
高度塌陷：子元素设置浮动后就会脱标(脱离标准流进入浮动流)，如果此时父元素没有设置高度，那么父元素高度就会为0，形成所谓的父元素高度塌陷现象引发的后果：浮动的子元素会对页面的布局造成影响，需要清除浮动。由此得出，解决高度塌陷的本质是清除浮动造成的影响【图示】子元素浮动前:BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是页面中的一块渲染区域，有自己的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
2024-01-21 09:22:56
1435
原创 CSS 实现三角形的技巧
上述代码中的 deeppink 45deg, transparent 45.1deg 多出来的 0.1deg 是为了简单消除渐变产生的锯齿的影响，这样，我们通过 conic-gradient，也轻松的得到了一个三角形。我们将角向渐变的圆心点设置于 50% 0，也就是 center top，容器最上方的中间，再进行角向渐变，渐变到一定的角度范围内，都是三角形图形。可以看到，不同字体的形状、大小及基线都是不一样的，所以如果你想使用字符三角形，确保用户的浏览器安装了你指定的字体，否则，不要使用这种方式。
2024-01-15 08:00:00
945
原创 CSS响应式布局
实现思路：一般都是先实现PC端页面，然后再去做其他设备的兼容设置宽度时，最好不要写死(px)，而是用%单位参照父元素的大小设置最外层容器时，用vw, vh作单位不同设备需要换行显示时，使用flex-direction:columns;导航条一定条件下，显示隐藏内边距和外边距还有高度可以适当的用px单位媒体查询时，主要的改变有：换行显示、隐藏，其余都是小改动，比如font-size, margin等等。
2024-01-10 20:18:32
1024
原创 JS的防抖和节流
上面的代码会带来一个问题：用户轻轻下拉滚动条,onscroll中的逻辑会触发很多次。上面的代码会带来一个问题：用户每输入一个关键字都会触发。事件函数执行,先判断是否有定时器，有则直接。现在是要求是用户停下来不输入的时候再。事件函数执行时，再创建一个新的定时器。,这个时候就需要用到节流函数了。需求：根据输入框内容来请求数据。，这个时候就需要用到防抖函数了。需求：页面滚动时,加载数据列表。
2024-01-06 19:06:50
601
原创 JavaScript 中的循环迭代方法（七种）
允许你将数组中的每个元素通过一个回调函数进行处理，从而创建一个新的数组，其中的元素是原数组经过处理后的结果。循环是 ES6 中引入的新特性，用于迭代可迭代对象（如数组、字符串等）的元素。循环用于迭代对象的可枚举属性。来将一种数据格式转换为另一种，例如，将对象数组中的特定属性提取出来，以创建一个包含这些属性值的新数组。循环遍历的是对象的可枚举属性，包括原型链上的属性。是函数式编程中的常见工具之一，它允许你以声明性的方式处理数据，从而使代码更易读和维护。，你可以遍历数组中的元素，执行一些操作，而不需要显式的。
2023-12-31 19:07:13
1296
原创 Vue实时共享编辑文档实现（websocket）
思路：先调用接口获取相应的数据进行渲染，然后通过webSocket建立链接，实时进行数据的接收和修改。
2023-12-16 10:21:40
1429
4
原创 在vue项目中webSocket封装（传token）
在中，目前未提供修改请求头字段的方法，参考其他的一些文章，依照他们的写法依然未能实现传递token，所有我和后端另辟蹊径，把token传在路径里面。
2023-12-16 09:37:18
2659
原创 ES6原生音乐播放器（有接口）
是基于JavaScript+ES6+Ajax等通过原生构建的项目。能够充分锻炼JS能力。本项目有主页、详情页、歌单页面三部分组成
2023-12-10 10:46:31
512
原创 TS数据类型(全)
null：表示对象值缺失。null是一个只有一个值的特殊类型。表示一个空对象引用。undefined：用于初始化变量为一个未定义的值，一个没有值的变量会返回 undefined。Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。
2023-12-03 09:02:33
1849
原创 React组件通信
上图是一个react形成的嵌套组件树，如果我们想从App组件向任意一个下层组件传递数据，该怎么办呢？组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据。根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改。为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信。将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态。实现父子通信中的父传子，把父组件中的数据传给子组件。父组件给子组件传递回调函数，子组件调用。
2023-11-13 06:00:00
438
原创 React函数组件的使用（Hooks）
一套能够使函数组件更强大，更灵活的“钩子”React体系里组件分为 类组件 和 函数组件经过多年的实战，函数组件是一个更加匹配React的设计理念，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态。
2023-11-11 09:35:46
615
原创 VUE组件间通信的七种方式
根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信。
2023-11-04 20:01:50
1858
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人