J'Blog

移动端开发中遇到的问题汇总

移动端开发中遇到的问题汇总

跳转方式

问题描述：首页->A->B->首页，常见的问题是B进行了一系列的操作之后需要回到首页，此时回到首页后不管是点击返回键还是左滑返回不能直接关闭当前应用。目前开发的h5应用基本都是单页应用(spa)，不管是什么浏览器（微信，支付宝等），都存在路由栈的概念。

解决方式：需要正确认识push & replace，合理利用这两个API，push是往路由栈中加入当前路由，replace是替换当前路由，如果是B页面返回到首页，首页跳转到的任何页面使用push，从首页跳转到的页面都是用replace方式跳转到其他页面，这样B跳转回首页后首页返回就是直接关闭当前应用。

问题描述：h5页面返回键不允许返回上一页

解决方法：

        history.pushState(null, null, document.URL); 
        window.addEventListener('popstate', function () { 
            history.replaceState(null, null, document.URL); 
        });

问题描述：h5页面，A页面pushBpushCreplaceD结果页，结果页返回到首页A，首页A返回关闭当前h5页面。

解决方法：

useEffect(() => {
      // history.pushState(null, null, document.URL); 
      window.addEventListener('popstate', function () { 
          history.replaceState(null, null, document.URL); 
      });
      return function leave() {
          window.removeEventListener('popstate', function () { 
              history.replaceState(null, null, document.URL); 
          });
      }
  }, [])

  function goBack() {
    history.replaceState(null, null, document.URL); 
    router.goBack();
  }

ios兼容性问题

问题描述：ios不能解析时间格式YYYY-MM-DD

解决方式：用YYYY/MM/DD代替

问题描述：ios中当输入框获取焦点后滚动屏幕光标会出现浮动的问题

解决方式：监听屏幕滚动事件，当屏幕滚动时输入框失去焦点

useEffect(() => {
    document.body.addEventListener('touchmove', clearFocus, {passive: false})
    return () => {
        window.removeEventListener('touchmove', clearFocus, true);
    };
})

function clearFocus(e:any) {
    let ele:HTMLElement = document.activeElement as HTMLElement;
    if (ele) {
        ele?.blur();
    }
}

//addEventListener有三个参数，第一个参数事件名称，第二个参数执行函数，第三个参数默认为false，代表在冒泡阶段执行，true代表在捕获阶段执行，冒泡从里向外，捕获从外向里

问题描述：ios中对于双数宽度的可能会截取宽度？

解决方法：比如宽度设置成66%，右边框就会被截取，看似残缺，设成67%就能正常显示了，很神奇...

问题描述：ios对于font-weight识别粗细显示不一致

解决方式：暂无，不用数字设置粗细，用bold设置加粗不同页面显示的粗细也还是不一致，不知道是否跟ios有关系？

问题描述：文本两端对齐，ios对text-align-last: justify无效，需要使用伪元素

span {
    &:first-child {
        display: inline-block;
        width: 100px;
        text-align: justify;
        // text-align-last: justify;
        // -moz-text-align-last: justify;
        &::after{
            content: "";
            display: inline-block;
            width: 100%;
            overflow: hidden;
        }
    }
    &:last-child{
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        max-width: 78%;
    }
}

问题描述：ios底部margin不生效

解决方法：使用padding

导航栏

问题描述：APP中的h5引用页面切换时顶部导航标题一栏不跟着一起页面

解决方法：可以使用AlipayJSBridge，支付宝H5开放文档 里面的API，隐藏原本的导航栏，自定义一个导航栏，这样导航标题栏就可以跟着一起切换了

问题描述：ios中切换页面title标题没有切换

解决方法：使用AlipayJSBridge中修改标题API

文本不垂直居中

问题描述：文本垂直居中时文本偏上

解决方式：display: flex; align-items: center; 此方法貌似也没有解决方法，待观察。

问题描述：键盘挡住输入框

解决方式：输入框focus的时候，window.scrollTo(x,y)

      //在全局的父组件中添加代码
      // 解决键盘弹起后遮挡输入框的问题
      window.addEventListener("resize", () => {
       if(typeof document === 'object'&& document.activeElement){
          if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
            window.setTimeout(() => {
              //@ts-ignore
              document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
       }
      })

      //如果上述代码不生效，将具体的input滑动到具体位置
      setTimeout(function(){
          window.scrollTo(0, 240); 
      }, 0);

问题描述：倒计时0和1的宽度不一致，长度会改变

解决方式：修改倒计时字体，font-family: Helvetica Neue,Consolas, Monaco, monospace;