fangyuan__-优快云博客

原创 yarn install报错：tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80

今天开发的时候由于yarn版本问题所以设置了各种东西，最后发现yarn install的时候报错了。但是发现还是会报错，于是继续苦苦搜寻，最后发现了原来yarn可能会存在缓存，于是需要清掉缓存。1.清空相关代理，http-proxy和proxy。试了一下，果然可以成功install了。2.查看配置代理的结果。

2024-10-29 16:18:36 473

原创【学一点儿前端】银行×微信：前端uniapp实现微信免输绑卡需求

接到一个银行对接微信免输绑卡的需求，在微信小程序实现页面，用uniapp编写，本来想上网抄作业，结果发现免输绑卡的资料非常少，只有官方文档和微信原生小程序的开发资料，于是我自己进行一段时间的摸索实现了，鉴于网上实现案例太少，所以把本次方案按我理解的实现顺序分享出来。需要定好测试用小程序以及生产用小程序（测试为在体验版测试，两个小程序可以为同一个），将要求的信息发送邮件给微信支付对接方以获取appkey和测试用微信安装包（appkey在开发需要用到）。随后就是noInputBind.vue的代码了。

2024-09-26 15:39:35 553

原创【学一点儿前端】本地或jenkins打包报错：getaddrinfo ENOTFOUND registry.nlark.com.

我本地打包失败了，出现了node版本不匹配问题，其实可以升级node版本解决，但是由于是公司项目，最好还是不要动node版本，于是我继续查找解决方法。本地打包是没有问题的，一开始觉得是jenkins配置的问题，但是项目组内的大佬说这种镜像源问题先看前端自己能不能解决。registry.nlark.com替换为registry.npmmirror.com。想起之前淘宝源彻底不能使用的问题，所以我进行了尝试，把yarn.lock文件里面的。更改后重新上传打包，发现成功打包了，问题成功解决。

2024-07-24 19:37:06 5376 6

原创【学一点儿前端】iOS微信小程序在密码input框中使用系统保存的密码后，密码v-model绑定值不更新的问题

这让iOS用户在微信小程序进行登录的时候，可以把当前账号密码保存进系统密码箱，之后再次登录时，输入账号后点击密码框，系统自带的键盘有密码箱的选项，选择密码箱的密码后，密码框正常显示密码，但是点击登录按钮后提示“请输入密码”。因为iOS在页面中只有第一个密码框会提示保存密码和使用密码箱，那我们可以通过在密码框上多加一个用户看不到的密码框，骗过iOS系统，以阻止真正的密码框的保存密码功能，从源头解决问题。成功骗过iOS，输入账号后点击密码框不提示使用密码箱密码，并且输入密码后失焦也不提示保存密码了。

2024-06-24 21:16:11 1327 2

原创【学一点儿前端】单页面点击前进或后退按钮导致的内存泄露问题（history.listen监听器清除）

结果显示，每次点击“上一步”按钮时，JavaScript堆内存（JS Heap）和事件监听器（listener）的数量显著增加，并且随着点击次数的增加，这种增长趋势变得越来越明显，所需的时间也逐渐延长。unlisten是history.listen返回的函数，用于移除之前添加的监听器，useEffect钩子的清理函数机制保证了在history变化时，只有旧的监听器会被移除，而新的监听器会在清理之后重新添加，避免内存泄漏。这样，我们需要在监听器用完的时候直接移除添加的监听器。重试了一次，问题完美解决。

2024-06-21 18:05:33 329

原创【React】useEffect——如何让函数式组件也能使用componentDidMount、componentDidUpdata和componentDidUnmount

那些不涉及计算的操作（比如生成日志、储存数据、改变应用状态等等），函数式编程将其称为 “副效应” （side effect）。由于副效应非常多，所以钩子有许多种。React 为许多常见的操作（副效应），都提供了专用的钩子。useState()：保存状态useContext()：保存上下文useRef()：保存引用上面这些钩子，都是引入某种特定的副效应，而 useEffect()是通用的副效应钩子。找不到对应的钩子时，就可以用它。

2024-05-18 23:44:23 677

原创【React】如何让函数式组件也能使用state——useState（Hooks）

但是React官方提供了一个Hooks叫useState，它解决了函数式组件和类式组件的差异，让函数式组件拥有了类式组件所拥有的 state ，同时新增了一些 API ，让函数式组件，变得更加的灵活。count 是初始化的值，而 setCount 就像是一个 action 对象驱动状态更新，我们可以通过 setCount 来更新 count 的值。这里利用了useState，让函数式组件能够维护自己的 state ，它接收一个参数，作为初始化 state 的值，赋值给 count。

2024-05-15 23:34:55 417

原创【React】React的懒加载组件lazy和Suspense

在一个多路由项目中，页面加载时，所有的路由组件都会被加载如果我们有很多个路由组件，但是用户只点击了几个，这就会有很大的消耗，因此我们需要做懒加载处理，我们点击哪个时，才去加载哪一个而React当然想到了这一点，给我们提供了LazyLoad。

2024-05-13 23:42:06 497

原创【React】redux开发者工具redux-devtools-extension的安装和使用

redux-devtools-extension: 是一个用于Redux的开发者工具扩展。适合用于需要调试和监控Redux应用的状态管理。特点是可以提供实时的状态查看、行动日志和错误检测等。

2024-05-13 22:16:07 815

原创【React】setState的两种形式以及setState后console输出数值不对的原因

那应该怎么查看更新后的值呢？但实际上React 状态更新是异步的，React 不会立即的去更新数据，因此我们输出的 count 值会是状态更新之前的数据。第一个参数中传入了一个函数，这个函数可以接收到 state ，通过更新 state 中的 count 值，驱动页面的更新。实际上，对象式的 setState 是函数式 setState 的语法糖。就能成功的获取到最新的数据了。

2024-05-13 00:49:57 643

原创【学一点儿前端】Bad value with message: unexpected token `.`. 问题及解决方法

注意到错误字符‘.’，这个错误通常发生在处理 JavaScript 或者 HTML 中的动态表达式中，日常使用二分法不断缩小报错代码范围，最终锁定到这一行。‘@babel/plugin-proposal-optional-chaining’, 是babel7用来解析js中的可选链运算符的；直接给项目安装依赖，让项目支持使用可选链操作符，这个方法是从其它大佬那边学到的，方便在改动代码量大的时候用。‘vue-template-babel-compiler’，是用来解析vue模版中的可选链运算符；

2024-05-05 19:15:34 869 2

原创【React】React-redux多组件间的状态传递

当某个组件需要使用 store 中的值时，可以通过 connect 中的两个参数来获取，例如这里我们需要使用到 Count 组件的值，可以通过 .count 来从 store 中取值。暴露的 nanoid 是一个函数，我们每一次调用时，都会返回一个不重复的数，用于确保 id 的唯一性，同时在后面的 map 遍历的过程中，我们将 id 作为了 key 值，这样也确保了 key 的唯一性，关于 key 的作用，可以看看 diffing 算法的文章。当前组件需要使用的数据都需要在 connect 中暴露。

2024-05-04 01:22:12 1064 1

原创【学一点儿前端】vue3+vite不能使用require引入包的问题（require is not defined）

前端有很多的工具包是commonjs的写法，只能用require引入，而vite+vue3构建的项目不能使用require，只能用import，为了能够方便地引入commonjs工具包，我们需要把这些工具包转为es module。使用 @rollup/plugin-commonjs 插件，用于将CommonJS模块转换为ES6模块的Rollup插件.2、在vite.config.ts配置中添加该插件，注意 commonjs0必须在vue()上面，否则不生效。3、随意导入commonjs工具包。

2024-03-14 20:42:37 10114

原创【无标题】yarn报错 “https://registry.npm.taobao.org/...: certificate has expired“如何处理

今天在jenkins打包项目时yarn打包报错，查看log发现npm淘宝镜像报错。

2024-02-01 15:11:46 4469 4

原创【学一点儿前端】真机调试本地公众号网页项目并能调用扫码等功能

微信公众号网页开发的真机调试一直是很头疼的事情。原因一微信公众号配置的JS安全域名只有三个，一个大中型的公众号这三个JS安全域名都是生产的域名，不可能预留域名用于开发和调试。原因二在微信里面只有访问正确的安全域名才能调用wx.config用来调用微信的接口。调试器和真机有差异。原因三在实际的开发中我们不可能写一部分代码上传到生产的服务器上再用真机调试，这样是非常麻烦的事情。解决方案通过微信里面的链接访问本地的前端服务进行真机调试。

2023-12-08 20:45:58 1594

原创【uniapp】uniapp开发小程序定制uni-collapse（折叠面板）

大功告成，效果如下。

2023-11-23 21:04:33 2881

原创【React】React-Redux基本使用

首先，我们在 src 目录下，创建一个 containers 文件夹，用于存放各种容器组件，在该文件夹内创建 Count 文件夹，即表示即将创建 Count 容器组件，再创建 index.jsx 编写代码。connect 方法是一个连接器，用于连接容器组件和 UI 组件，它第一次执行时，接收4个参数，这些参数都是可选的，它执行的执行的结果还是一个函数，第二次执行接收一个 UI 组件。在我们的生产当中，我们可以直接将 UI 组件写在容器组件的代码文件当中，这样就无需多个文件。

2023-11-15 10:34:51 517

原创【React】Redux基本使用

图的解释：首先组件会在 Redux 中派发一个 action 方法，通过调用 store.dispatch 方法，将 action 对象派发给 store ，当 store 接收到 action 对象时，会将先前的 state 与传来的 action 一同发送给 reducer ，reducer 在接收到数据后，进行数据的更改，返回一个新的状态给 store ，最后由 store 更改 state。在 Reducer 中，我们需要指定状态的操作类型，要做怎样的数据更新，因此这个类型是必要的。

2023-11-14 14:15:09 467

原创【React】Antd 组件基本使用

由于这些组件采用的颜色，都是支付宝蓝，有时候我们不想要这样的颜色，想要用其他的配色，这当然是可以实现的，我们需要引用一些库和更改一些配置文件来实现在视频中，老师讲解的是 3.几版本中的实现方法，这种方法需要去暴露 React 中的配置文件，这种操作是不可返回的，一旦暴露就不可回收。我觉得这不是一个好方法~在 antd 最新版中，引入了 craco 库，我们可以使用 craco 来实现自定义的效果首先我们需要安装 craco同时我们需要更改 package.json 中的启动文件},

2023-11-14 11:05:54 704

原创【React】编程式路由，push 与 replace，withRouter，BrowserRouter 和 HashRouter 的区别

对于 BrowserRouter 来说它使用的是 React 为它封装的 history API ，这里的 history 和浏览器中的 history 有所不同噢！当我们需要在页面内部添加回退前进等按钮时，由于这些组件我们一般通过一般组件的方式去编写，因此我们会遇到一个问题，无法获得 history 对象，这正是因为我们采用的是一般组件造成的。默认情况下，开启的是 push 模式，也就是说，每次点击跳转，都会向栈中压入一个新的地址，在点击返回时，可以返回到上一个打开的地址。它们的底层实现原理不一样。

2023-10-20 17:36:17 760

转载【React】React路由的配置和传参方式

其实是因为，Route 的机制，当匹配上了第一个 /about 组件后，它还会继续向下匹配，因此会出现两个 About 组件，这时我们可以采用 Switch 组件进行包裹，Switch匹配到第一个路由就不会继续匹配了。首先我们得 React 中路由得注册是有顺序得，我们在匹配得时候，因为 Home 组件是先注册得，因此在匹配的时候先去找 home 路由，由于是模糊匹配，会成功的匹配。它会按照第一个来匹配，如果第一个没有匹配上，那就会失败，这里的 a 和 home 没有匹配上，很显然会失败。

2023-10-17 17:55:13 271

转载【React】React路由和NavLink

在我们前面的内容中，我们是把组件 Home 和组件 About 当成是一般组件来使用，我们将它们写在了 src 目录下的 components 文件夹下，但是我们又会发现它和普通的组件又有点不同，对于普通组件而言，我们在引入它们的时候我们是通过标签的形式来引用的。那我们是不是可以想想办法封装一下它们呢？首先，有一点非常重要的是，我们在标签体内写的内容都会成为一个 children 属性，因此我们在调用 MyNavLink 时，在标签体中写的内容，都会成为 props 中的一部分，从而能够实现。

2023-10-17 14:36:18 265

原创【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

ajax是js异步技术的术语，早期相关的api是xhr，它是一个术语。fetch是es6新增的用于网络请求标准api，它是一个api。axios是用于网络请求的第三方库，它是一个库。易混淆点xhr是ajax的一种实现fetch应该和xhr作比较，不能和ajax和axios做比较axios和fetch都基于promisefetch使用了关注分离的设计思想（请求和响应结果分开处理）axios目前也支持fetch。

2023-10-16 17:07:05 1003

原创【Vue/React】浅谈Vue/React中的Diff算法以及key的作用和index不适合作为key的原因

2.不添加key,diff算法进行的只是浅层比较，例如在新旧DOM对比时，两处引用的是一样的组件component，但它比较到父节点span与div不同就停止比较了，重新渲染span和div下的所有子节点，这样重复渲染太多，效率极低。Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom。旧虚拟DOM 中未找到与新虚拟DOM 相同的 key，则根据数据创建新的真实DOM，然后渲染到页面。

2023-10-07 14:31:21 374

原创【React】React组件生命周期以及触发顺序（部分与vue做比较）

当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新render 以及 render 之前的生命周期，则父组件先执行render 以及 render之后的声明周期，则子组件先执行，并且是与父组件交替执行当子组件进行卸载时，只会执行自身的 componentWillUnmount 生命周期，不会再触发别的生命周期。

2023-10-01 22:59:40 1283

原创【函数式编程】函数式编程、纯函数、高阶函数以及函数柯里化

最近在学习React，看到了高阶函数以及函数柯里化等概念，因为对这些内容还比较生疏，于是查找了资料，发现都跟一个叫函数式编程的思想有关，于是搜集各方资料，稍微系统性地做了点自己的记录用于以后的复习。，写得十分详细。

2023-09-28 16:09:02 169

原创【React】组件实例三大属性state、props、refs

在组件标签中传递 props的值组件函数的参数为 props对 props的限制和默认值同样设置在原型对象上。

2023-09-27 18:44:24 309

原创【React】函数式组件和类式组件的用法和逻辑

当应用是以多组件的方式实现，这个应用就是一个组件化的应用。推荐采用箭头函数，箭头函数的 this 指向。通过 bind 改变 this 指向。上面的代码经历了以下几步。

2023-09-25 01:13:08 425

原创【React】React概念、特点和Jsx基础语法

声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。js 的写法并不是常用的，常用jsx来写，毕竟JSX更符合书写的习惯。React 是一个用于构建用户界面的 JavaScript 库。JSX 允许在模板中插入数组，数组自动展开全部成员。

2023-09-24 02:25:38 289

原创【Pinia】Pinia的概念、优势及使用方式

学习公司的项目，发现用到了Pinia，于是上网学习了一下，发现了一篇比较优秀的文章，于是将极少部分放到此记录学习，原文链接在末尾。

2023-09-18 18:54:18 1507

原创【uni-app】uni-app内置组件和扩展组件

先引用uni-app官网原文：uni-app是有内置组件的。这和web开发不一样。web开发基本上不用基础组件，都是找一个三方ui库，全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。但uni-app体系不是这样，内置组件就是为手机优化的。但内置组件只能满足基础需求，更多场景，需要扩展组件。扩展组件是基于内置组件的二次封装，从性能上来讲，扩展组件的性能略低于内置组件，所以开发者切勿抛弃内置组件，直接全套用三方UI组件库。

2023-09-14 20:35:11 1207

原创【TypeScript】项目中对于TypeScript的打包处理

经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。根目录下创建webpack的配置文件webpack.config.js。根目录下创建tsconfig.json，配置可以根据自己需要。

2023-09-14 10:47:18 742

原创【学一点儿前端】box-sizing以及flex:1的解释

这意味着，如果您设置一个元素的宽度为100px，然后添加10px的边框和20px的内边距，那么元素的总宽度将变为100px + 10px（左边框）+ 10px（右边框）+ 20px（左内边距）+ 20px（右内边距）= 160px。这意味着，如果您设置一个元素的宽度为100px，然后添加10px的边框和20px的内边距，元素的总宽度将保持为100px，边框和内边距的尺寸将从内容区域中减去。flex-grow 为 n 的项目，占据的空间（放大的比例）是 flex-grow 为 1 的 n 倍。

2023-09-13 20:22:23 400

原创【TypeScript】TypeScript中的泛型

上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型。就是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

2023-09-10 23:27:19 212

原创【TypeScript】TypeScript 数据类型

在编写代码时，有时并不清楚一个值是什么类型，这时就需要用到any类型，它是一个任意类型，定义为any类型的变量就会绕过TypeScript的静态类型检测。在实际使用中，如果有类型无法确定的情况，要尽量避免使用 any，因为 any 会丢失类型信息，一旦一个类型被指定为 any，那么在它上面进行任何操作都是合法的，所以会有意想不到的情况发生。never 类型指永远不存在值的类型，它是那些总会抛出异常或根本不会有返回值的函数表达式的返回值类型，当变量被永不为真的类型保护所约束时，该变量也是 never 类型。

2023-09-10 18:04:46 236

空空如也

空空如也