微信网页开发踩坑(1)最近在写移动端项目,踩了不少坑，记录一下以备不时之需。在ios下输入内容，软键盘弹出，页面内容整

最近在写移动端项目,踩了不少坑，记录一下以备不时之需。

微信网页开发中实现切换tab更新导航栏标题
普通情况下使用document.title来在js中动态修改页面标题，在微信网页开发中多用vue-wechat-title这个包来实现
<router-view v-wechat-title="$route.meta.title" />

由于微信浏览器只在页面首次加载时初始化了标题title，之后就没有再监听 window.title的change事件。所以手动修改title后，需要创建一个请求，加载一个空的iframe再立即移除，因此不会对页面造成影响，但这样微信浏览器上的title便刷新了。代码如下:

setDocumentTitle (title) {
  var i = document.createElement('iframe');
  i.src = '../img/xxx.png';
  i.style.display = 'none';
  i.onload = function() {
    setTimeout(function(){
      i.remove();
    }, 0)
  }
  document.body.appendChild(i); 
}

iOS拉回软键盘
在ios下输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。页面中有固定定位的元素在元素内 input 框聚焦的时候弹出的软键盘占位失去焦点的时候软键盘消失但是还是占位的，因此在input失焦的时候加事件手动拉回软键盘，代码如下：

<input @blur.prevent="changeBlur()"></input>
changeBlur () {
  const u = navigator.userAgent
  const isIOS = !!u.match(new RegExp(/(i[^;]+;( U;)? CPU.+Mac OS X)/))
  if (isIOS) {
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
  }
}

stickyFooter一种页面效果，即如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。

padding+绝对定位

html, body {
  height: 100%;
}
.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.footer {
  position: absolute;
  bottom: 0;
  height: 30px;
}

.content {
  min-height: calc(100vh - 30px);
}
.footer {
  height: 30px;
}

flex

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

文字溢出省略

display: -webkit-box;  // 作为弹性伸缩盒子模型显示
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;  // 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 2;

**input标签在ios下有内阴影 **
```
input {
  -webkit-appearance: none;
}
```
input标签placeholder在ios下不垂直居中
```
input {
  line-height:normal;
}
```
input双向绑定vant的NumberKeyboard数字键盘后阻止原生键盘弹出
```
event.preventDefault()
```

textarea的placeholder水平垂直居中

textarea::-webkit-input-placeholder {
  line-height: 100px; //textarea的高度
  text-align: center;
}

字母或数字过长超出父元素不折行
```
word-break:break-all 或者 word-wrap:break-word
```
两者的区别在于行尾的长单词是否会被拆开，word-break:break-all会将长单词拆分，word-wrap:break-word不会拆分长单词，会展示在下一行
iOS中date对象展示为NaN
日期需要转换为以 ''作为分隔符，如2019-12-22 需转为2019/12/22, dateStr.replace(/-/gi, '/')