app內嵌H5遇到的部分坑

1.input元件

input設定type=number（鍵盤彈出為數字）問題

（1）input的maxlength屬性失效：只能通過輸入事件來對輸入的值進行限制

（2）樣式問題：在部分的android手機上面出現樣式問題，需要去掉input的預設樣式

}2.select元件

select設定問題

（1）禁用預設的箭頭

::-ms-expand修改表單控制項下拉箭頭,設定隱藏並使用背景來修飾

select::-ms-expand

document.addeventlistener('touchstart', function

() );

4.fixed定位問題

在ios系統下，fixed屬性在鍵盤頂起的時候會失效，所以同意使用absolute代替

5.ios常按頁面元素選中

加入禁止選中樣式

-webkit-touch-callout:none;  //系統預設選單被禁用;可以實現頁面因為長按彈出各種操作視窗

-webkit-user-select:none; //webkit瀏覽器 
-khtml-user-select:none; //早期瀏覽器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //ie10 
user-select:none; 
input 

6.ios鍵盤彈出下落bug問題

created() ,

methods:);
},//監聽resize事件（鍵盤彈起觸發），然後將 input textarea 元素滑動到可視區域，並將特定元素隱藏
handleresize() , 0);
}//解決鍵盤彈起後 fixed 定位元素被頂起問題
const bodyheight =document.documentelement.clientheight;
const ele = document.getelementbyid('fixed-bottom');
if(ele) 
else
}});
}}

H5內嵌原生app

因此，可以看到內嵌其實並不難，難就難在要適配 原生與web互動 資料傳遞等，當然我們也可以使用vue來開發h5介面 一 如何實現互動？答案是使用第三方外掛程式jsbridge 1.通過js偽造請求 原生攔截獲取資料 原理類似於jsonp 首先在js中定義乙個函式並掛載在window下，然後在原生中呼...

APP 內嵌H5, H5遇到的 相容性問題

1.ios 中日期格式 new date 2019 10 11 無效 解決 new date 2019 10 11 replace g 2.ios 中日期格式 new date 2019 07 24 11 35 00.0 無效 解決 new date 2019 07 24 11 35 00.0 re...

ios WKWebView 內嵌h5開發實戰

ios用的wkwebview，我主要負責h5頁面開發 vue ts 以下是開發h5需要做的事，開始了哦 其中的getparams等是與ios約定好的事件 private paramsinfo private a created 方法 ios h5 start private getparams pa...