mpvue寫小程序遇到的問題總結(自己用mpvue實現一個小程序的tabbar,vantUi的使用)

前言

公司要開發一個小程序，面向用戶分爲3種角色，所以要自己手寫個tabbar(文章編輯中，屆時將鏈接放過來)
因爲也是時隔很久寫小程序，就選擇了跟vue相近的mpvue來寫，或多或少也遇到了點問題，現總結一下。

開發環境：
系統：MAC，版本10.14.6；
微信開發者工具：Nightly v1.02.1908222;

1.當v-for遇到template標籤

VUE: 平常我們遍歷數據可能這麼寫，key屬性寫到被包裹的dom上

<template v-for="item in 10">
    <span :key="item">數字: {{item}}</span>
</template>

mpVue:小程序他會要求把key屬性直接寫到遍歷的標籤上，如果我們還像上邊一樣的寫法，開發者工具會提示：

這樣一來，template標籤就用不成了，因爲key寫到template上會直接編譯報錯，我們只能用實際的標籤來代替template

mpVue里正確的寫法：

 <div v-for="item in 10" :key="item">
      <span>{{item}}</span>
 </div>

2.組件標籤上不支持class/style

例如：

  <!-- 子組件 -->
    <card class="fatherClass" style="color: red;"></card>

終端會直接報錯：

mpVue里正確的寫法應該把class/style當成屬性傳給子組件

3.不支持綁定一個對象到style或class屬性上

VUE: 我們給dom動態綁定class可能會這樣寫：

<p :class="setClass">我是文字</p>
data() {
    return {
      setClass: {
       classOne:true,
       classTwo:false
      }}}
//最終渲染：
<p class="classOne">我是文字</p>

這樣的寫法在mpvue是不支持的，
mpVue里正確的寫法：

<p :class="{classOne:setClass.classOne}">我是文字</p>
data() {
    return {
      setClass: {
       classOne:true,
       classTwo:false
      }}}

4.使用小程序組件scroll-view，返回頂部的問題

小程序的組件，當我們滾動到一定範圍了，我們想返回頂部，
按理說只要給屬性‘setScroll’設置爲''或者0即可，
但mpvue使用的時候只設置0不會有效果，必須設置兩遍，例如：

<scroll-view scroll-y class="sc_wapper" :scroll-top="setScroll"></scroll-view>
//返回頂部
 backTop() {
      this.setScroll = '2'//隨便設置一個不爲空、不爲0的值
      this.setScroll = ''//回到頂部效果實現
    },

5.mpvue使用vantUi

vantUi官網：vant，我是這麼使用的，直接下載他的靜態資源放到本地mpVue項目裏的static目錄下，結構如下：

引入的時候這樣，在對應目錄下創建main.json文件，

main.json裏寫入:

{
  "navigationBarTitleText": "首頁",
  "usingComponents":
  {
    "van-button": "/static/vant/button/index"
  }
}

然後頁面上即可正常使用，
使用當中發現一個vant的坑，就是設置button的禁用效果失效，只是樣式樣改變了，實際上仍然還可點擊,例如:

<van-button disabled="disabled" type="primary" @click="changeSome">按鈕</van-button>

    changeSome: function() {
    //button設置了disabled，但方法仍能進來
        console.log(123)
    }

想到的解決方案只能是在方法里加上判斷，決定到底要不要執行
網上搜索相關問題並沒有得到答案，大家有遇到嗎

如有不足還請各位補充和指正😁