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)
    }

想到的解决方案只能是在方法里加上判断，决定到底要不要执行
网上搜索相关问题并没有得到答案，大家有遇到吗

如有不足还请各位补充和指正?