資訊專欄INFORMATION COLUMN
摘要：小程序采坑記上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結。但一些人可能會遇過這種情況已知小程序組件默認高度，如果子元素高度過高，不會自適應高度。但實際上真是這樣嗎其實小程序的組件表現挺奇怪的。擅長微信小程序開發，系統管理后臺。
小程序采坑記
上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結。希望能對那些跟我一樣有遇到過同樣問題的人提供一點幫助，避免掉進這些坑，少走一些彎路。因為自己比較菜，也講不了多少有用的東西，歡迎大神指教~~1. swiper組件高度的自適應問題
用過小程序swiper組件的everybody 應該都知道，在swiper組件里只可放置swiper-item組件，否則會導致未定義的行為。但一些人可能會遇過這種情況：已知小程序 swiper 組件默認高度150px，如果子元素高度過高，swiper不會自適應高度。
這種情況挺坑的。。要動態的改變swiper的高度，還得靠wx.createSelectorQuery()（在自定義組件或包含自定義組件的頁面中，應使用 this.createSelectorQuery() 來代替）創建一個SelectorQuery 對象實例，通過選擇器獲取組件的高度去動態地改變swiper的高度，麻煩。
2. scroll-view組件內嵌原生組件scroll-view組件不得不說，挺坑的，尤其是在與原生組件配合著使用的時候，容易出現”驚喜“的效果。在scroll-view里內嵌textarea原生組件，真機調試上textarea直接不跟著滑動；在scroll-view里內嵌input組件，安卓手機的測試正常，iPhone上卻出現了input框里輸入數字重疊的情況......流淚ing...
有個解決的方法是，用view組件替代scroll-view組件，在view組件里設置屬性scroll-y或scroll-x，可模擬scroll-view的滑動功能，但需要給view組件設置{overflow: auto;}的樣式才行。
3. 公共屬性hidden失效的問題有些人可能一直使用hidden都沒出什么問題，覺得hidden是一直生效的，但實際上hidden屬性也有失效的時候。
舉個栗子，用最簡單的代碼闡述這個現象：
啦啦啦
啦啦啦
你會發現，前一個被成功隱藏了，但是后一個不會被隱藏。
一句話：在style屬性里設置display屬性會直接讓hidden屬性失效。
4. switch組件先引用下官方文檔的說明：
可發現，這里僅有一個color樣式可設置，若要改變switch組件的尺寸，還得這樣寫：
.wx-switch-input{
width: 82rpx!important;
height: 40rpx!important;
}
.wx-switch-input::before{
width: 80rpx!important;
height: 36rpx!important;
}
.wx-switch-input::after{
width: 38rpx!important;
height: 36rpx!important;
}
這種處理方式，雖然起作用了，但實際上可以看出，尺寸的設置依舊有很大的限制（可以自己試試），并不推薦這種做法。比較好的方法是引入第三方的組件庫，例如直接用Vant Weapp里的switch組件。
5. 原生組件input無法被cover-view和cover-image之外的組件覆蓋？對于這個問題，可能很多人都會回答說：是的。但實際上真是這樣嗎？
其實小程序的input組件表現挺奇怪的。首先，官方文檔說他僅在focus時表現為原生組件。
這句話直到現在，我也覺得挺有問題的。來看看這個栗子吧，看看input組件的神奇表現：
效果如下：
這是input框未輸入文字（不管有沒有聚焦）時的表現。如果此時輸入文字，就會變成醬紫：
神奇不神奇？好吧，就算你說不神奇，我也要繼續。這里特地給input組件添加了背景色，可看出，當輸入了文字時，圖片卻并沒有能覆蓋input組件，圖片上綁定的click方法是觸發不了的。但input組件的背景色此時竟無法覆蓋圖片的樣式。
此刻你可能會問：就這樣？還有沒有別的？
嗯嗯.......問得好！當然還有另外的現象。
細心的你可能注意到了，上面的代碼中，image組件的層級設為了1。這個如果設置得大一點，有沒有影響呢？
你可能會說：input那可是原生組件啊，image的層級再大，一樣的，沒區別。
真是這樣嗎？現在直接把image的z-index的值設為2，為了避免擋住視線，決定把image組件移至右邊，故設置了樣式{right: 20rpx}。結果如下：
......好了，意外又出現了，你可以去買彩票了......
設置image組件層級為1時，若input框未輸入文字（不管有沒有聚焦），此時是會覆蓋image組件的樣式的，但是image層級為2時已經覆蓋不了了。但是在輸入了文字時的表現上，和嘗試著點擊image組件上的click方法時的表現上，還是一樣的。
當image組件的層級設置為3呢？奇跡開始了。因為此時點擊image組件成功地觸發click方法。換句話說就是：原生組件input已經被cover-view和cover-image之外的組件覆蓋了。
原文鏈接 歡迎來撩鴨！！！
]
【作者簡介】 TRIS，蘆葦科技web前端開發工程師，喜歡唱歌、看動漫、看小說。擅長微信小程序開發，系統管理后臺。訪問www.talkmnoney.cn了解更多。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105400.html
摘要：實際上是指的為簡化開發而開源的第三方庫。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網上線后發現，啟用后不能播放視頻了。把當成了失敗請求，導致請求視頻文件失敗。 PWA（Progressive Web App）是前端的大趨勢，它能極大的加快前端頁面的加載速度，得到近乎原生 app 的展示效果（其實難說）。PWA 其實是多種前端技術的組合，其中最重要的一個技術就是 service ...
摘要：移除總結使用插件配置如下移除沒成功報錯如下配置參考優化實踐刪除和配置最終還是沒有成功，報錯如下使用插件安裝依賴庫配置如下生產環境移除總結該方案成功了 vue-cli 3.x 移除console總結 使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js const UglifyJsPlugin = require(uglifyjs-we...
摘要：前端日報精選從零學習技術棧新版本及簡介石墨表格之應用實戰一道面試題目引發的思考新為帶來的性能變化中文第期前端部署采坑記個最基本的面試問題及答案上插件開發簡介一開發入門掘金插件開發簡介二如何添加瀏覽器擴展白名單掘金層疊相關知識指北掘 2017-09-09 前端日報 精選 從零學習React技術棧：React 新版本及 ES6 簡介石墨表格之 Web Worker 應用實戰一道面試題目引發...
摘要：上線時間問題發布審核時間，微信小時內會審核完成，但是支付寶官方公示是上線審核需要三到五個工作日，據親測，實際支付寶審核印版不會超過小時，但是支付寶的審核相比較微信真的很嚴格。 前言： 最近一個月接收一個支付寶小程序項目，并進行原生開發，現將遇到的問題，爬過的坑給大家進行分享，希望讀者可以少走彎路，以下介紹的內容將從大方面到細節進行展開。 廢話少言，直接開始步入正題 ①：上傳、發布問...
閱讀 1986·2021-09-07 10:24
閱讀 2091·2019-08-30 15:55
閱讀 2042·2019-08-30 15:43
閱讀 673·2019-08-29 15:25
閱讀 1057·2019-08-29 12:19
閱讀 1933·2019-08-23 18:32
閱讀 1521·2019-08-23 17:59
閱讀 951·2019-08-23 12:22
