Skip to main content

9-19

1 Pag​

[1] https://pag.io/

Portable Animated Graphics 是一套完整的动效工作流解决方案

2 无极滚动​

TODO

[1][react-circular-progressbar](https://github.com/kevinsqi/react-circular-progressbar)

2 倒计时​

[1][easytimer.js](https://albert-gonzalez.github.io/easytimer.js/)

3 Socket.io Cannot add property _callbacks, object is not extensible​

[1][Object not extensible when referencing old recoil value in socket.io callback #299](https://github.com/facebookexperimental/Recoil/issues/299)

4 Mac制作gif​

[1][Snagit](https://macwk.com/soft/snagit)

5 useEffect会在useCallback前 更新​

TODO

6 use-sound​

[1][use-sound](https://www.npmjs.com/package/use-sound)

播放声音的库

示例​

import useSound from 'use-sound';
import Button, { ButtonProps } from '@mui/material/Button';
import sounds from '/sounds/btn-hover.mp3';
import { styled } from '@mui/system';

const NoStyledButton = styled(Button)`
  padding: 0;
  &.Mui-disabled{
    color: initial;
  }
  &:hover {
    background-color: unset;
  }
` 

function SoundsButton<T>(props: T & ButtonProps) {
  const { disabled } = props;
  const [play, { stop }] = useSound(sounds);

  return <NoStyledButton {...props} onMouseEnter={() => !disabled && play()} onMouseLeave={() => stop()} />;
}

export default SoundsButton;

7 React清理ref正确方式​

[1][React ref.current is null in useEffect cleanup function duplicate](https://stackoverflow.com/questions/71948201/react-ref-current-is-null-in-useeffect-cleanup-function)

[2][Cleanup ref issues in React](https://stackoverflow.com/questions/67069827/cleanup-ref-issues-in-react)

const imgRef = useRef();

useEffect(() => {
  let localRef = null;
  if (imgRef.current) localRef = imgRef.current;
  return () => {
    console.log('component unmounting', localRef); // localRef works here!
  }
}, []);

return (
  <img ref={imgRef} src="example.png" />
);

8 display 和 visibility 的区别​

TODO

动画案例

9 呼吸灯css效果​

[1][css 动画 呼吸 呼吸灯 效果](https://blog.csdn.net/weixin_43908123/article/details/123893556)

10 透明遮罩​

image-20220926121714592

.div {
  '-webkit-mask-image': `linear-gradient(to bottom, transparent 0%, #1A1F2F 50%)`,
  'mask-image': `linear-gradient(to bottom, transparent 0%, #1A1F2F 50%)`, 
}

[1][css mask 属性实现视频弹幕人物遮罩过滤效果](https://www.mybj123.com/8969.html)

11 css背景速记​

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

等同于

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

注意，没有 background-size

12 global is not defined​

import { Buffer } from 'buffer';

(window as any).global = window;
global.Buffer = global.Buffer || Buffer;

[1][vite 使用 web3, walletConnect 报错](https://blog.csdn.net/weixin_42335036/article/details/124666053)

13 flutter支持walletconnect​

[1][Mobile DApp connecting to Wallet](https://stackoverflow.com/questions/69488978/mobile-dapp-connecting-to-wallet)

14 无法连接walletconnect​

  • 注意https

    如果没有https无法通过walletconnect连接

walletconnect与vite的问题​

15 本地https以及问题​

存在问题：局域网无法正常访问，只能本机使用

[1][为你的前端本地环境配置 HTTPS 吧！](https://cloud.tencent.com/developer/article/1661427)

[2][npm http-server with SSL](https://stackoverflow.com/questions/35127383/npm-http-server-with-ssl)

[3][vite-plugin-mkcert](https://github.com/liuweiGL/vite-plugin-mkcert)

附：http-server -p 参数可以指定端口

16 heroku托管node服务​

TODO

git push heroku main

https://devcenter.heroku.com/articles/deploying-nodejs

17 axios获取base64​

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => Buffer.from(response.data, 'binary').toString('base64'))
}

https://stackoverflow.com/questions/41846669/download-an-image-using-axios-and-convert-it-to-base64

18 无线调试安卓​

两步：1.连接adb 2.连接手机

https://blog.csdn.net/weixin_42089228/article/details/124362840

19 触摸暂停​

// 当手触摸了聊天区，停止滚动消息
useEffect(() => {
  const messageBox = messageBoxRef.current;

  if (!messageBox) {
    return;
  }

  let timer: NodeJS.Timeout | undefined;

  const handleTouchStart = debounce(() => {
    timer && clearTimeout(timer);
    allowScrollToBottomRef.current = false;
  }, 100);
  const handleTouchEnd = debounce(() => {
    timer = setTimeout(() => {
      allowScrollToBottomRef.current = true;
    }, 3000);
  }, 100);

  messageBox.addEventListener('touchstart', handleTouchStart);
  messageBox.addEventListener('touchend', handleTouchEnd);

  return () => {
    messageBox.removeEventListener('touchstart', handleTouchStart);
    messageBox.removeEventListener('touchend', handleTouchEnd);
  };
}, []);

20 键盘弹起​

useEffect(() => {
  const initHeight = document.documentElement.clientHeight || document.body.clientHeight;

  const handleWindowResize = () => {
    const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const messageBox = messageBoxRef.current;
    const container = containerRef.current;

    if (!messageBox || !container) {
      return;
    }

    if (resizeHeight < initHeight) {
      // 软键盘弹起，在此做一些操作
      messageBox.style.display = 'none';
      container.style.zIndex = '2';
      container.style.position = 'fixed';
    } else {
      // 软键盘收起，在此做一些操作
      messageBox.style.display = 'flex';
      container.style.zIndex = '0';
      container.style.position = 'absolute';
    }
  };

  window.addEventListener('resize', handleWindowResize);

  return () => {
    window.removeEventListener('resize', handleWindowResize);
  };
}, [])

[1][h5 监听 用户点击 input 输入框 弹起软键盘](https://blog.csdn.net/yunchong_zhao/article/details/111035426)

21 自定义notistack​

<Box
  sx={{
    '.SnackbarContent-root': {
      maxWidth: '550px',
        flexWrap: 'nowrap !important',
    },
  }}
  >
  <SnackbarProvider maxSnack={notifications.maxSnack}>
    <Notifier />
  </SnackbarProvider>
</Box>

[1][Easily Customize Notistack with MUI Snackbars (v5)](https://smartdevpreneur.com/customizing-notistack-with-material-ui-snackbar/#Notistack_Styling_-_Background_Color_Text_Color_and_Width)

[2] https://notistack.com/api-reference#overriding-styles

22 File and FileReader​

[1][File and FileReader](https://javascript.info/file)

23 vite打包后无法直接通过浏览器打开​

[1][Access to Script at ' from origin 'null' has been blocked by CORS policy](https://stackoverflow.com/questions/52919331/access-to-script-at-from-origin-null-has-been-blocked-by-cors-policy)

看起来您正试图在本地（通过file://协议）打开网页，即双击.html文件。不幸的是，模块只能通过 HTTP(s) 工作，所以您需要做的就是使用本地 Web 服务器。

24 macwk代替​

[1][知您网](https://www.zhiniw.com/wp-content/themes/2019_v0.1/down.php?id=36330)