5

前言

公司要开发一个小程序,面向用户分为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属性直接写到遍历的标签上,如果我们还像上边一样的写法,开发者工具会提示:

clipboard.png
这样一来,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>

终端会直接报错:

clipboard.png

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目录下,结构如下:

clipboard.png

引入的时候这样,在对应目录下创建main.json文件,
clipboard.png

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

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

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


大师兄
1.1k 声望165 粉丝

可以假装很努力,但结果不会骗你