「前端&微信」微信前端开发指坑

于青岛海尔 |

本文主要解决微信前端开发中遇到的奇葩问题和解决方案；

iOS 键盘问题被顶起

  • 键盘将页面顶起来，但是无法收回的问题。
1
2
3
onBlur() {
    window.scroll(0, 0);
}

微信页面设置标题不生效

网上有添加一个 iframe 的方案；

一样的原理在 vue 下写好的库，vue-wechat-title；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.setTitle = function(t) {
    document.title = t;
    var i = document.createElement('iframe');
    i.src = '//m.baidu.com/favicon.ico';
    i.style.display = 'none';
    i.onload = function() {
      setTimeout(function(){
        i.remove();
      }, 9)
    }
    document.body.appendChild(i);
}
	
setTimeout(function(){
    document.setTitle('hello')
}, 1000)

不过我发现，我遇到的不是这个问题，我的问题是类似是设置了标题又被刷没了，所以设置标题时延时一下就好了[滑稽]；

1
2
3
setTimeout(() => {
  window.document.title = '标题';
}, 500);

微信长按复制

默认不允许长按复制文本，使用下面的属性支持。

1
2
3
4
.copy-contnet {
    -webkit-user-select: text;
    user-select: text;
}

长按保存图片

canvas 转 base64 图片无法长按保存，使用下面的属性支持；

1
2
3
4
.press-img {
    -webkit-touch-callout: none;
    user-select: none;
}
------ 本文结束 🎉🎉 谢谢观看  ------