2 posts tagged with "记录"

1. Homebrew​

• brew help
• brew list
• brew install
• brew update
• brew uninstall

2. vscode的code命令​

• 打开VSCode –> command+shift+p –> 输入shell command –> 点击提示Shell Command: Install ‘code’ command in PATH运行
• 打开终端，cd到要用VSCode打开的文件夹，然后输入命令code .即可打开

3. 右键打开终端​

在文件(夹)上右键--->服务--->新建位于文件夹位置的终端窗口

4. 显示（或者隐藏）隐藏的文件​

Shift+Command+(.)

5. 卸载手动安装的node​

• 运行如下命令： sudo rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}

• 您必须注意，如果您运行此特定命令，您并没有实现完整的卸载 Node 任务。 那是因为主目录或主目录不会受到影响。 因此，通过这种方式，您仍然必须删除在您的主目录中找到的相关文件和文件夹。

• 之后，您必须删除使用 NPM 安装的每个全局包。 为此，请在终端上运行以下命令rm –rf ~/.npm。 键入引号中的命令后，您将完成在 Mac 上卸载 Node 和卸载 NPM 的任务。

6. 远程连接​

• ssh 连接远程服务器
  • 执行 ssh 服务器用户名@服务器ip，然后输入密码

• sftp 可以上传文件到远程或者从远程下载文件，例如：要将本地的b文件夹(a/b/c.txt) 放到 远程e/f下面

  • 在远程e/f下 mkdir b
  • 在本地cd a
  • 执行 sftp 服务器用户名@服务器ip，然后输入密码
  • cd e/f/
  • 执行 put -pr b (要保留修改时间、访问时间以及被传输的文件的模式，请使用 -p 标志；-r 参数允许拷贝子目录和子文件)
  • 退出 sftp： 使用 bye 或者 quit 或者 exit

• sftp的一些命令

  • get remotefile [localfile] 远程文件传输到本地。
  • mkdir directory 创建一个远程目录。
  • rmdir path 删除一个远程目录。

7. kill端口号​

sudo lsof -i :<PortNumber>

kill -9 <PID>

8. 鼠标方向调整​

9. vscode快捷键​

• Shift + Option + F 格式化代码
• Ctrl + - 返回上一步

10. 可视化查看/usr /tmp /var /etc等目录​

进入“访达”的偏好设置，选择“边栏”，勾中“硬盘”，再使用Shift+Command+(.)显示隐藏文件

11. 截屏​

Shift ⇧ + Command ⌘ + 5

12. 快速查看​

若要在不打开文件的情况下查看其预览，请选择文件，然后按下空格键。

文件上传​

单文件上传​

<div className="empty">
  <input
    className="uploader-wrapper__input"
    type="file"
    <!-- capture="environment" 直接调起后置摄像头  capture="user" 直接调起前置摄像头 -->
    accept="image/jpg,image/jpeg,image/gif,image/png"
    onChange={handleFileChange}
  />
  <img src={cameraIcon} />
  <div>上传照片</div>
</div>

.empty {
  width: 186px;
  height: 186px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  &>img {
    width: 56px;
    height: 56px;
  }
  position: relative;
  .uploader-wrapper__input {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    cursor: pointer !important;
    opacity: 0;

    &:disabled {
      cursor: not-allowed;
    }
  }
}

function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
  // loading
  setShowLoadOverlay(true);
  const $el = event.target;
  const { files } = $el;
  if (files && files[0]) {
    const formData = new FormData();
    formData.append('file', files[0]);
    axios.post(import.meta.env.VITE_UPLOAD_URL, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    }).then(response => {
      setShowLoadOverlay(false);
      // 上传成功后的业务逻辑
      // ...
    }).catch(error => {
      console.error('上传失败', error);
      Toast.show({
        content: '上传失败',
      });
      setShowLoadOverlay(false);
    });
  } else {
    setShowLoadOverlay(false);
  }
}

多文件上传​

<div className="empty">
  <input
    className="uploader-wrapper__input"
    type="file"
    <!-- capture="environment" 直接调起后置摄像头  capture="user" 直接调起前置摄像头 -->
    accept="image/jpg,image/jpeg,image/gif,image/png"
    multiple
    onChange={handleFileChange}
  />
  <img src={cameraIcon} />
  <div>上传照片</div>
</div>

.empty {
  width: 186px;
  height: 186px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  &>img {
    width: 56px;
    height: 56px;
  }
  position: relative;
  .uploader-wrapper__input {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    cursor: pointer !important;
    opacity: 0;

    &:disabled {
      cursor: not-allowed;
    }
  }
}

function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
  // loading
  setShowLoadOverlay(true);
  const $el = event.target;
  const { files } = $el;
  if (files) {
    const formData = new FormData();
    for (let i=0; i<files.length; i++) {
      formData.append(i, files[i]);
    }
    axios.post(import.meta.env.VITE_UPLOAD_URL, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    }).then(response => {
      setShowLoadOverlay(false);
      // 上传成功后的业务逻辑
      // ...
    }).catch(error => {
      console.error('上传失败', error);
      Toast.show({
        content: '上传失败',
      });
      setShowLoadOverlay(false);
    });
  } else {
    setShowLoadOverlay(false);
  }
}

图片压缩​

/**
 * 图片压缩
 * @param files 原始图片file列表
 * @returns 压缩后的图片file列表
 * 注意：图片越大压缩效果越明显，1kb以下可能会出现压缩后size变大的情况
 */
export const compressImg = async (files: FileList) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
  const base64 = await fileToDataURL(files[0]);
  const img = await dataURLToImage(base64);
  canvas.width = img.width;
  canvas.height = img.height;
  context.clearRect(0, 0, img.width, img.height);
  context.drawImage(img, 0, 0, img.width, img.height);
  const blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob;
  const compressedFile = await new File([blob], files[0].name, { type: files[0].type });
  return [compressedFile];
}
const fileToDataURL = (file: Blob): Promise<any> => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve((e.target as FileReader).result)
    reader.readAsDataURL(file)
  })
}
const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}
const canvastoFile = (
  canvas: HTMLCanvasElement,
  type: string,
  quality: number
): Promise<Blob | null> => {
  return new Promise((resolve) => {
    canvas.toBlob((blob) => resolve(blob), type, quality)
  })
}

使用示例：

async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
  // loading
  setShowLoadOverlay(true);
  const $el = event.target;
  const { files } = $el;
  if (files && files[0]) {
    // 若图片尺寸超过100kb则压缩
    let compressedFiles = files[0].size > 102400 ? await compressImg(files) : files;
    const formData = new FormData();
    formData.append('file', compressedFiles[0]);
    axios.post(import.meta.env.VITE_UPLOAD_URL, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    }).then(response => {
      setShowLoadOverlay(false);
      // 上传成功后的业务逻辑
      // ...
    }).catch(error => {
      console.error('上传失败', error);
      Toast.show({
        content: '上传失败',
      });
      setShowLoadOverlay(false);
    });
  } else {
    setShowLoadOverlay(false);
  }
}

H5​

H5页面适配​

移动端H5开发之页面适配篇

postcss-pxtorem 总是搭配 amfe-flexible 一起使用​

• postcss-pxtorem: 将px单位转换成rem单位
• amfe-flexible: 自动计算html根节点的字体大小

两个库的搭配使用，将页面上的元素某些属性以相对于根元素的倍数来进行展示，从而适配不同的屏幕大小。

pnpm add -D postcss-pxtorem
pnpm add amfe-flexible

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import postCssPxToRem from 'postcss-pxtorem';

export default defineConfig({
  plugins: [
    react(),
  ],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 75, // 设计稿宽度750px
          propList: ['*'], // 所有px都转换成rem
          selectorBlackList: ['nut-'], // 忽略选择器为'nut-'开头的元素的px
        })
      ]
    }
  },
})

import 'amfe-flexible';

rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适

postcss-px-to-viewport​

将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

安装：yarn add -D postcss-px-to-viewport

vite项目中配置:

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import postcsspxtoviewport from 'postcss-px-to-viewport' 
export default defineConfig({ 
  plugins: [ 
    vue() 
  ], 
  css: { 
    postcss: { 
      plugins: [ 
        postcsspxtoviewport({ 
          unitToConvert: 'px', // 要转化的单位 
          viewportWidth: 750, // UI设计稿的宽度 
          unitPrecision: 6, // 转换后的精度，即小数点位数 
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw 
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw 
          selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名， 
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false 
          replace: true, // 是否转换后直接更换属性值 
          exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配 
          landscape: false // 是否处理横屏情况 
        }) 
      ] 
    } 
  } 
})

配置说明：

• propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
• selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换

使用注释忽略转换：

• /* px-to-viewport-ignore-next */ 用在单独一行，防止下一行被转换
• /* px-to-viewport-ignore */ 用在属性后面，防止同一行被转换

/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
  border: solid 2px #000; /* px-to-viewport-ignore */
}

/* example output: */
.class {
  width: 10px;
  padding: 3.125vw;
  height: 10px;
  border: solid 2px #000;
}

抓包工具​

• Charles

H5调试工具​

1. vconsole

2. eruda 通过 url 参数来控制是否加载调试器，即当前端拼接了eruda=true参数的时候，才会引入对应的js文件

;(function () {
  var src = '//cdn.jsdelivr.net/npm/eruda';
  if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
  document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
  document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

真机本地调试​

whistle​

1. 安装：sudo npm install -g whistle
2. 手机和PC保持在同一网络下（比如连到同一个Wi-Fi或手机热点）
3. 命令行输入w2 start启动whistle，PC端可以访问http://127.0.0.1:8899/查看抓包记录
4. 手机配置代理：点击连接的Wi-Fi或手机热点--->配置代理选择手动，服务器填入whistle启动后提示的ip，端口填入默认的8899
5. 手机配置代理后，PC端访问http://127.0.0.1:8899/，点击HTTPS会弹出一个证书二维码，使用手机扫码器扫描该二维码下载证书
6. 证书下载后打开手机的设置--->通用--->VPN与设备管理--->安装下载的证书(描述文件)
7. 安装后就可以真机本地调试https链接了

whistle功能很强大，如图： 常用命令：w2 start w2 restart w2 stop

spy-debugger​

1. 安装：sudo npm install spy-debugger -g
2. 手机和PC保持在同一网络下（比如连到同一个Wi-Fi或手机热点）
3. 命令行输入spy-debugger，按命令行提示用浏览器打开相应地址。
4. 设置手机连接网络的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)。
5. 手机安装证书。注：手机必须先设置完代理后再通过手机扫码器(非微信)扫如下二维码安装证书(二维码地址)（注意：手机首次调试需要安装证书，已安装了证书的手机无需重复安装。iOS新安装的证书需要手动打开证书信任)。
6. 用手机浏览器访问你要调试的页面即可。

Vorlon.JS​

二维码生成器​

• 草料二维码
• Chrome插件：Quick QR二维码生成器

使用nutui-react开发地址选择​

• 使用 Cascader import { Cascader } from '@nutui/nutui-react';

• 新建地址Cascader和编辑地址Cascader如果放在一个自定义组件里则Cascader会回显不了（原因待探索），所以把编辑地址Cascader单独放到一个自定义的组件里

  function AddressBook() {
    const [visible, setVisible] = useState(false);
    const [addressValueList, setAddressValueList] = useState<string[]>([]);
    const [addressInfoList, setAddressInfoList] = useState<any[] | null>(null);
  
    const cascaderOptionKey = {
      textKey: 'addressId',
      valueKey: 'addressId',
      childrenKey: 'children',
    };
  
    async function lazyLoadAddress(node: any, resolve: (children: any) => void) {
      if (node.root) { // 首次加载
        let firstLevelAddressList = await getAddressById('0');
        resolve(firstLevelAddressList);
      } else {
        const { addressId } = node;
        let nextLevelAddressList = await getAddressById(addressId);
        resolve(nextLevelAddressList);
      }
    }
    function handleAddressValueChange(value: any, path: any) {
      setAddressValueList(value);
      setAddressInfoList(path);
    }
  
    return <>
      <div onClick={() => setVisible(true)} className="address-wrapper">
        <div className={addressValueList.length ? 'edit-address' : 'add-address'}>{addressValueList.length ? addressValueList.join('') : '请选择省市区县、乡镇等'}</div>
        {
          !!addressIdValue && addressValueList.length>0
          ?
          <EditAddressPicker
            isVisible={visible}
            defaultAddressList={addressValueList}
            optionKey={cascaderOptionKey}
            fetchData={lazyLoadAddress}
            onChangeAddressValue = {(value: any, path: any) => handleAddressValueChange(value, path)}
            onClosePicker={() => {setVisible(false)}}
          ></EditAddressPicker>
          :
          <Cascader
            visible={visible}
            value={addressValueList}
            title="地址选择"
            closeable={false}
            lazy
            optionKey={cascaderOptionKey}
            onChange={handleAddressValueChange}
            onLoad={lazyLoadAddress}
            onClose={() => {setVisible(false)}}
          />
        }
      </div>
    </>
  }
  

  interface IAddressPicker {
    isVisible: boolean,
    defaultAddressList: string[],
    optionKey: any,
    fetchData: (arg0: any, arg1: any) => void,
    onChangeAddressValue: (arg0: any, arg1: any) => void,
    onClosePicker: () => void,
  }
  
  function EditAddressPicker({
    isVisible,
    defaultAddressList,
    optionKey,
    fetchData,
    onChangeAddressValue,
    onClosePicker,
  }: IAddressPicker) {
  
    function handleAddressValueChange(value: any, path: any) {
      onChangeAddressValue(value, path);
    }
  
    return <>
      <Cascader
        visible={isVisible}
        defaultValue={defaultAddressList}
        title="地址选择"
        closeable={false}
        lazy
        optionKey={optionKey}
        onLoad={fetchData}
        onChange={handleAddressValueChange}
        onClose={onClosePicker}
      />
    </>
  }
  

浏览器模拟器造成 React中点击父元素会触发子元素的点击事件 的假象​

以下代码在浏览器模拟器上点击img标签或agree-wrapper元素的非span区域，会触发跳转页面。但是，在真机上不会有这种现象。

import { useNavigate, useSearchParams } from "react-router-dom";

function App() {
  const [agreeFlag, setAgreeFlag] = useState(false);

  const navigate = useNavigate();

  function handleChangeAgreeFlag() {
    setAgreeFlag(!agreeFlag);
  }
  function linkAgreement(event: any) {
    event.stopPropagation();
    navigate('/agreement');
  }

  return <>
    <div className="footer">
      <div className="agree-wrapper" onClick={handleChangeAgreeFlag}>
        <img src={agreeFlag ? checkedIcon : uncheckIcon} />
        <div>请仔细阅读<span onClick={(event)=>linkAgreement(event)}>《操作说明》</span>，以便后续操作</div>
      </div>
      <div className="btn" onClick={handleSave}>确定</div>
    </div>
  </>
}

.footer {
  position: fixed;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  width: 100%;
  height: 230px;
  background-color: #FFFFFF;
  .btn {
    background-image: linear-gradient(90deg, #FF6B22 0%, #FF8727 100%);
    border-radius: 45px;
    width: 686px;
    height: 90px;
    margin: 0 auto;
    font-size: 32px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 44px;
    font-weight: 600;
    padding: 23px 0;
    box-sizing: border-box;
  }
  .agree-wrapper {
    display: flex;
    align-items: center;
    padding: 24px 0 30px 30px;
    &>img {
      width: 30px;
      height: 30px;
    }
    &>div {
      font-size: 24px;
      color: #222222;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 10px;
      &>span {
        color: #ff6300;
      }
    }
  }
}

小程序​

支付宝小程序​

1. 联调设置​

用于开发版跳转到另外的小程序再跳回来的场景

微信小程序​

上报实时日志​

实时日志目前只支持在手机端测试。工具端的接口可以调用，但不会上报到后台。

微信小程序嵌入H5页面打开慢的问题​

微信小程序嵌入H5页面打开慢的问题，可以从多个角度进行优化。以下是一些常见的优化策略：

1. 优化H5页面本身

• 减少资源体积：压缩CSS、JavaScript和图片文件。使用WebP格式替代传统的图片格式，因为WebP提供了更好的压缩率。
• 优化加载顺序：确保关键的CSS和JavaScript尽早加载。可以使用<link rel="preload">预加载关键资源。
• 减少HTTP请求：合并CSS和JavaScript文件，减少页面加载时的HTTP请求次数。
• 使用CDN：将资源放在CDN上，可以加快资源的加载速度，因为CDN可以提供更靠近用户的服务器来响应请求。
• 懒加载：对于非首屏的图片和内容，可以采用懒加载的方式，等到用户滚动到相应位置时再加载。

2. 优化小程序与H5的交互

• 减少数据传输：在小程序和H5页面之间传输的数据量越小，性能越好。尽量减少不必要的数据传输。
• 使用缓存：对于一些不经常变化的数据，可以在小程序端或H5端使用缓存，避免每次都从服务器获取。

3. 服务器端优化

• 开启Gzip压缩：在服务器端配置Gzip压缩，可以显著减少传输的数据量。
• 优化后端性能：确保后端API响应速度快。可以通过优化数据库查询、使用更快的服务器、增加缓存等方式来提升后端性能。
• 使用HTTP/2：相比于HTTP/1.x，HTTP/2提供了更高的效率，如服务器推送、头部压缩等特性，可以进一步提升页面加载速度。

4. 其他

• 预加载页面：如果可以预测用户的行为，可以提前在小程序中加载H5页面，当用户实际需要时，页面已经加载完成，可以立即显示。
• 监控性能：使用性能监控工具（如Lighthouse、WebPageTest等）定期检测H5页面的加载性能，及时发现并解决问题。

通过上述方法的综合应用，可以显著提升微信小程序嵌入H5页面的打开速度，改善用户体验。

SSR（服务器端渲染）也可以在一定程度上解决微信小程序嵌入H5页面打开慢的问题，主要通过以下几个方面：

1. 提升首屏加载速度

服务器端渲染可以直接生成页面的HTML内容，这意味着浏览器可以在下载HTML后立即开始渲染页面，而不需要等待所有的JavaScript都下载并执行完成。这对于提升首屏加载速度非常有效，尤其是在网络条件不佳或设备性能较低的情况下。

2. 减少白屏时间

由于服务器端渲染的页面在服务器上已经生成了最终的HTML，用户在请求页面时可以更快地看到页面内容，这减少了用户面对空白屏幕的时间，从而提升了用户体验。

3. 减轻客户端负担

服务器端渲染将部分渲染工作从客户端转移到服务器端，这样可以减轻客户端（在这里指的是微信小程序内嵌的浏览器）的计算负担，特别是对于那些性能较弱的设备，可以显著提升渲染效率。

4. SEO优化

虽然这一点对于微信小程序嵌入H5页面的性能优化不直接相关，但值得一提的是，SSR对于改善网页的搜索引擎优化（SEO）也非常有帮助。由于搜索引擎更容易抓取和索引预渲染的内容，这对于需要提升搜索引擎可见度的H5页面来说是一个额外的好处。

实施注意事项：

• 服务器负载：由于服务器端渲染需要服务器进行额外的计算工作，这可能会增加服务器的负载。因此，在实施SSR时，需要考虑服务器资源和负载情况，适当进行优化和扩展。
• 开发复杂度：相比于客户端渲染，服务器端渲染可能会增加开发的复杂度，特别是在处理数据预取、路由管理等方面。因此，需要权衡其带来的性能提升和开发成本。

总的来说，SSR能够有效提升微信小程序嵌入H5页面的加载速度和用户体验，但同时也需要考虑到实施SSR可能带来的服务器负载增加和开发复杂度提升等问题。

APP拉起小程序​

官方文档

考虑到部分场景下 APP 需要通过小程序来承载服务，为此 OpenSDK 提供了移动应用（APP）拉起小程序功能。移动应用（APP）接入此功能后，用户可以在 APP 中跳转至微信某一小程序的指定页面，完成服务后再跳回至原 APP 。

小程序转发朋友和分享朋友圈不可用​

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮。文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline

antv使用记录​

使用@ant-design/plots，文档也可以参考g2的文档(g2 API)，底层用的是g2

1. 自定义tooltip​

• 问题：闪烁并且有的地方不显示tooltip，解决方案：设置tooltip的position，position: 'top'

2. 图表标注​

2.1 辅助线​

API：Line Annotation

• type: 'line', 标识为：辅助线（可带文本）
• start 起始位置
• end 结束位置

  info

  起始位置、结束位置 除了指定原始数据之外，还可以使用预设定数据点，如：

  • 'min': 最小值
  • 'max': 最大值
  • 'mean': 平均值
  • 'median': 中位值
  • 'start': 即 0
  • 'end': 即 1

2.2 辅助文本​

API：Text Annotation

• type: 'text', 标识为：辅助文本，在指定位置添加文本说明
• position 文本标注位置

ant design使用记录​

useForm​

Ant Design 中的 useForm 是一个自定义 Hook，用于在函数组件中创建和管理表单实例。它是 Ant Design 表单库的核心功能之一，提供了一种方便的方式来处理表单状态、验证和提交。

以下是 useForm 的主要特点和用法：

1. 创建表单实例： useForm() 返回一个表单实例数组，这个数组只包含一个元素（表单实例）。

   const [form] = Form.useForm();
   

2. 表单控制： form 实例提供了多种方法来控制表单，如：

   • setFieldsValue: 设置表单字段的值
   • getFieldsValue: 获取表单字段的值
   • resetFields: 重置表单字段
   • validateFields: 验证表单字段

3. 与 Form 组件集成： 创建的 form 实例可以传递给 Form 组件的 form 属性。

   <Form form={form} onFinish={onFinish}>
     {/* 表单项 */}
   </Form>
   

4. 表单提交： 通常与 onFinish 事件一起使用，在表单验证通过后触发。

   const onFinish = (values) => {
     console.log('Form values:', values);
   };
   

5. 手动触发验证： 可以在需要的时候手动触发表单验证。

   form.validateFields().then(values => {
     // 处理验证通过的表单数据
   }).catch(errorInfo => {
     // 处理验证失败的情况
   });
   

6. 动态表单操作： useForm 使得在复杂的动态表单场景中操作表单变得更加容易。

7. 性能优化： 使用 useForm 可以避免不必要的重渲染，提高表单的性能。

使用 useForm 的一个简单示例：

import { Form, Input, Button } from 'antd';
import { useForm } from 'antd/lib/form/Form';

const MyForm = () => {
  const [form] = useForm();

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

总之，useForm 提供了一种强大而灵活的方式来在 React 函数组件中管理表单状态和行为，是 Ant Design 表单开发中的重要工具。

创建多个form实例​

在Ant Design中,你可以根据需要创建任意数量的form实例。这在处理复杂表单或多个相关表单时特别有用。

以下是创建和使用多个form实例的一些方法和注意事项:

1. 创建多个实例:

const [form1] = Form.useForm();
const [form2] = Form.useForm();
const [form3] = Form.useForm();

2. 在不同的Form组件中使用:

<Form form={form1}>
  {/* form1 的字段 */}
}
</Form>

<Form form={form2}>
  {/* form2 的字段 */}
}
</Form>

3. 独立操作每个表单:

form1.setFieldsValue({ /* ... */ });
form2.resetFields();
form3.validateFields().then(/* ... */);

4. 用途示例:

   • 步骤表单:每个步骤使用单独的form实例
   • 动态表单:根据需要动态创建form实例
   • 相关但独立的表单:如搜索表单和数据编辑表单

5. 注意事项:

   • 确保每个Form组件使用正确的form实例
   • 多个form实例可能增加状态管理的复杂性
   • 考虑是否真的需要多个实例,有时单个复杂表单可能更合适

6. 示例:管理多个相关表单

import { Form, Input, Button } from 'antd';

const MultiFormExample = () => {
  const [personalForm] = Form.useForm();
  const [addressForm] = Form.useForm();

  const onSubmitAll = () => {
    Promise.all([
      personalForm.validateFields(),
      addressForm.validateFields()
    ]).then(([personalValues, addressValues]) => {
      console.log('Personal:', personalValues);
      console.log('Address:', addressValues);
    }).catch(error => {
      console.error('Validation failed:', error);
    });
  };

  return (
    <>
      <Form form={personalForm} name="personal">
        <Form.Item name="name" rules={[{ required: true }]}>
          <Input placeholder="Name" />
        </Form.Item>
      </Form>

      <Form form={addressForm} name="address">
        <Form.Item name="street" rules={[{ required: true }]}>
          <Input placeholder="Street" />
        </Form.Item>
      </Form>

      <Button onClick={onSubmitAll}>Submit All</Button>
    </>
  );
};

这个例子展示了如何使用两个独立的form实例来管理个人信息和地址信息,并在需要时一起提交它们。

总之,创建多个form实例提供了更大的灵活性,但也需要更谨慎的状态管理。根据你的具体需求,选择最适合的表单结构和实例数量。

form和select结合使用，设置select的value不生效​

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

• 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。

• 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

• 你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。

  form.setFieldsValue({
    字段名: 值,
  })
  

表单最后一行右对齐适配电脑分辨率​

使用Col嵌套Row

<Form
  form={form}
  name="basic"
  labelCol={{ span: 8 }}
  wrapperCol={{ span: 16 }}
  initialValues={{ remember: true }}
  className='form-container'
>
  <div className='content'>
    <Row>
      <Col span={8}>
        <Form.Item
          label="AAA"
          labelCol={{span: 5}}
          name="aaa"
        >
          <Select
            mode="multiple"
            style={{width:300,fontSize:11,borderRadius:3}}
            size='small'
            showArrow={true}
            showSearch={false}
            allowClear={true}
            onChange={(seletedData) => handleCommonChange(seletedData,'aaa')}
          >
            {
              [1,2,3,4].map((item,index) => {
                return <Option key={index} value={item}>{item}</Option>
              })
            }
          </Select>
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item
          label="BBB"
          labelCol={{span: 4}}
          name="bbb"
        >
          <Select
            mode="multiple"
            style={{width:300,fontSize:11,borderRadius:3}}
            size='small'
            showArrow={true}
            showSearch={false}
            allowClear={true}
            onChange={(seletedData) => handleCommonChange(seletedData,'bbb')}
          >
            {
              [1,2,3,4].map((item,index) => {
                return <Option key={index} value={item}>{item}</Option>
              })
            }
          </Select>
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item
          label="CCC"
          labelCol={{span: 4}}
          name="ccc"
        >
          <Select
            mode="multiple"
            style={{width:300,fontSize:11,borderRadius:3}}
            size='small'
            showArrow={true}
            showSearch={false}
            allowClear={true}
            onChange={(seletedData) => handleCommonChange(seletedData,'ccc')}
          >
            {
              [1,2,3,4].map((item,index) => {
                return <Option key={index} value={item}>{item}</Option>
              })
            }
          </Select>
        </Form.Item>
      </Col>
    </Row>
    <Row>
      <Col span={8} offset={16}>
        <Row>
          <Col span={4}></Col>
          <Col span={16}>
            <div style={{width:'300px',textAlign:'right'}}>
              <Button className='reset-btn' onClick={handleReset}>重置</Button>
              <Button className='search-btn' onClick={handleSearch}>查询</Button>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</Form>

组件的方法自定义传参​

• 比如，DatePicker的onChange

const handleDateChange = (_date:unknown,dateString:string,type:string) => {
  // type是自定义入参，date、dateString是onChange自带的入参
}

<DatePicker
  size='small'
  style={{width:300,fontSize:11,borderRadius:3}}
  placeholder='请选择日期'
  onChange={(date,dateString) => handleDateChange(date,dateString,'beginTime')}
/>

Table组件的数据源需要有key这个属性​

否则虽然不影响使用但是控制台报错提示

const resultWithKey = res.result.reduce((acc: any[],cur: { key: number; },ind:number) => {
  cur.key = ind;
  acc.push(cur);
  return acc;
}, []);
setTableDatas(resultWithKey); // Table的数据源需要有key prop，否则不影响使用但控制台会报错提示

Table组件列特别多时，设置列宽不生效​

注意设置 scroll={{ x: '4000px' }} 这个x的宽度首先要能够容纳所有设置的列宽之和('4000px'只是举例)，这样在这个总的宽度之内去设置列宽，才能生效。

Table组件怎么动态控制勾选框的勾中与取消​

在 Ant Design 的 Table 组件中，可以使用 rowSelection 属性来动态控制行的勾选状态。rowSelection 属性接受一个对象，该对象可以包含 selectedRowKeys 和 onChange 等属性来管理选中的行。

以下是一个示例，展示了如何动态控制 Table 中勾选框的勾中与取消：

import React, { useState } from 'react';
import { Table, Button } from 'antd';

const App = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      setSelectedRowKeys(selectedRowKeys);
    },
  };

  const toggleSelection = (key) => {
    setSelectedRowKeys((prevSelectedRowKeys) => {
      if (prevSelectedRowKeys.includes(key)) {
        return prevSelectedRowKeys.filter((selectedKey) => selectedKey !== key);
      } else {
        return [...prevSelectedRowKeys, key];
      }
    });
  };

  return (
    <div>
      <Button onClick={() => toggleSelection('1')}>Toggle Selection for Row 1</Button>
      <Button onClick={() => toggleSelection('2')}>Toggle Selection for Row 2</Button>
      <Button onClick={() => toggleSelection('3')}>Toggle Selection for Row 3</Button>
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

export default App;