mpvue开发小程序注意事项

mpvue是一种基于Vue.js的小程序开发框架，它提供了一种快速、简单、且高效的方式来构建小程序。 使用mpvue可以很容易地将Vue.js的开发经验应用于小程序开发，并且还具有小程序原生接入能力、原生渲染性能等优点。在本文中，我们将对mpvue开发小程序时需要注意的事项进行介绍。

一、框架原理

mpvue的整个开发流程可以概括为：

1.通过npm安装mpvue-cli；

2.使用mpvue-cli初始化一个mpvue项目；

3.编写Vue.js风格的组件、页面及模板；

4.使用mpvue-loader进行编译打包；

5.将打包后的代码上传到微信小程序平台。

mpvue相当于把Vue.js的语法糖，通过模板编译后，生成可以直接在小程序中使用的WXML和WXSS代码，并且mpvue底层封装了小程序原生的API，方便了我们的开发。

二、开发注意事项

1.vue-router的使用

mpvue使用的是vue-router，用法和Vue.js中基本一致，但由于小程序是通过Page进行页面切换的，因此需要在VueRouter中使用mpvue的toWxPage方法，将VueRouter中的路由信息转换为小程序中的page路径和启动参数：

```

import { toWxPage } from 'mpvue-router-patch';

Vue.use(VueRouter);

const router = new VueRouter({

routes: [

{

path: '/',

name: 'HelloWorld',

component: HelloWorld

}

]

})

router.beforeEach((to, from, next) => {

wx.navigateTo(toWxPage(to, next));

});

export default router;

```

2.页面的引入

mpvue中的页面可以使用import或者require进行引入，不需要指定后缀名。 例如：

```

import Index from './Index.vue';

export default {

components: {

Index

}

};

```

3.图片的引入

mpvue中的图片资源使用相对路径，但由于小程序中的图片需要经过上传才可以正常显示，因此需要在webpack中使用url-loader进行处理，将图片资源转换成base64格式。

4.生命周期的使用

mpvue中的生命周期与Vue.js中的基本一致，但是需要避免使用beforeCreate和created这两个生命周期函数，因为在小程序中这两个生命周期函数会被多次调用。 对于小程序中的onLoad、onShow、onReady等生命周期函数，可以通过在组件中定义相应的方法来进行调用。

5.样式的定义

mpvue中的样式需要使用类Vue.js的作用域样式，即使用scoped属性，但由于小程序中的WXML只支持一层class的定义，所以需要在根元素定义一层样式名。

```

```

6.原生组件的使用

mpvue中可以通过标签的is属性来使用小程序原生组件，例如：

```

{

"usingComponents": {

"map": "/static/wx-map/wx-map"

}

}

```

需要注意的是，在使用原生组件时，需要在config.js文件中声明使用的组件。

7.异步请求

mpvue中不能使用Vue.js中的jsonp库等第三方库进行跨域请求，因为小程序不支持跨域。可以使用原生组件wx.request进行异步请求，例如：

```

{

"navigationBarTitleText": "信息页"

}

```

三、总结

mpvue提供了一种快速、简单、且高效的方式来构建小程序，开发者可以使用Vue.js的开发经验来开发小程序，并且还具有小程序原生接入能力、原生渲染性能等优点。在开发过程中，需要注意vue-router的使用、页面的引入、图片的引入、生命周期的使用、样式的定义、原生组件的使用和异步请求等方面。掌握了这些注意事项，就可以更加高效地使用mpvue进行小程序开发。