CCの日记

如何真机调试（H5）前提条件，手机设置为开发者模式，并且与电脑在同一局域网下。 手机端同时需要用同样的浏览器，建议使用edge。 记住下面两个地址 edge://inspect/#devices edge://flags/#unsafely-treat-insecure-origin-as-secure 如果是谷歌浏览器把edge换成chrome。 操作步骤 启动项目 链接手机 在对应浏览器打开edge、chrome ​ 链接正常的情况下会出现下图 如果需要用到摄像头还需要打开edge,如下图启用Insecure origins treated as secure 点击inspect，此时手机端浏览器就会弹出项目界面，这样就可以在电脑修改代码，查看控制台，而在手机查看效果了。

本地项目使用nginx转发端口后，ant-design-pro项目不停刷新，无法正常进入问题描述：项目原来是运行在8000端口下，现在我想把它代理到8001端口，发现页面不停地刷新，并且控制台报错如下图所示 问题原因经查询我在UmiJS官网找到了问题的答案，带静态资源到本地后，一直restart刷新页面，问题的关键在用于代码热更新的MFUS服务无法访问，该服务是一个websocket链接，因为代理后它所走的链接不正确，所以会一直重连而导致页面不断刷新。 解决办法在项目的根目录也就是src同级目录创建一个.env.local文件，用于控制开发时的环境变量，该文件最好放入.gitignore里面，在文件添加如下内容： SOCKET_SERVER=http://127.0.0.1:8001/ 即指定一个和开发服务器地址相同的SOCKET_SERVER环境变量。

如何在本地服务中使用自签名证书开启网站https因为业务需要使用网页嗲用手机的摄像头进行扫码，然http是不支持普通浏览器调用摄像。 安装OpenSSL工具 windows：https://slproweb.com/products/Win32OpenSSL.html linux：https://www.openssl.org/source/ 创建CA证书1. 生成RSA私钥打开终端，进入要存储证书的目录，输入下面的命令 openssl genrsa -des3 -out server.key 2048 这样是生成rsa私钥，des3算法，openssl格式，2048位强度。server.key是密钥文件名 通过以下方法生成没有密码的key:openssl rsa -in server.key -out server.key server.key就是没有密码的版本 2. csr生成方法openssl req -new -key server.key -out server.csr 3. 生成CA的crtopenssl req -new -x509 -key server.k...

在微信小程序项目开发的过程，随着业务需求的增长，程序包也来越大，总所周知，微信对于小程序代码包 是有要求的，总体积不得超过2M，所以我们必须对小程序进行分包。 分包的优点 减少初始加载时间。如果整个小程序页面非常庞大，包含了大量的文件代码，那么初始加载就会耗费大量的时间，影响用户体验。 按需更新维护。通过将不同功能的模块或页面分离到不同的包中，可以实现独立的更新和维护。 小程序启动时，默认下载主包并启动主包内的页面，当用户进入分包内的某个页面时，客户端会把对应的分包下载下来。 如何分包微信小程序每个分包大小 不得超过2M，总体积不超过20M。如果支持分包的小程序目录如下 123456789101112131415├── app.js├── app.json├── app.wxss├── packageA│ └── pages│ ├── cat│ └── dog├── packageB│ └── pages│ ├── apple│ └── banana├── pages│ ├── index│ └── logs└...

在react中调用后置扫码，获取二维码内容这里我们为了方便直接使用一个库react-qr-reader 安装npm insstall react-qr-reader 使用直接在组件中引用 123456789101112131415161718192021222324import React, { useState } from 'react';import { QrReader } from 'react-qr-reader';const Test = (props) => { const [data, setData] = useState('No result'); return ( <> <QrReader onResult={(result, error) => { if (!!result) { setData(result?.t...

是什么diff 算法是一种通过同层的树节点进行比较的高效算法 其中会有两个特点： 比较只会在同层级进行比较，不会跨层级比较 在比较过程中，循环从两边向中间比较 diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实的dom的新旧VNode节点进行比较 比较方式diff整体策略为：深度优先，同层比较 比较只会在同层级进行，不会跨层级比较 比较过程中，循环从两边向中间收拢 一层一层比较，检测到R下没有A，则会把A删掉，然后在D下创建B、C 找到对应的真实dom，称为el 判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接return 如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点。 如果oldVnode有子节点而Vnode没有，则删除el的子节点 如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el 如果两者都有子节点，则执行updateChildren函数比较子节点

了解主机中的命令行1[root@iZbp1aye0hag6upbmdnla7Z ~]# root:指的是用户名 iZbp1aye0hag6upbmdnla7Z：主机名 ~：当前用户的home目录，当前为～，就是root目录 查看当前目录的文件列表ls：cd到想要查看的目录，输入ls会列出当前目录的所有文件目录，或者直接在ls后面跟上绝对路径或者相对路径，效果一样 ls /相当于查看根目录的内容 ls -l详细查看目录下的所有内容 查看当前在哪个目录下pwd cd+目录名称（将用户切换到指定目录)cd后面可以加绝对路径也可以加相对路径 cd ..返回上一级目录 touch+文件名称可以创建空文件 echoecho+字符串，打印字符串到控制台（没什么实际作用） echo+字符串+>文件名称（已经存在），写入字符串到该文件，如果多次使用，会覆盖前面的操作，以最后一次为准 mkdir创建目录rm删除文件/目录 使用rm删除的时候，rm只能删除文件，不能删除目录，输入y的时候表示删除，输入n表示不删除。如果想要删除目录，就需要使用rm-r进行操作 rm-r +要...

Ant Design Pro中的多个环境变量文件在Vue项目中我们会发现，有环境文件.env文件，可以配置生产和调试环境下的不同环境变量，在antdpro中该如何做到呢？接下来我们就来看看如何在项目中添加环境变量。 在antdpro项目中有config文件夹，里面是项目的配置信息，因为环境变量是在node环境中词啊可以访问到，所以antdpro提供了defined配置项，我们只需要将所需变量写到改配置项下面就可以在其他非node环境中使用，如下： 1234567//config/config.ts define: { API_URL: '/dev-api', MQTT_URL: 'wss://www.example.com/mqtt', MQTT_USERNAME: 'hzpc', MQTT_PASSWORD: '123456' }, 然后我们在app.tsx 中就可以访问到 123456//app.tsxexport const request = &...

ant design charts 踩坑记录connectNulls属性报错有时候我们的数据并不是完全的，我们可以通过connectNulls属性进行缺失补全，并且可以自定义补全部分的颜色。 我自己试了下，如果使用Line组件要求第一条数据必须是有效数据，不能上来就是缺失数据（Null NaN之类的数据，但是如果使用的面积图，第一条数据可以是空。 对于横轴是日期的要求如果后端返回的数据是日期形式的字符串，需要我们使用new Date转化为date对象，这样组件回自动帮咱们优化横轴布局，不会出现很密集的横轴。 legendlegend属性有一个坑，比如我们需要一个双折线图，不知什么原因很导致，lengend标题自动省略，并且没有可以控制的属性。 持续收集问题 2024/6/9