混子前端在开发公众号嵌套webview遇到的常见问题

相信不少前端伙伴在开发手机端总会遇到这样那样的一些兼容坑，不管是在开发微信小程序 公众号嵌套webview 仍是原生内嵌App，那混子前端以前在开发公众号嵌套webview 时遇到了几个常见问题，在这里列举出来，但愿能够帮助一些前端伙伴：

一、Input输入框要双击才可聚焦？
二、Input输入框在IOS12系统中，焦点获取错乱？
三、自定义模态窗弹出时，底部页面还能够滚动？

在开发过程当中遇到的坑必定不止这三个，本文仅抛出大家开发中必定会遇到的问题

问题一：相信这个问题有不少解决办法，混子前端以前开发原生内嵌App时也遇到一样问题，这里列举出来给你们作参考，解决办法是：

input['text'],textarea{
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
}复制代码

当时的场景是在 Android 端输入正常，只有在 IOS 有聚焦输入的问题，那此次混子前端遇到的问题是，不管 Android 仍是 IOS 都存在聚焦异常的问题，多数手机须要双击才可获取焦点，因此混子前端的解决方案以下：

JSX code:

inputFouts = () => {
    this.input.focus();
}
<input 
    type='text'
    ref={(ref) => {
        this.input = input;
    }}
    onClick={this.inputFocus}
></input>
复制代码

PS：这里前端开发框架是React，官方建议ref采用函数式，这里不作探讨

这样作每次用户每次点击 Input 时，都会触发 onClick 方法来经过 dom 获取焦点，这样作虽然不是很优雅，但很简单粗暴，能够解决问题

问题二：这是很头疼的问题，场景是只有在 IOS12 系统中，Input输入框首次获取焦点失焦后，第二次点击此 Input 手指要点击偏上一点才能获取焦点，为了测试这个问题，试过了不少Android 机型和低版本 IOS 系统都没有这个问题，那为了科技进步 社会发展 人类文明也不得不解决 IOS12 的兼容问题，因此这里给出混子前端的解决方案，来看代码：

JSX code:

handleInputReflow = () => {
    let isIOSWechat = window.navigator.userAgent.toLowerCase();
    if (isIOSWechat.includes('micromessenger') && isIOSWechat.includes('like mac os x')) {
        document.body.scrollTop = document.body.scrollTop;
    }
}

<input 
    type='text'
    onBlur={this.handleInputReflow}
></input>复制代码

这个 bug 的出现网上有说是由于本机虚拟键盘抬起改变了页面的高度，因此就想到了scrollTop，为了更严谨添加了判断条件，但愿给大家一些参考。

问题三：为了知足产品需求，因此页面全部弹窗都是手写 modal，没有配合使用 React 的 antd-mobile 手机端样式库提供的modal弹窗，在弹窗的样式 功能开发完成自测的过程当中，发现了一个奇怪的现象，弹窗弹起去滑动底部页面竟然还能够滚动，混子前端是在弹窗后的容器中建立了灰色透明遮罩层的，那既然存在遮罩层用户就不该该能操做除弹窗之外的页面，那到这里相信许多伙伴想到的是阻止冒泡就能够了，混子前端试过了并很差使，也想过修改样式层级来解决这个问题，依然不如人意，那这里给出混子前端的解决方案，来看代码：

JSX code: 

componentWillUnmount() {
    document.body.style.position = '';    
    window.scrollTo(0, this.scroH);
}

showModal = () => {
    let {modal} = this.props;    // modal字段是判断展现不一样模态窗

    if (modal) {
        const scrY = window.scrollY;
        this.scroH = scrY;        
        document.body.style.position = 'fixed';        
        document.body.style.top = -scrY + 'px';
    } else {
        document.body.style.position = '';        
        window.scrollTo(0, this.scroH);
    }

    switch (modal) {    // 根据modal展现不一样模态窗
        case 'modify':
        return (
            <Modal>
                <div>弹窗内容</div>
            </Modal>
        )
    }
}

render(){
    return (
        <React.Fragment>
            {this.showModal()}
        </React.Fragment>
    )
}

复制代码

说明：弹窗 render 后在给全局添加 position 样式 和 对其 top 属性赋值，在组件销毁即生命周期函数 componmentWillUnmount 中还原样式初始值，这样能够实现弹窗挂载后禁止用户滚动底部页面的功能。

以上三个问题的解决方案必定不是最优雅的，但倒是很简单 易懂能够解决问题的方案，若是你们有其它解决方案能够在评论区抛出，混子前端必定虚心接受。

那文章的最后仍是老规矩，欢迎你们点赞和纠错。

祝各位周末愉快！