mpvue开发踩过的坑

前端

2024-02-12 23:03:04

在软件开发过程中，特别是当我们使用新的技术框架时，我们经常会遇到各种各样的问题，也就是我们常说的“坑”。这些问题往往会浪费我们大量的时间和精力，让我们感到沮丧和挫败。

最近，我使用mpvue开发了一个小程序。在开发过程中，我也踩了一些坑，包括小程序的也有，mpvue的也有。

在本文中，我将分享我在mpvue开发中踩过的坑，以及相应的解决办法。我希望这些经验能够帮助其他mpvue开发者避免踩同样的坑，从而提高开发效率。

一、textarea 标签

textarea 标签在小程序中有很多坑，而且很多坑都是莫名其妙的，让人找不到原因。

textarea 无法自动聚焦

当我们在 textarea 标签上使用 autofocus 属性时，发现它无法自动聚焦。

<textarea autofocus></textarea>

解决办法：在 textarea 标签上使用 v-focus 属性，然后在组件中使用 $refs 获取 textarea 标签的引用，并调用 focus() 方法来聚焦。

<textarea ref="textarea"></textarea>

this.$refs.textarea.focus()

textarea 无法滚动

当我们在 textarea 标签上使用 scroll-y 属性时，发现它无法滚动。

<textarea scroll-y></textarea>

解决办法：在 textarea 标签上使用 v-scroll-y 属性。

<textarea v-scroll-y></textarea>

textarea 无法使用 v-model

当我们在 textarea 标签上使用 v-model 时，发现它无法更新 textarea 标签的值。

<textarea v-model="value"></textarea>

解决办法：在 textarea 标签上使用 v-value 属性。

<textarea v-value="value"></textarea>

二、css display 属性不生效

在 mpvue 中，当我们在 css 中设置 display 属性时，发现它不生效。

.box {
  display: none;
}

解决办法：在 css 中使用 v-show 属性。

.box {
  v-show: false;
}

三、图片懒加载失效

在 mpvue 中，当我们在使用图片懒加载时，发现它失效了。

解决办法：在图片懒加载库中，找到加载图片的函数，并将其替换为自己的函数。

// 原来的加载图片函数
function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.onload = () => {
      resolve(image)
    }
    image.onerror = () => {
      reject(new Error('图片加载失败'))
    }
    image.src = url
  })
}

// 自己写的加载图片函数
function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.onload = () => {
      // 在这里做一些事情，比如将图片添加到 DOM 中
      resolve(image)
    }
    image.onerror = () => {
      reject(new Error('图片加载失败'))
    }
    image.src = url
  })
}

四、无法在子组件中使用 this.$refs

在 mpvue 中，当我们在子组件中使用 this.$refs 时，发现它无法获取到子组件的引用。

解决办法：在子组件中使用 this.parent.refs 获取父组件的引用，然后通过父组件的引用获取子组件的引用。

<!-- 父组件 -->
<template>
  <Child ref="child"></Child>
</template>

<script>
export default {
  methods: {
    getChildRef() {
      return this.$refs.child
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div></div>
</template>

<script>
export default {
  methods: {
    getParentRef() {
      return this.$parent.$refs.parent
    }
  }
}
</script>

五、页面无法跳转

在 mpvue 中，当我们在页面之间跳转时，发现页面无法跳转。

解决办法：在 app.json 中配置页面跳转的路由。

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情页"
      }
    ]
  }
}