遇到坑了不要慌，先帶你跳幾個

2010-07-12 公眾號開發(fā)專題

開始開發(fā)應用號之前，先看看官方公布的「小程序」教程吧?。ㄒ韵聝?nèi)容來自微信官方公布的「小程序」開發(fā)指南）

本文檔將帶你一步步創(chuàng)建完成一個微信小程序，并可以在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像，點擊頭像，可以在新開的頁面中查看當前小程序的啟動日志。

最近給公司微信公眾號，寫了微信h5業(yè)務頁面，總結分享一下前端開發(fā)過程中的幾個兼容性坑，項目直接拿的公司頁面，所以下文涉及圖片都模糊處理了。

1、ios端兼容input光標高度

問題詳情描述：input輸入框光標，在安卓手機上顯示沒有問題，但是在蘋果手機上

當點擊輸入的時候，光標的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標，右邊是ios的input光標。

出現(xiàn)原因分析：通常我們習慣用height屬性設置行間的高度和line-height屬性設置行間的距離（行高），當點擊輸入的時候，光標的高度就自動和父盒子的高度一樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒有內(nèi)容的時候光標的高度等于input的line-height的值，當有內(nèi)容時，光標從input的頂端到文字的底部

解決辦法：高度height和行高line-height內(nèi)容用padding撐開

例如：

.content{

float: left;

box-sizing: border-box;

height: 88px;

width: calc(100% - 240px); .content-input{

display: block;

box-sizing: border-box;

width: 100%;

color: #333333;

font-size: 28px;

//line-height: 88px;

padding-top: 20px;

padding-bottom: 20px;

}

2、ios端微信h5頁面上下滑動時卡頓、頁面缺失

問題詳情描述：在ios端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現(xiàn)明顯的卡頓，頁面有部分內(nèi)容顯示不全的情況，例如下圖，右圖是正常頁面，邊是ios上下滑動后，卡頓導致如左圖下面部分丟失。

出現(xiàn)原因分析：

籠統(tǒng)說微信瀏覽器的內(nèi)核，Android上面是使用自帶的WebKit內(nèi)核，iOS里面由于蘋果的原因，使用了自帶的Safari內(nèi)核，Safari對于overflow-scrolling用了原生控件來實現(xiàn)。對于有-webkit-overflow-scrolling的網(wǎng)頁，會創(chuàng)建一個UIScrollView，提供子layer給渲染模塊使用?！居写甲C】

解決辦法：只需要在公共樣式加入下面這行代碼

-webkit-overflow-scrolling: touch;

}

But，這個屬性是有bug的，比如如果你的頁面中有設置了絕對定位的節(jié)點，那么該節(jié)點的顯示會錯亂，當然還有會有其他的一些bug。

拓展知識： -webkit-overflow-scrolling:touch是什么？

MDN上是這樣定義的：

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.

auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。

touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內(nèi)容會繼續(xù)保持一段時間的滾動效果。繼續(xù)滾動的速度和持續(xù)的時間和滾動手勢的強烈程度成正比。同時也會創(chuàng)建一個新的堆棧上下文。

3、ios鍵盤喚起，鍵盤收起以后頁面不歸位

問題詳情描述：

輸入內(nèi)容，軟鍵盤彈出，頁面內(nèi)容整體上移，但是鍵盤收起，頁面內(nèi)容不下滑

出現(xiàn)原因分析：

固定定位的元素在元素內(nèi) input 框聚焦的時候彈出的軟鍵盤占位失去焦點的時候軟鍵盤消失但是還是占位的導致input框不能再次輸入在失去焦點的時候給一個事件

上一篇：從另一個角度來分析微信開發(fā)成本返回觀點列表下一篇：微信提供給開發(fā)者的方式也在發(fā)生全面的改變你知道幾點

本文標簽：

本文地址： http://www.bmwdream.cn/a/2279.html

相關專題

電商/商城開發(fā)
杭州派迪科技為高端客戶提供商城開發(fā)建設咨詢策劃，商城官網(wǎng)設計，商城建設開發(fā)服務，以國際化視野和標準為基礎，為各行業(yè)領軍品牌提供高端商城開發(fā)定制、策劃、設計、互動與制作
查看詳情
微信公眾號開發(fā)
杭州派迪科技微信公眾號開發(fā)，為全國企業(yè)提供微信公眾號商城、H5、功能系統(tǒng)開發(fā)，如您需要找專業(yè)的公眾號開發(fā)團隊，委托第三方公司開發(fā)公眾號菜單及網(wǎng)頁內(nèi)容請聯(lián)系派迪科技
查看詳情
小程序開發(fā)
杭州派迪科技專業(yè)小程序開發(fā)，為企業(yè)提供微信小程序開發(fā),包括小程序商城、小程序應用及其他平臺,可根據(jù)客戶需求進行定制開發(fā),提供源代碼,可二次開發(fā),可申請軟件著作權,歡迎咨詢。我們以用戶為中心的程序功能豐富、直觀且性能極佳。我們以清晰的業(yè)務目標視圖制作您的項目目的地，并確保它支持用戶訪問體驗?？稍诳缭O備上產(chǎn)生無縫的全渠道體驗，應用程序具有豐富的 UI/UX、規(guī)范化的數(shù)據(jù)庫和強大的框架，可提供更好性能。
查看詳情
在線教育
查看詳情
APP/應用平臺開發(fā)
杭州派迪科技專業(yè)的app開發(fā)平臺,9年開發(fā)經(jīng)驗,專注app開發(fā)、app軟件開發(fā)、手機app制作為教育行業(yè)、檢修行業(yè)、商城電商系統(tǒng)等APP提供過全程策劃及開發(fā)
查看詳情