混子前端在開發公衆號嵌套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 中還原樣式初始值，這樣能夠實現彈窗掛載後禁止用戶滾動底部頁面的功能。

以上三個問題的解決方案必定不是最優雅的，但倒是很簡單 易懂能夠解決問題的方案，若是你們有其它解決方案能夠在評論區拋出，混子前端必定虛心接受。

那文章的最後仍是老規矩，歡迎你們點贊和糾錯。

祝各位週末愉快！