mpvue开发微信小程序踩坑

mpvue是一个基于Vue.js的小程序开发框架，可以让我们使用Vue.js的语法开发小程序。这个框架的出现大大提升了小程序开发的效率。然而，在使用mpvue开发微信小程序时，会遇到一些坑。下面是一些常见的坑和解决方法。

一、引入第三方组件库

如果需要在mpvue项目中引入第三方组件库，需要注意以下问题：

1.组件库是否支持Vue.js语法？

2.组件库中是否使用了小程序原生API？

如果第一个问题不存在，那么可以直接按照Vue.js的方式引入即可。如果有第二个问题，需要在mpvue.config.js中配置alias，将API映射到mpvue的API上。例如：

```

const resolve = dir => path.join(__dirname, '.', dir)

module.exports = {

// ...

configureWebpack: {

resolve: {

alias: {

// ...

'weui': resolve('node_modules/mpvue-weui/lib'),

}

}

},

// ...

}

```

在代码中使用时需要注意，引入方式应该使用mpvue引入：

```

import weui from 'mpvue-weui'

```

二、使用小程序原生API

在使用小程序原生API时，需要注意以下问题：

1.小程序原生API不能使用this关键字，需要使用wx关键字来调用。

2.小程序原生API只能在小程序生命周期函数或小程序事件中使用，不能在Vue组件中直接调用。如果需要在Vue组件中使用原生API，可以考虑在wx组件中包装。

```

```

三、事件机制

mpvue中的事件是使用原生小程序的事件绑定机制来实现的。但是Vue.js的事件机制和小程序的事件机制有一些区别：

1.Vue.js中的事件是冒泡的，而小程序的事件是捕获的。

2.Vue.js中的事件回调函数在HTML DOM上执行，而小程序的事件回调函数在绑定元素的wx component上执行。

为了解决这个问题，我们可以通过在模板上添加“capture-bind:”来表示绑定一个捕获型事件。而在事件回调函数中，则需要使用event.mp、event.target.mp、event.currentTarget.mp等变量。

```

```

四、生命周期和钩子函数

由于小程序的生命周期和Vue.js的生命周期存在差异，因此在使用mpvue开发小程序时需要特别注意：

1.小程序的生命周期比Vue.js的生命周期少很多，需要特别注意是否可以使用微信API。

2.mpvue的生命周期钩子函数是Vue.js生命周期钩子函数的子集，需要特别注意。

如果需要使用小程序的生命周期钩子函数，例如onLoad、onReady等，可以通过在Vue组件上添加wx:onLoad、wx:onReady等来实现。

```

```

总结

在使用mpvue开发微信小程序时，需要特别注意组件库、原生API、事件机制、生命周期和钩子函数等方面的问题。只有了解并注意这些问题，才能避免在开发中遇到一些无法解决的难题。