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

栏目: IOS · Android · 发布时间: 5年前

内容简介:相信很多前端伙伴在开发手机端总会遇到这样那样的一些兼容坑,无论是在开发微信小程序 公众号嵌套webview 还是原生内嵌App,那混子前端之前在开发公众号嵌套webview 时遇到了几个常见问题,在这里列举出来,希望可以帮助一些前端伙伴:1、Input输入框要双击才可聚焦?2、Input输入框在IOS12系统中,焦点获取错乱?

相信很多前端伙伴在开发手机端总会遇到这样那样的一些兼容坑,无论是在开发微信小程序 公众号嵌套webview 还是原生内嵌App,那混子前端之前在开发公众号嵌套webview 时遇到了几个常见问题,在这里列举出来,希望可以帮助一些前端伙伴:

1、Input输入框要双击才可聚焦?

2、Input输入框在IOS12系统中,焦点获取错乱?

3、自定义模态窗弹出时,底部页面还可以滚动?

在开发过程中遇到的坑一定不止这三个,本文仅抛出你们开发中一定会遇到的问题

问题一: 相信这个问题有很多解决办法,混子前端之前开发原生内嵌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 中还原样式初始值 ,这样可以实现弹窗挂载后禁止用户滚动底部页面的功能。

以上三个问题的解决方案一定不是最优雅的,但却是很简单 易懂可以解决问题的方案,如果大家有其它解决方案可以在评论区抛出,混子前端一定虚心接受。

那文章的最后还是老规矩,欢迎大家点赞和纠错。

祝各位周末愉快!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

第三次浪潮

第三次浪潮

[美]阿尔文·托夫勒 / 黄明坚 / 中信出版集团 / 2018-7 / 79.00元

《第三次浪潮》是美国著名未来学家阿尔文•托夫勒的代表作之一。1980年出版之际,随即引起全球热评,堪称中国改革开放的指南。本书阐述了由科学技术发展引起的社会各方面的变化与趋势。托夫勒认为,人类迄今为止已经经历了两次浪潮文明的洗礼:第一次是农业革命,人类就此从原始渔猎时代进入以农业为基础的文明社会,并历经千年,直到工业革命的到来。随后,人类社会历时300年摧毁了落后的第一次浪潮文明,并在“二战”后1......一起来看看 《第三次浪潮》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具