webivew 问题总结
-
解决 H5 ios input 聚焦，整个页面被推上去，键盘收起页面未下移bug
方案一： 网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，并不是所有情况都要回顶部，于是自己写了个适用全部场景的解决方案，并且添加后，所有文件生效~
(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener(
'blur',
event => {
// 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
// input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
if (
document.documentElement.offsetHeight <=
document.documentElement.clientHeight &&
['input', 'textarea'].includes(event.target.localName)
) {
document.body.scrollIntoView() // 回顶部
}
},
true
)
方案二： focusout 含有事件冒泡 blur没有事件冒泡，
特别是对input外面在包含有div时，建议监听focusout事件
export function isMobile() {
const ua = navigator.userAgent;
return /Android|webOS|iPhone|iPod|iPad|Macintosh|BlackBerry/i.test(ua);
}
export function isIos() {
const ua = navigator.userAgent;
return /iPhone|iPod|iPad|Macintosh/i.test(ua);
}
if (isIos()) {
document.body.addEventListener('focusout', () => {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
});
}
-
webview 和 客户端交互，JSON传值问题
在和客户端交互，一般都会处理成JSON字符串，如果此对象里面包含了JOSN字符串时，在处理成JSON字符串，在传输给H5 时，前端拿到解析JSON 就会出错，浏览器，会在传输过程中，去掉一些转译\符号，
解决方法，如果是多层嵌套JSON ，那么就客户端就处理转译JSON几次。
-
H5 页面 识别 是否是小程序环境
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境
-
webview 里面的H5 ，input 和textarea 等输入框，获取焦点时，滚动相应区域
onFocus={this.onScrollBottom}
onScrollBottom = () => {
if (isIOSApp()) {
const t = document.body.clientHeight;
window.scroll({ top: t, left: 0, behavior: 'smooth' });
}
}
-
子盒列表滚动到顶部 scrollIntoView
handleScroll = () => {
const contentBox:any = document.getElementById('allContent');
contentBox.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
}
<div className={styles.contentBox}>
<div id={'allContent'}></div>
</div>
<div className={styles.more}>加载更多 <Icon type="down" size={'md'}/></div>
</div>
