常见问题及解决

移动端相关

一些浏览器会屏蔽广告图片，导致图片无法显示

图片命名去掉 ad

不兼容 JS 中的 new Date('2018-01-12 10:09:11')返回错误"Invalid Date"

将 xxxx-xx-xx 的时间格式，转换为 xxxx/xx/xx 的格式或拆成数组

let arr = "2018-01-12 10:09:11".split(/[- : \/]/),
  date = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);

防止手机中网页放大和缩小

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

input 的 type 设置为 number, maxlength 失效，长度可以无限输入

<input type="number" oninput="checkTextLength(this ,10)" />
<script type="javascript">
  function checkTextLength(obj, length) {
    if (obj.value.length > length) {
      obj.value = obj.value.substr(0, length);
    }
  }
</script>

防止长按页面元素被选中

.class {
  user-select: none;
}

input {
  user-select: auto;
}

上下拉动滚动条时卡顿/慢

body {
  overflow-scrolling: touch;
}

IOS 键盘字母输入, 默认首字母大写的解决方案

<input autocapitalize="off" autocorrect="off" />

IOS 取消图片点击保存

img {
  pointer-events: none;
  /* 微信浏览器还需附加该属性才有效 */
  user-select: none;
  -webkit-touch-callout: none;
}

vue 相关

v-if v-else 判断数据是否为空,展示不同内容出现页面闪烁

<template>
  <div v-if="isShow">
    <div v-if="data">
      <!-- 有数据展现的内容 -->
    </div>
    <div v-else>
      <!-- 无数据展示内容 -->
    </div>
  </div>
</template>

<script setup>
const isShow = ref(false);
const data = ref(null);

onMounted(() => {
  // 请求数据
  getData().then((res) => {
    data.value = res;
    isShow.value = true;
  });
});
</script>

小程序相关问题

支付宝小程序关联普通二维码

测试模式下，先启动体验版和开发版后，再返回桌面扫普通二维码即可

其它问题

使用 tomcat web 容器支付宝扫码无法访问二级页面

改用 nginx web 容器

在 IE 浏览器下，如果请求的方法是 GET ，并且请求的 URL 不变，那么这个请求的结果就会被缓存。

实时改变请求的 URL ，只要 URL 改变，就不会被缓存，可以通过在 URL 末尾添加上随机的时间戳参数('t'= + new Date().getTime())

vue-amap 页面刷新后，地图组件会报错

localStorage.clear() //修复报错

node-sass 报错

使用 sass

小程序 setData 数据传输长度超过 200kb 会出现输入框字体跳动

减小 setData 数据传输长度

display:flex 布局下 white-space:nowrap 失效内容区溢出

给父元素设置一下 min-width: 0 或使用多行文字… 省略的方法

正则表达式开启全局 g 时验证结果错误

在匹配之前设置 lastIndex=0 或者删除 g

IOS 时间不支持-

将时间-替换为/

弹窗第二次弹出时 gif 动图无法播放

给图标加随机数 src?${Math.floor(Math.random() * 10)}