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属性直接写到遍历的标签上,如果我们还像上边一样的写法,开发者工具会提示:

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 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.6k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用&lt;keep-alive&gt;缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.6k

封面图
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.3k

封面图

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

1.1k 声望
165 粉丝
宣传栏