- 博客(66)
- 收藏
- 关注
RSS订阅原创 小程序内嵌uniapp页面跳转回小程序指定页面方式
使用微信小程序提供的Api：wx.miniProgram.navigateTo。你需要在uniapp项目中配置相应的页面路径，确保跳转时能正确找到目标页面。你的小程序必须已经正确初始化，并且在合适的生命周期内调用跳转方法。你的小程序必须是通过uniapp构建的，并且支持小程序嵌套。在小程序中嵌套uniapp的H5页面，并使用。
2024-07-22 14:50:53
225
原创 Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置
data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},
2024-06-13 19:39:22
698
原创 React类组件生命周期详解
它使你的组件能够在 DOM 发生更改之前捕获一些信息（例如滚动的位置）。方法，那么 React 会在你的组件更新了 props 或 state 重新渲染后立即调用它。方法，会造成触发一次发生在浏览器更新屏幕内容之前的额外渲染，在这种情况下，即使。返回值：返回你想要的任何类型的快照值，或者是。方法，React 会在你的组件被移除屏幕（进行比较来确定发生了什么改变。进行比较来确定发生了什么改变。：更新之前的 props。：更新之前的 state。：更新之前的 Props。：更新之前的 State。
2024-05-21 00:19:26
902
原创 移动端设置全局悬浮可拖动图标
/ 全局拖动})})// 记录开始触摸坐标// 记录组件移动前的位置x = 0//当前组件距离左边位置=开始位置(x轴)+（当前触摸点x坐标-开始移动触摸点x坐标）elLeft : 0y = 0。
2024-02-05 16:01:39
524
原创 Element-ui自定义表格头部-添加筛选条件
/ 自定义某列表头为时间搜索return h(props: {placeholder: '请选择排班时间',},on: {},},},// 自定义列表头展示信息return h('span',innerHTML: `值班人员(${type === 'day'?},},},// 表头日期选择},
2024-01-19 14:09:12
1834
原创 vue-quill-editor富文本插入图片改为上传服务器
注意：vue-quill-editor插入图片默认转换为base64，对于项目中使用，如果绑定的变量有插入图片，会造成字符串内容过长，造成请求缓慢，长度过限问题。// 引入Qill插件// 设置字体// 设置字体大小// toolbar工具栏['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线['blockquote', 'code-block'], // 引用，代码块。
2024-01-16 10:07:13
768
原创 Element-ui合并table表格列方法
可以根据业务中实际需要合并的列数，增加判断，及 property 的字段取值满足自己业务合并列的效果。
2023-11-28 16:47:56
626
原创 React 其他常用Hooks
通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起，在父组件调用子组件的方法时，通过自定义实现，让父组件使用返回的对象；打个比方：搜索过滤，在输入框输入时，对于上w条数据时，会存在卡顿，是由于在搜索的输入事件中，event.target.value更新与过滤出来的数据同时更新，导致输入存在卡顿原因。通过useTransition。useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；
2023-11-07 16:30:23
343
原创 React Hooks解析
比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；等，函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；或者这次修改的state需要依赖之前的state时，也可以使用；函数式组件不可以，因为函数每次调用都会产生新的临时变量；参数：初始化值，如果不设置为undefined；
2023-10-27 16:15:25
392
原创 React-Router路由
useSearchParams函数获取，useSearchParams由react-router-dom库提供的api，该函数返回一个entries对象，通过Object.fromEntries转换成普通对象即可；安装时，选择react-router-dom，react-router会包含一些react-native的内容，web开发并不需要；目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的，但是这样的方式会让路由变得非常混乱，早期的时候，属性：设置匹配到路径后，渲染的组件；
2023-10-19 17:21:07
140
原创 react-redux的connect函数实现
通过context来解耦connect文件中对store的依赖，使connect的独立封装性更好。在入口文件index.js引入。
2023-10-17 11:00:14
413
原创 Redux详解（二）
接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk，相当于对异步操作的reducer处理，例如网络请求。通过Redux Toolkit创建store，对于store的数据使用，与传统的store数据获取方式一样，Redux Toolkit只是在store的初始化与逻辑编写进行了封装。），React官方为解决这一问题，推荐使用Redux Toolkit第三方包将redux逻辑聚合到一个文件中实现，解决上面的问题，
2023-10-16 17:53:16
325
原创 Redux详解（一）
将我们传入的reducers合并到一个对象中，最终返回一个combination的函数（相当于我们之前的reducer函数了）;在执行combination函数的过程中，它会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state；对于多个页面共享的一个数据时，需要定义统一的规范来操作数据，才能使整个数据的变化可追踪；新的state会触发订阅者发生对应的刷新，而旧的state可以有效的组织订阅者发生刷新；清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的；
2023-10-13 17:34:08
140
原创 React编写CSS方式
CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修。CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；修改成 .module.css/.module.less/.module.scss。配置webpack.config.js中的modules: true。.css/.less/.scss 等样式文件。，在JavaScript中是不识别的；等，就可以直接进行引用；
2023-10-10 16:32:17
466
原创 React过渡动画
对于实现一个组件的显示与消失的过渡动画，可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group库用来完成过渡动画。# npm# yarn。
2023-10-10 16:19:59
250
原创 React的高阶函数
2.高阶函数的意义优点：缺点： Modal.jsx App.jsx4.Fragment的使用在之前的开发中，我们总是在一个组件中返回内容时包裹一个div元素： 如果希望不渲染这层的div，就可以通过Fragment实现，Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点；5.StrictModeStrictMode 是一个用来突出显示应用程序中潜在问题的工具：StrictMode检查项：
2023-09-26 16:18:32
664
原创 React组件化开发二
props/state改变 -------render函数重新执行-------产生新的DOM树-------新旧DOM树进行diff对比-------计算出差异进行更行-------更新到真实的DOM。他们调用render应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的render方法。对于函数式组件需要获取组件中某个dom元素时，通过React.forwardRef,或者在hook中使用ref；函数会在dom被挂载时进行回调，这个函数会传入一个元素对象，自行保存；
2023-09-25 10:15:44
228
原创 React中setState的原理及深层理解
React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化。如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步。setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行。setState方法是从Component中继承过来的。通过setState来告知React数据已经发生了变化。setState设计为异步，可以显著的提升性能。setState的回调。
2023-09-22 17:27:57
348
原创 JSX的基础使用（二）
所有jsx中的属性都在config中以对象的属性和值的形式存储；（箭头函数this不绑定，this默认获取外层this）;存放在标签中的内容，以children数组的方式进行存储；在vue中，通过指令来控制：比如v-if、v-show；如果是标签元素，那么就使用字符串表示 “div”；react从jsx到虚拟dom到真实dom的过程。来做一些事情（比如阻止默认行为），默认情况下，主动执行的事件函数，并且传入相关的其他参数。如果是组件元素，那么就直接使用组件的名称；虚拟DOM（Virtual DOM）,
2023-07-20 23:49:41
65
原创 JSX的基础使用
比如元素的title属性、img元素的src属性、a元素的href属性、元素绑定的class、内联样式的style。不能作为子元素，会报错（not valid as a React child）；null、undefined、Boolean类型。Number、String、Array类型。Object对象类型。
2023-07-15 11:31:23
190
原创 Element ui多选框实现单选且隐藏全选按钮
通过 @selection-change="handleSelectionChange"实现单选逻辑。选中的值永远只有一项。
2023-04-28 14:26:26
406
原创 Babel的深度解析
以上只是是我在学习coderwhy老师的webpack课程中对Babel的简单理解和记录，想要了解更多关于webpack的配置分析及原理，可以去看coderwhy老师的课程。开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；babel做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的原理。Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；
2023-04-16 00:07:19
348
原创 移动端适配方案
的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。viewport的使用方法，viewport配置起来很容易，只需要新增一个postcss.config.js文件，这样在代码中写入的px会自动转换成vw单位，同样可以达到移动端适配的效果。之后我们写css样式的时候只需要正常写css即可，postcss会自动将我们的px转化为rem。
2023-04-03 23:36:45
211
原创 Webpack的source-map
webpack为我们提供了非常多的选项（目前是26个），来处理source-map，选择不同的值，生成的source-map会稍微有差异，打包的过程也会有性能的差异，可以根据不同的情况进行选择；推荐使用 source-map或者cheap-module-source-map ,分别是vue和react使用的值，可以获取调试信息，方便快速开发；会生成一个独立的source-map文件，并且在bundle文件中有一个注释，指向source-map文件；webpack提供的26个值，是可以进行多组合的；
2023-04-03 23:24:51
591
原创 Webpack加载和处理其他资源
在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
2023-03-20 22:46:55
192
原创 Webpack打包原理及浏览器兼容配置
传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；条件查询使用的是caniuse-lite的工具，这个工具的数据来自于caniuse的网站上；兼容性是针对不同的浏览器支持的特性：比如css特性、js语法，之间的兼容性；
2023-03-06 23:35:33
1076
原创 正则表达式中/g /i /m /e /x /s的用法
正则表达式模式修饰符，用法含义如下：1、/g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个2、/i 表示匹配的时候不区分大小写，这个跟其它语言的正则用法相同3、/m 表示多行匹配。什么是多行匹配呢？就是匹配换行符两端的潜在匹配。影响正则中的^$符号4、/s 与/m相对，单行模式匹配。5、/e 可执行模式，此为PHP专有参数，例如preg_replace函数。6、/x 忽略空白模式。这里有值得注意的一点，这些修饰符是可以混合使用的。例如 /i
2022-12-06 21:05:30
690
原创 Nodejs-Koa框架
请求地址：http://localhost:8000/login?nodejs中除了express框架， 另外一个非常流行的Node Web服务器框架就是Koa。koa官方并没有给我们提供路由的库，我们可以选择第三方 库：koa-router。请求地址：http://localhost:8000/login。真实开发中我们如何将路径和method分离呢？
2022-10-29 15:37:34
3745
原创 Nodejs-Express框架
express主要提供了两种方式：app/router.use和app/router.methods；Node也可以作为静态资源服务器，并且express给我们提供了方便部署静态资源的方法；
2022-10-29 15:19:56
2509
原创 http模块
Http状态码（Http Status Code）是用来表示Http响应状态的数字代码：Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码;当应用程序（客户端）需要某一个资源时，可以向一个台服务器，通过Http请求获取到这个资源；提供资源 的这个服务器，就是一个Web服务器；目前有很多开源的Web服务器：Nginx、Apache（静态）、Apache Tomcat（静态、动态）、Node.js。创建服务器对象，我们是通过 createServer 来完成的。
2022-10-29 15:01:19
1068
原创 Nodejs常见属性
调用结果返回之前，当前线程处于阻塞态（阻塞态CPU是不会分配时间片的），调用线程只有 在得到调用结果之后才会继续执行。JavaScript可以直接去处理非常直观的数据：比如字符串，我们通常展示给用户的也是这些内容。②__filename：获取当前文件所在的路径和文件名称： 注意：包括后面的文件名称；如果我们希望将多个路径进行拼接，但是不同的操作系统可能使用的是不同的分隔符；①__dirname：获取当前文件所在的路径： 注意：不包括后面的文件名；Libuv采用的就是非阻塞异步IO的调用方式；
2022-10-11 09:51:02
333
原创 Vue中的key的作用及原理——diff算法
在没有key的时候我们的效率是非常低效的；在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；
2022-09-27 15:24:46
608
原创 深入响应式原理——Vue2
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。
2022-09-25 19:41:14
252
原创 JS的深拷贝函数
引入的赋值：指向同一个对象，相互之间会影响；对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响；对象的深拷贝：两个对象不再有任何关系，不会相互影响；}// 判断传入的originValue是否是一个对象类型if(!}}}
2022-09-23 15:41:22
236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人