業務需要，最近開始做小程式開發，使用的是mpvue，做的過程中踩了一些坑，小程式的也有，mpvue的也有。感覺小程式中textarea巨多坑，還有許多找不到原因的，莫名其妙的坑。總得來說小程式並不適合做複雜的表單頁面。
踩坑記錄
1.mpvue將元素設定display屬性，然後v-show控制顯隱，不生效，元素始終以css中的display屬性為準
在css中設定display屬性，使用v-show不生效，在mpvue中使用原生小程式的:hidden也是這樣的效果，元素以css中的display屬性為準，目前可以用:class繫結。
測試程式碼：
<template>
<div class="container">
<div class="box" :hidden="!isShow">原生hidden
</div>
<div class="box" v-show="isShow">v-show
</div>
<div class="box" :class="{`hidden`:!isShow}">:class繫結
</div>
<button @tap="showUser">點我</button>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
},
methods: {
showUser() {
this.isShow = !this.isShow;
}
}
};
</script>
<style scoped>
.box {
display: block;
width: 100rpx;
height: 200rpx;
background: yellow;
margin:0 auto;
}
.hidden{
display:none;
}
</style>
複製程式碼2.textarea層級最高問題
一個長頁面表單，提交按鈕使用fixed固定在底部是很常見的場景，由於textarea層級最高，無法被其他元素遮蓋，所以textarea的value部分會透出，並且在底部按鈕點選時也可以觸發focus事件。（同理在有textarea的頁面上覆蓋彈層，也同樣情況）
查了文件，可以用元件cover-view，此元件可以覆蓋在原生元件之上的文字檢視，可覆蓋的原生元件包括map、video、canvas、camera、live-player、live-pusher。將底部按鈕放在cover-view中，解決了層級問題，但在手機上測試是，長頁面滾動時，發現底部的cover-view會發生抖動，說明小程式的一些原生元件實現的還不是特別好。
最終用的方案是將textarea做在彈窗中，作為一個公共的編輯器元件，觸發時才顯示，層級最高。避免出現覆蓋其他元素的情況。
3.小程式中使用fixed自定義彈窗時，如何使底部長頁面禁止滾動
這個場景也非常常見，解決方案有：
1.底部長頁面使用scroll-view，當彈窗顯示時，將scroll-y設定為false，彈窗關閉時，將scroll-y設定為true。
2.原生小程式中可以在彈層上使用catchtouchmove，此事件會阻止向父元素冒泡，mpvue中使用@touchmove.stop=”一個空函式”。
4.mpvue程式碼中有異常時，小程式開發者工具有時候不會丟擲異常報錯，除了缺少檔案會報錯外，控制檯大部分時間都是安靜的，難以除錯 。
經查詢，正常情況下程式碼錯誤時開發者工具是有錯誤提示的，而promise中的程式碼異常時不會有錯誤丟擲。原因：mpvue中的promise被替換為 core-js polyfill 的 Promise 物件，global上沒有全域性錯誤處理。
解決方案：在src下的main.js中新增一行require(`core-js/library/modules/_global.js`).console = console或者require(`core-js/library/modules/_global.js`).onunhandledrejection = console.errror
5.textarea寫在元件中時，ios下繫結@input事件失敗
這個錯誤有點摸不著頭腦，事情是這樣的，我們把textarea做在彈層中作為一個公共編輯器元件，點選可編輯區域觸發顯示彈層。差不多長這樣：
輸入框需要實時統計字數，於是繫結了input事件。彈層使用v-show控制顯隱，在開發者工具上正常，安卓下也正常，ios下有異常，提示@input繫結的事件找不到，同時繫結其他事件如bindblur就是正常的。
最終把v-show改成v-if就好了，原因還沒找到。
6.引用第三方庫報錯TypeError: Cannot assign to read only property `exports` of object `#<Object>`。
引用第三方庫時，我並未使用npm包的方式，而是直接將第三方庫中的dist下的檔案拷貝放到專案中libs下，然而webpack報錯了，這個並非mpvue的問題，而是webpack不能混用import以及module.exports。因此需要將ES6的模組語法轉換為AMD、CommonJS、UMD之類的模組化標準語法。
1.使用transform-es2015-modules-commonjs外掛
複製程式碼 2.將babelrc下preset中的modules設定成"commonjs"
複製程式碼tips
1.小程式數字輸入框鍵盤在ios下沒有完成按鈕，互動體驗差。使用普通輸入框。
2.textarea不能放到scroll-view裡面使用。
3.textarea 的 blur 事件會晚於頁面上的 tap 事件，如果需要在 button 的點選事件獲取 textarea，可以使用 form 的 bindsubmit。