mpvue & 小程序開發過程當中的坑

業務須要，最近開始作小程序開發，使用的是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。