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}>加载更多&nbsp;<Icon type="down" size={'md'}/></div>

 

　　　　</div>