XH_jing的博客

在 Vue3 项目中，ref 的使用需要注意其初始化时机，以避免在值未赋值时调用方法。通过使用 nextTick、onMounted 等技术，可以有效避免此类问题。

因为默认情况下，npm不允许完全清空缓存。这个命令会删除所有缓存数据，确保你的后续安装使用的是最新的包。这段字面描述很清楚，你的缓存目录中包含 root 权限的文件，所以因为你没有权限操作这个文件就报错了。首先删除 node_modules 目录和 package-lock.json 文件，以确保从头开始。最后的安装完依赖，项目成功跑起来了，哦耶✌️。安装依赖包下载依赖的时候报错。执行此命令，问题解决。

根据使用浏览器提供的原生功能 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文本到剪贴板。在本地开发，或者说是在使用http://127.0.0.1:8088 或者 http://localhost:8088 本地调试时，是没有问题的，但是如果使用绑定 host 或者使用不安全域（域名+http）时，使用此功能，就会发生下面的报错：Cannot read properties of undefined (reading 'writeText')

在进行页面切换时，如果页面中存在异步执行操作 `setState` 或其他操作时，在未执行完成即进行页面切换（此时 react 组件将被销毁），便会抛出此异常信息。Can't perform a React state update on an unmounted component

前段时间更新升级 Mac 版本之后，使用 VS code 终端时出现 `xcrun: error: invalid active developer path` 的问题。xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

最近需要新开一个基于 React 移动端的项目。由于网上完整的 H5 初始化项目比较少，所以在此总结一下如何从 0—1 开发一套基于 React 框架的 H5 初始化项目，下载就可以直接进行开发，欢迎大家点赞收藏。............

目录问题描述原因分析问题解决总结今天在迁移旧项目时，出现了如下错误提示：Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'问题描述当前项目是一个生产环境正常运行的项目，由于我们要迁移服务器并且部署 k8s，所以需要重新部署上线该项目。使用 iframe 的场景就是在一个容器中展示另一个页面（也是我们自己的页面，只不过域名不同）才会抛出这个错误。这个项目的在测试环境和生产环境都是可以正

在配置中找不到方法，所以在点击响应时，会有警告，但是程序运行不会报错。这也是小白在学习小程序时经常容易犯的错误，今天竟然把一个开发了多个小程序的我给呆住了，现在就来分析一下产生这个问题的原因有哪些。

写在最前最近在做一个项目，碰到一个问题，其应用场景十分常见，类似于发微博的效果。问题比如我在编辑时：在内容编辑时，使用简单的 <textarea> 进行内容的获取，其中添加分段、空格等样式。需求我需要将编辑的内容原样展示，如果一行内容过多时，进行自动换行处理，且可以实现 \n 的手动换行比如这样展示：解决方案使用 <pre> 标签<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。

前言：众所周知，Vue2.0 对于数据响应式的实现上是有一些局限性的，比如：无法检测数组和对象的新增无法检测通过索引改变数组的操作针对以上问题，我们一般都会把锅甩给 Object.defineProperty。所以，在Vue 3.0 中，尤大把响应式数据部分弃用了 Object.defineProperty，而使用 Proxy 来代替它。难道 Object.defineProperty 真的要背这锅么，下面就来分析一下 Object.defineProperty 真的无法监测数组下标的变化吗？

问题：使用 Element el-table 组件时，给列 el-table-column 设置百分比%宽度无效( width="30%" )解决：Vue中要将 el-table-column 的宽度设置成百分比的话，不能通过设置 width来实现，而是要设置 min-width，并且每一列都必须设置 min-width。原因：el-table 组件会被 vue 解析成 html，Vue直接把百分号去掉把数值当做列宽来呈现，所以，width 设置百分比的值直接被解析去掉百分号% 变成 px 了。

什么是hosts？hosts 是一个没有扩展名的系统文件，其基本作用就是将一些常用的域名与其对应的 IP 地址建立一个关联“ 数据库 ”。当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从hosts文件中寻找对应的 IP 地址，一旦找到，系统就会立即打开对应网页，如果没有找到，则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。Mac 电脑设置hosts的方法？一、打开终端，找到如下图标二、在打开的窗口中输入 sudo vim /ect/hosts 然后按下回车，并输入电脑的

一、问题描述在开发 PC 端项目时，需要考虑哪些兼容性的问题？二、答案详解首先，为什么会出现浏览器兼容问题？各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦；由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。介绍一下目前最流行的五大浏览器以及五大内核浏览器：IE 浏览器Firefox（火狐）浏览器Chrome（谷歌）浏览器Safari 浏览器Opera 浏览器内核：Tr

临时安排接手一个 Android 应用项目开发，庆幸的是 Android APP 已经开发完成，我只需要在我的电脑上运行起来打包看一下效果即可，但是对于一个从未接触过安卓开发的我来说真的是费尽脑汁，并且这个前期准备真的是太麻烦了，而且会出现各种意想不到的问题。所以，我利用闲暇时间整理一下本次 Android 开发的体验经历，同时为其他没有接触过 Android 开发的小伙伴提供一下开发思路。如果懂行的小伙伴看出了什么门道，欢迎留言讨论，为其他小伙伴提供更多解决问题的思路。一、开发环境快速搭建

前言在进行需求开发时，碰到了一个神奇的、莫名的Bug。在项目中，我用到了正则表达式，出于职业操作，我先把它声明定义出来，没毛病吧。然后继续，我要判断一下我的输入是否符合当前的正则规则。此时，神奇的事情发生了。。。我输入的内容正则表达式判断结果我 true，但是 if 的判断结果却是 false 走了 elseWHAT？？？？甚是疑惑，一度以为是我眼花了，那先上问题代码代码let value = "0";const regExp = /\d/g;// \d => 匹配一个数字字

一、前言现在很多时候我们在访问Github时，速度都很慢，甚至很多时候都是无法访问的。今天，就给大家介绍一款可以实现GitHub高速访问的工具——DevSidecar。开发者边车，可以轻松解决 github打不开，github加速，git clone加速，git release下载加速，stackoverflow 加速等问题。直接下载请下滑至 三、使用方法 的 release下载二、软件介绍DevSidecar开发者边车，命名取自 service-mesh 的 service-sidecar

问题描述在使用 git pull 拉取代码的时候，会出现以下问题：error: Your local changes to the following files would be overwritten by merge: src/page/addWeddingInfo.vue src/page/weddingInfoList.vue src/store/index.jsPlease commit your changes or stash them before you merg

问题描述在使用 git 拉取、提交代码的时候，会出现 git Failed to connect to 127.0.0.1 port xxxx: Connection refused 的问题。原因：无法连接到127.0.0.1: xxx端口: 连接被拒绝。解决方案通过各种排查实验，总结出以下几种解决方案：方案一思路：查询当前是否有代理，如果有就取消。// 首先，查一下当前全局的 http 代理：git config --global http.proxy// 如果有代理，就取消git c

在项目开发过程中，在使用变量声明时，如果不注意，可能会造成类型错误比如：Uncaught (in promise) TypeError: Assignment to constant variable.未捕获的类型错误：赋值给常量变量。原因我们使用 const 定义了变量且存在初始值。 后面又给这个变量赋值，所以报错了。ES6 标准引入了新的关键字 const 来定义常量，const 与 let 都具有块级作用域：使用 const 定义的常量，不能修改它的值，且定义的常量必须赋初值；l

在这里将主要对在使用 Git 时遇到得一些问题进行总结归纳以及输出一些相应得解决方案，为此来做参考。

最近在进行项目模块的迭代开发工作，偶尔会碰到几个值得记录的问题，这里就给大家整理分享一下，以及相应的解决方案。

写在最前在开发项目过程中，碰到这么一个需求：当用户点击取消或者拒绝时，系统直接关闭小程序，返回微信客户端。实现的功能与小程序中右上角的圆圈功能类似。功能实现其实功能实现起来很简单，只不过我们之前一直没有注意到，navigator 中有一个跳转方式 open-type 属性，里面的属性值有一个是 exit 即 退出小程序。 微信小程序 · navigator<navigator open-type="exit" target="miniProgram"> <button

目录前言一、官方文档二、开启普通链接二维码打开小程序功能三、配置流程四、配置实例五、踩坑记录1. 扫码打开小程序出现 "页面不存在"2. 测试版本需要注意的几个点六、总结前言在现有需求的驱动下， 需要手动生成普通二维码并且携带动态参数来跳转打开小程序实现后续功能，本文章主要用于记录如何配置普通链接二维码打开小程序和配置过程中踩过的坑。一、官方文档扫码打开小程序接入指南二、开启普通链接二维码打开小程序功能登录 微信小程序公众平台，左边菜单列表里面找到 开发 选项，点击下面的 开发管理 ，右

常见的登录验证方式账号/邮箱/手机号 + 验证码 + 密码邮箱 + 动态邮箱验证码手机号 + 动态短信/语音验证码第三方授权登录，微信扫码登录等OCR人脸识别校验登录（移动端可用方案，暂未分析）各类验证方式的流程图以及各自特点分析1. 账号/邮箱/手机号 + 验证码（滑块拼图验证、文字点选验证、图标点选验证等） + 密码流程图：验证码框示例：滑块拼图验证：文字点选验证：图标点选验证：此登录验证方式比较常见。优点：（1）此登录验证方式比较常见，用户操作起来已经比较熟悉

在小程序开发过程中，只要稍不注意代码细节，就会出现很多 warnings 警告，虽然在对小程序的运行并没有什么影响，但是作为一名严谨的程序猿，是不允许它们存在的。下面我将从我的实际项目开发过程中碰到的warnings 问题进行分析处理。Warning 1: Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors。首.

在小程序或者是移动端开发过程中，总是会碰到当你点击一个可以点击的元素的时候，在这个元素下会出现一个高亮的正方形浅蓝色背景。效果如下：解决方案：通过属性 -webkit-tap-highlight-color 进行解决。属性概述：当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。具体内容见：-webkit-tap-highlight-color要解决这个问题，就可以通过禁用这个高亮就可以，只需要设置颜色的alpha值为0即可。page .

微信小程序 - swiper组件定义一个轮播图 swiper 组件：// swiper.wxml<swiper indicator-dots="true"> <block wx:for="{{imgURL}}" wx:key="*this"> <swiper-item> <view class="swiper-item {{item}}"></view> </swiper-item> </block>

前言当我们搞定微信小程序之后总会下意识的提高点难度，要不要顺手把支付宝小程序也给搞定？？这不，我来趟坑了。以下问题只是我在转换过程中考虑到的和碰到的一些问题，但是应该也是大部分开发者会碰到的一些问题，欢迎大家阅读，有任何问题欢迎指正，欢迎评论区讨论。一、微信小程序（wx）与支付宝小程序（alipay）区别视图层页面：wxml —— axml（1）冒泡、非冒泡事件：bindtap —— onTap（驼峰命名）catchtouchstart —— catchTap（2）列表渲染：wx:

背景介绍对于目前开发市场分析而言，微信小程序一直是小程序开发行业的领头羊，但是其他小程序也一直在紧追不舍，比如支付宝小程序、百度小程序、头条小程序、抖音小程序、美团小程序等等，很多互联网巨头都有在做自己的小程序，所以说小程序也是未来的大势所趋。但是开发者开发了一个微信小程序之后，同时又想把这个微信小程序发布到支付宝小程序或者其他更多小程序平台上，可惜微信小程序并不能直接发布到支付宝小程序平台上，两个平台的小程序是不兼容的。因此开发者需要对微信小程序代码进行修改，需要将现在的微信小程序代码调整转换为能够在

实现场景：一个列表的文章内容过长，显示的时候要省略显示，但是还要有一个展开查看全文的点击事件，可以实现展开与折叠。实现思路：使用两层容器，父标签设置max-height，预计成要显示行数的高度，并且使用overflow:hidden; 溢出隐藏；然后使用SelectorQuery wx.createSelectorQuery()query去查子标签的高度，如果子标签的高度高一些，就显示这个展开按钮；2.1 针对使用wx:for循环来渲染的列表，可以在wx:for的标签上，加个class，s

使用场景：在一段文本中，显示的内容过多，超出原本设置的范围，现在需要将它进行分行显示。实现方案：前提：给 view或者 text 容器设置默认的 display: block然后设置属性：text-overflow:ellipsis; word-wrap:break-word;就可以实现自动换行。如果是因为大段文本内容过多，需要实现折叠与展开效果，请移步...

在进行渠道管理时，由于要在各种不同端（包括任何形式的pc端、移动端、app、Android/IOS、小程序等）中内嵌h5页面来展示不同的内容，且具有良好的兼容性。使用navigator.userAgent 可以实现该功能，且在所有浏览器都支持。一句就可以判断是什么端window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "mobile_web端页面" : "PC端页面"/.

swiper 插件从后台获取数据没问题，css 代码啥的也没问题，但是图片不动，应该怎么解决？本质上就是数据加载顺序，生命周期的问题。主要原因：swiper提前初始化了，而这个时候，数据还没有完全出来。解决方法：（两个方向）从swiper 入手，在swiper中写 observer:true/observeParents:truelet myswiper = new Swiper(".swiper-container" , { autoplay: true, loop: true,

在初次使用React 的装饰器时，第一次在项目中使用 @ 会报错，截图为证查了很多资料终于彻底解决，下面我将列出如何给装饰器打好前战！首先，安装插件"devDependencies": { "@babel/core": "^7.10.5", "@babel/plugin-proposal-decorators": "^7.10.5", "@babel/preset-env": "^7.10.4", "customize-cra": "^1.0.0", .

在项目开发过程中，会经常碰到端口被占用的问题，一般情况下，为解决端口冲突，会选择一个不常用的端口号进行测试，但是有时候测试过程中，会提示：Error: listen EADDRINUSE: address already in use 127.0.0.1:3000意思就是 3000 端口被占用了，其实解决方案很简单。解决方案：打开 cmd；输入 netstat -nao | fin...