qq_52181663的博客

原创 前端webpack项目如何删除文件中的无用文件

四、在和插件同目录下自动生成了一个.txt文件。文件中有全部文件、依赖文件。可参考检查后手动删除，也可以在chainWebpack文件中修改配置isDelete:ture。这样，在项目成功跑起来的同时，就会自动删除无用文件，并且在命令行页面有删除记录。在开发过程中，总是会有一些无用的代码文件，这会影响开发小伙伴的开发效率，那么如何优化，删除这些无影=用代码呢。二、在webpack的配置文件中引入这个插件。若是umi的项目，就是在config/chainWebpack.ts文件中进行配置。

原创 lodash工具

提供各种方法 比如排序方法。

原创 如何设置不同的网页标题（react）

通常，当我们写一个h5或者网站时，需要根据页面的业务来自定义网页标题。这个本来是在入口html文件中设置的，但唯一。一、写一个组件更改标题（jsx文件）二、在路由ts文件中引用这个组件。

原创 h5如何跳转到微信公众号中

一、打开想要跳转到的微信公众号的任何一篇文章（在微信电脑端打开，然后后去自己用的合适的浏览器）需求：点击按钮或者某个地方，弹出关注公众号的页面。（h5跳转到微信公众号）需要什么：通过window.location.href来进行跳转。获取到这个__biz的值，拼接到以下链接中。因此，需要一个微信公众号链接。

原创 前端webpack、vite搭建的项目如何解决跨域

需在config文件夹下面的webpackDevServer.config.ts（若原本项目中没有，就自己新建一个）文件中添加配置。关键词 Access-Control-Allow-Origin。这样的报错就是跨域问题了。那么，在前端如何解决跨域呢？二、webpack搭建的项目。可以配置反向代理服务器。

原创 h5(react ts 适配)

​ 除了我们常见的谷歌浏览器外，在火狐浏览器可以用手机扫码，在手机上查看效果，并且，代码修改中保存后会和效果同步。1、新建项目：react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。目前为止，项目有了，仓库有了。用react-router、安装之后在app.tsx文件中。在写接口的文件中，就可以调用这个文件中的axios实例啦。2、在码云（gitee）上新建一个仓库。1、安装、配置axios。

原创 如何进行各个终端的页面适配(react项目安装插件 postcss-px-to-viewport)

2、在webpack的配置文件中（webpack.config.js），引入这个插件，并进行配置。1、先安装这个插件 这个插件会自动将样式文件中的 px 转换为 vw。（2）、再进行配置 在 getStyleLoaders（）中配置。一般我们都是按着UI稿的尺寸来写固定的px 这个习惯。插件是 postcss-px-to-viewport。在上例的配置中，页面的参考宽高为 750 1624。我们可以引用插件来做。（以reactApp为例）这个可以根据设计稿的宽高来，这样方便！

原创 css怎么实现文字描边

有时，我们会遇到UI稿有文字描边的效果，比如下图的效果。一、给需要描边的文字加一个id选择器。

原创 小程序如何做到用css来禁止页面下拉

有时候我们会遇到某些情况下，禁止页面下拉的情况，但是用小程序的禁止下拉不好用？可以把这个页面的样式，用定位：固定定位来实现。这时可以用css来实现。

原创 用css画一个半圆弧（以小程序为例）

2、两个参数时，第一个参数代表：左上、右下（主对角线） ，第二个参数代 表：右上、左下（副对角线）3、四个参数时、第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下。3、三个参数时、第一个参数代表：左上 ，第二个参数代表：右上、左下，第三个代表：右下。二、css样式：原理是两个半圆叠在一起，就是一个半圆弧。那么，如何画一个半圆。圆弧的html结构是 两个块级元素嵌套。1、一个参数时，代表四个角都是这个值。

原创 如何在小程序中获取用户昵称、电话号，头像

（手机号快速验证，向用户申请，并在用户同意后，快速填写和验证手机，）和获取手机号类似，也是Button组件的open-type的值为chooseAvatar时，再结合onChooseAvatar（）事件，在这个事件的回调中调接口。从onGetPhoneNumber（）的参数中拿到code值，这个code值是后台接口所需的传参。Taro框架中的组件Input的一个属性，type属性的值有一个nickname.在这一步要注意的是：在这个回调函数里面须得调后台的接口，向后台提交手机号码。是获取用户手机号的回调。

原创 git常用命令

切换并创建新分支：git checkout 分支名。切换已创建的分支： git switch 分支名。git merge 合并到的分支名。查看本地分支：git branch。把代码合并到哪个分支。

原创 后台返回的数据是带标签格式的，若前端显示有别的要求，怎么解决

一般，有时候会有前端拿到的文案数据是后台返回的带标签的数据，例如用p标签套着。但是p标签在前端的显示要求上有些缺陷，例如p标签不能识别换行。此时可以用字符串下的replace方法来进行转换，例如。

原创 在多页面应用和单页面应用中（例如vue）怎么提高seo搜索引擎优化

遵循搜索引擎的最佳实践，并持续关注 SEO 的动态变化和更新，以提高你的网站在搜索结果中的排名和可见性。添加静态页面描述：对于那些通过网络请求获取数据并动态渲染内容的页面，你可以在静态页面中添加一个静态描述，让搜索引擎在没有 JavaScript 执行的情况下能够理解页面的主要内容。生成站点地图（XML Sitemap）：为了帮助搜索引擎更好地发现和索引你的页面，你可以生成一个包含所有页面的站点地图，并将其提交到搜索引擎的 Webmaster 工具中。索引表的目的是提供一个快速查找和匹配网页的方式。

原创 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址 栏回车有什么区别？

会带上 If-Modifed-Since，If-None-Match，这就意味着服务器会对。不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有。用户按 Ctrl+F5（强制刷新）：浏览器不仅会对本地文件过期，而且。点击刷新按钮或者按 F5：浏览器直接对本地的缓存文件过期，但是。地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，文件检查新鲜度，返回结果可能是 304，也有可能是 200。然后服务器检查新鲜度，最后返回内容。请求过，返回结果是 200。

原创 浏览器缓存

强缓存 协商缓存 浏览器缓存

原创 图片懒加载

图片懒加载

原创 vuex、虚拟dom 二级路由 组件复用

原创 vue2中实现响应式的原理object.defineproperty+发布定于模式的缺点

进行修改，因此必须结合发布订阅模式。发布订阅模式其实是深度遍历对象属性，因此在发布订阅之后（在。由于object.defineproperty（对象，描述，对象的某个属性）其实是对对象的。进行发布订阅）之后，再修改属性改变将无法被监测到。也无法监测数组索引的变化。1 不能监测到新增属性或者删除属性。

原创 为什么vuex中的mutation是同步的，怎么就不能异步了

devtools就可以打个快照存下来，然后就可以实现 time-travel 了。Action 来提交 mutation 实现，这样可以方便地**跟踪每一个状态的。Vuex 中所有的状态更新的唯一途径都是 mutation，异步操作通过。如果 mutation 支持异步操作，就没有办法知道状态是何时更新的，每个 mutation 执行完成后都会对应到一个新的状态变更，这样。变化，**从而能够实现一些工具帮助更好地了解我们的应用。无法很好的进行状态的追踪，给调试带来困难。

原创 uniapp项目如何运行在微信小程序模拟器上

在HbuilderX中的小程序写完后自己一定要保存，否则会出不来效果。那么怎么让uniapp项目运行在微信小程序开发工具中呢。1 在hbuilderx中点击运行到小程序模拟器。然后打开微信小程序 在微信小程序中导入项目。一定要选择其中的这个文件夹 否则会报错如下。2 然后在项目目录中会生成一个文件夹。

原创 开发各种前端应用建议使用的技术栈

uni-app+uni内置api路由跳转+uview+scss+自己封装的uii内置数据请求api。不用axios 不用vue-router 组件库用vant微信小程序版的。

原创 微信小程序在使用vant组件库时构建npm报错

接着再进行npm构建时会报错。

原创 记录我的问题

9、在做这个需求的时候 因为是二手书 书的价格 应该随着用户的选择而变化 但由于vue中的数据更新并不是在数据更改后，dom上的数据马上就更新，所以会造成 数据更改 和dom树渲染总是差一步。一定要一定要~~~~~~在各个页面常用的标签，一定要指定父级！8、一些明显需要组件间传值的数据 但又觉得项目不大 用pina大财小用 但用本地缓存的话又很怪。5、评论要是个标签页 但是不能一开始都显示出来，要一开始只渲染两条，之后的点击再展开。4、当数据请求还没发送，但是模板中要用请求到的数据时，怎么办？

原创 excel文件的导入导出（vue）

3、在模板中用input来上传文件，配合change事件，用$event来获取事件对象，e.target.file[0]就是上传的文件对象。在读取成功的回调函数中：将文件数据流转换成js对象。3、在按钮的点击事件的回调函数中配置导出项。将内容转换成json格式的 发送给后端。2、在代码中导入安装的插件。5、将表格文件保存在本地。4、写change的回调。将文件转换成二进制数据流。获取上传的文件对象，将目标文件表读取出来。

原创 浏览器的工作原理

整个过程涉及到网络请求、资源加载、HTML 解析、CSS 解析、渲染树构建、布局、绘制、JavaScript 解析和执行等多个环节。浏览器会尽力优化性能，提高用户体验，并且通过不断更新迭代来支持新的 Web 技术和标准。当用户在浏览器中输入网址或点击链接时，浏览器会执行一系列操作来加载和显示网页内容。

原创 对回调函数的理解

在上述示例中，getData 函数模拟了一个异步操作，它会在 2 秒后获取数据。getData 函数接收一个回调函数作为参数 callback，并在异步操作完成后，将数据传递给回调函数。processData 函数作为回调函数传递给 getData 函数，在异步操作完成后被调用，并处理获取到的数据。通过使用回调函数，可以在异步操作完成后获取处理结果，并进行相应的处理或响应。通过将回调函数作为参数传递给异步函数，可以在异步操作结束后，通过调用回调函数来处理结果或执行相关操作。，传递给另一个函数的函数。

原创 diff算法的过程

若两个节点的key值和sel值，若相同，则认为这两个节点相同。3、如果为相同节点，进行 patchVnode，判断如何对该节点的子节点进。在 diff 中，只对同层的子节点进行比较，放弃跨级的节点比较，使。2、如果不为相同节点，则删除该节点重新创建节点进行替换/4、先判断一方有子节点一方没有子节点的情况(如果新的。children 没有子节点，将旧的子节点移除)/老节点的子节点进行操作（diff 核心）。匹配时，找到相同的子节点，递归比较子节点。elm：当前虚拟节点对应的真实节点。sel：当前节点标签名。

原创 Vue-router跳转和 location.href的区别

引进 router，然后使用 router.push( /url )来跳转，使用了 diff算法，实现了按需加载，减少了 dom的消耗。其实使用 router跳转和使用 history.pushState()没什么差别的，因为 vue-router就是用了 history.pushState()，尤其是在 history模式下。使用 history.pushState( /url )，无刷新页面，使用 location.href= /url来跳转，简单方便，但是。

原创 Vue-router跳转和 location.href的区别

引进 router，然后使用 router.push( /url )来跳转，使用了 diff算法，实现了按需加载，减少了 dom的消耗。其实使用 router跳转和使用 history.pushState()没什么差别的，因为 vue-router就是用了 history.pushState()，尤其是在 history模式下。使用 history.pushState( /url )，无刷新页面，使用 location.href= /url来跳转，简单方便，但是。

原创 html常见错误

通过设置不同的值，可以让元素在垂直方向上相对于其父元素或其他元素进行对齐，如顶部对齐、底部对齐、居中对齐等。图片间隙bug的方法是：1 为img设置display:block.或者给图片设置vertical-align。6、设置transform-origin原点位置为右侧居中： right center。1 、使用弹性盒子属性后，子元素如果是行内元素，display:block将会不管用。4、规定应用过渡效果的css属性名称是 transition-property。属性用于设置元素的垂直对齐方式。

原创 vue-router中的this.push()中的params和query有什么区别

query 参数用于传递查询参数，它是通过 URL 的查询字符串（?，它是通过路由的路径中的占位符进行传递的。注意，参数值会替换路由路径中对应的占位符，例如上述代码中的 123 将替换为路由的实际参数值。使用 query 参数进行导航时，参数会以键值对的形式附加到 URL 中。使用 query 参数进行导航时，参数会以键值对的形式附加到 URL 中。，适合传递**可选的、非必要的参数，**如分页参数、搜索条件等。它可以通过传递不同的参数来实现不同的导航方式，其中包括。进行传递，适合传递语义化的参数，如。

原创 若没有token，需要跳转到登录页面怎么做

2、在路由配置文件的全局前置导航守卫中做：（在跳转页面之前，若检查到没有token）1、在封装的axios请求中的请求拦截器中做：(在数据请求发送之前判断)

原创 打包React项目

项目打包

原创 TS中单例模式的简单写法

【代码】TS中单例模式的简单写法。

原创 Vue学习

1、vue介绍Vue属于JS框架，快速构建前端界面的技术。目前主流版本Vue2和Vue3。Vue核心思想：不操作dom，通过控制数据（数据驱动），就可以完成页面的所有操作。学习Vue框架：需要与前面学习的HTML、CSS、JS（DOM）进行对比，知道框架到底帮助我们将哪些技术进行封装（不用书写），哪些技术进行改变。官网：https://cn.vuejs.org/2、BS和CS架构软件设计架构中有两种架构方式：BS架构：Browser Server ：浏览器与服务器模型架构主要基于浏览器编写

原创 js中数组常用方法

7 concat（）基于当前数组中的所有项创建一个新数组。9 splice（）删除，插入，替换。10 jion（）变成相应字符串。3 unshift（）在头部加。5 reverse（）颠倒数组。6 sort（）数组按字母排序。4 shift（）在头部删。1 push（）在尾部加。2 pop（）在尾部删。8 slice（）截取。

原创 递归函数总结

在编程世界里面，递归函数是在一个函数通过名字调用自身情况下构成的，即函数内部调用函数本身。// 在使用递归策略时，必须有一个明确的递归结束条件，称为递归出口。// 当边界条件不满足时，递归前进；当边界条件满足时，递归返回。：通俗来讲就是函数自己调用自己。

原创 js作用域以及作用域链

/ 如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量 is not defined）// 首先，在自己的作用域内部查找，如果有，就直接拿来使用。// 如果没有，就去上一级作用域查找，如果有，就拿来使用。在局部作用域中定义的变量只能在这个局部作用域内部使用。这个作用域会一直存在(弊端)，直到页面关闭就销毁了。// 如果没有，就继续去上一级作用域查找，依次类推。// 通俗地讲，当执行函数时，如何获取变量的值。在全局作用域中定义的变量可以在任何地方使用.作用域分为全局作用域和局部作用域。

原创 Javascript基础一点点

3 变量提升，一般变量都是先声明再使用，js里的变量声明代码可以写在使用此变量的代码下面，不会报错，但会打印undefined.，有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素(专门操作网页内容)：表示一类事物，类是抽象(不具体)，不会占据内存，核心的意义是用来生成对象的。是声明变量时，无法确定此变量的值时，可赋值为null。属性：修饰对象的，描述的是对象的特点(私有的)：类下面的具体的事物，真实存在，占据内存的。刘德华会走，会跑，会唱歌，会演戏…