使用create-react-app框架写H5遇到的问题

背景：开发一个 H5 项目，要求兼容安卓和苹果的普通浏览器以及“浙政钉”。 过程：因为未使用过 uni-app，vue 代码也不记得了，使用 Taro 实现，但在使用 Taro 部署过程中遇到了以本人水平无法解决的问题（可能部署配置文件写错了），因此换成了 create-react-app 开发， 并使用 rem 进行适配。 技术栈：create-react-app + antd + js 问题及解决：

1. 页面开发完成后，在 pc 端谷歌浏览器可以正常显示，手机端浏览器也可正常显示，但在“浙政钉”上样式均出现问题。 原因：百度之后发现是由于给根节点设置的字体太小，不满足浏览器最小字号导致的， 具体代码如下：

   // index.tml
   window.setFontSize = function () {
   var size = document.documentElement.clientWidth / 745;
   document.documentElement.style.fontSize = `${size.toString()}px`;
   };
   setFontSize();
   //在屏幕大小变化时重新设置大小
   window.addEventListener('resize', setFontSize);
   

   解决方案： 修改上述代码为：

   window.setFontSize = function () {
   var size = document.documentElement.clientWidth / 745 * 100;
   document.documentElement.style.fontSize = `${size.toString()}px`;
   };
   setFontSize();
   //在屏幕大小变化时重新设置大小
   window.addEventListener('resize', setFontSize);
   

   即将初始字体大小 *100， 然后将代码所有 css 样式内包含 rem 的数值 /100。 （本方案是体力活，不需要脑子，我不知道有脑子的咋改）

2. 在 ios 系统 Input 输入框使用 ios 自带输入法输入中文时页面展示数据与接口返回数据不符，输入纯英文或数字时无问题。 原因：Input 不知道使用的是中文输入法，文字还没有填充到文本框中，会触发 onChange 事件，从而修改 value。

   <Input
     placeholder='请输入名称'
     prefix={<img src={inputIcon} alt='' />}
     className='inputBox'
     value={value}
     onChange={(e) => { setValue(e.target.value.trim()); }}
   />
   

   解决方案：添加一个输入状态开关，使用 React 自带的 Input 事件compositionstart 和 compositionend 事件来控制这个开关，使得文字输入完成后才触发 onChange 事件。 compositionstart：触发于一段文字的输入之前； compositionend：完成当前中文的输入触发 。 compositionstart、compositionend、onChange 触发顺序：compositionstart → compositionend → onChange 将上述代码修改为：

   const inputLock = useRef(false);
   
   ...
   
   const handleChangeName = (name) => {
    if (!inputLock.current) {
      // 发送请求或其他
    }
   };
   const handleComposition = (e) => {
     inputLock.current = true;
   };
   const handleCompositionEnd = (e) => {
     inputLock.current = false;
     // webkit：compositionstart onChange compositionend
     // firefox：compositionstart compositionend onChange
     if (navigator.userAgent.indexOf('WebKit') > -1) {
       handleChangeName(e.target.value.trim());
     }
   };
   
   ...
   
   <Input
     placeholder='请输入成果名称'
     prefix={<img src="{inputIcon}" alt="">}
     className='inputBox'
     onCompositionStart={handleComposition}
     onCompositionEnd={(e) => handleCompositionEnd(e)}
     onChange={(e) => { handleChangeName(e.target.value.trim()); }}
   />
   ...
   

   注：使用 compositionstart 和 compositionend 时，不能使用 value 属性，否则会导致 compositionstart 和 compositionend 失效，原因未深究。

3. antd 日期选择器在 H5 聚焦时会弹出键盘。

   解决：给 DatePicker 添加 inputReadOnly={true} 属性。

4. 图片与文字同行，文字内容过多，安卓手机上，图片宽度被压缩，ios 无此问题。

   原因：使用 flex 布局，右侧文字内容过多，导致左侧图片被压缩。

   解决方案：

   1. 给图片添加 flex-shrink: 0;
   2. 将图片 width 改为 min-width

目前大概是这些，如有问题，欢迎指正~