mpvue开发github小程序总结，遇到的坑

mpvue 开发小程序中的常见陷阱

scroll-view 组件的高度难题

scroll-view 组件是实现可滚动内容的基石。然而，为了实现滚动，它必须具备一个固定的高度。通常，我们会创建一个具有固定高度的 view 组件，并将 scroll-view 组件嵌套其中，以便在指定区域内实现滚动。

代码示例：

<view class="fixed-height">
  <!-- 上部固定区域内容 -->
</view>
<scroll-view>
  <!-- 可滚动区域内容 -->
</scroll-view>

图片加载的优化难题

mpvue 默认使用本地图片加载机制。然而，当图片数量庞大时，这会拖慢小程序的启动速度。为了提升性能，我们可以引入 CDN 来加速图片加载。

代码示例：

// main.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/static/img/error.png',
  loading: 'dist/static/img/loading.gif',
  attempt: 1
})

在需要加载图片的元素上使用 v-lazyload 指令：

<img v-lazyload="imageUrl">

自定义组件的定义难题

在 mpvue 中，自定义组件的定义与 Vue 略有不同。我们需要在组件的 JSON 文件中声明组件的属性和方法。

代码示例：

{
  "usingComponents": {
    "my-component": "../components/my-component"
  },
  "components": {
    "my-component": {
      "properties": {
        "prop1": {
          "type": String,
          "value": ""
        },
        "prop2": {
          "type": Number,
          "value": 0
        }
      },
      "methods": {
        "method1": function() {
          console.log('method1')
        },
        "method2": function() {
          console.log('method2')
        }
      }
    }
  }
}

在使用自定义组件时，我们通过 is 属性指定组件名称：

<my-component is="my-component" prop1="value1" prop2="value2" @method1="method1" @method2="method2"></my-component>

请求 URL 的相对难题

在 mpvue 中，请求 URL 必须使用相对路径，而不是绝对路径。

错误代码示例：

// 错误
axios.get('https://www.example.com/api/v1/users')

正确代码示例：

// 正确
axios.get('/api/v1/users')

触摸穿透的解决难题

mpvue 中可能会遇到触摸穿透问题，即点击元素时也会触发其父元素的点击事件。为了解决这个问题，可以在父元素上添加 catchtouch 属性。

代码示例：

<view catchtouch>
  <!-- 父元素内容 -->
</view>

结论

了解这些陷阱将有助于您在使用 mpvue 开发小程序时避免许多常见的障碍。通过遵循最佳实践并解决这些问题，您可以创建健壮且高效的小程序。

常见问题解答

• Q：为什么 scroll-view 组件需要一个固定的高度才能滚动？
  • A： 滚动需要一个明确的边界才能确定滚动范围。
• Q：为什么 CDN 可以加速图片加载？
  • A： CDN 通过在不同地理位置部署图片副本，减少了图像加载时间。
• Q：自定义组件中的 JSON 文件有什么作用？
  • A： JSON 文件定义了组件的属性、方法和关系。
• Q：为什么请求 URL 必须使用相对路径？
  • A： 相对路径使小程序更易于部署和维护。
• Q：如何解决触摸穿透问题？
  • A： 在父元素上添加 catchtouch 属性可以阻止触摸事件传播到父元素。