mpvue框架踩过的坑，微信小程序开发经验谈

踩坑经验谈

公司最近接了一个订制小程序，需求是从APP改成微信小程序。综合项目特点，我们考虑用mpvue框架来开发，毕竟mpvue号称“用vue开发小程序”，但实际使用中还是遇到了一些问题，总结下来有以下几点值得记录下来。

1. 新建页面的坑

新建页面，需要新建页面文件夹 → 新建index.vue，main.js，main.json并填入页面基本内容 → 在项目app.json中添加页面信息。

看着简单，但问题来了。通常情况下，我们会在pages下按照模块新建文件夹，比如有个订单模块，那新建页面时是不是可以在pages/order下新建文件并填入上述内容呢？

坑就坑在这里，在pages目录下新建文件夹并不能被识别，根本就无法在小程序里打开该页面，必须直接在pages目录下新建页面文件才可以，且新建页面时必须严格按照上述步骤，index.vue、main.js、main.json三个文件不能少。

2. 无法使用多个入口文件

这个情况主要针对组件化项目，mpvue只支持一个入口文件，这与vue完全不同，vue可以有多个入口文件。

鉴于这种限制，为了使用组件化开发，需要在新建页面时手动引入组件文件。

3. 路由模式限制

mpvue有两种路由模式：hash模式和history模式。默认情况下，mpvue使用hash模式。但是，微信小程序不支持hash模式，因此mpvue的hash模式不能在微信小程序中使用。

要使用mpvue开发微信小程序，需要将路由模式设置为history模式。

4. 调试不方便

mpvue的调试方式与vue完全不同，需要使用微信开发者工具来调试，不太习惯。而且，微信开发者工具的功能也有限，很多时候只能靠打印log来排查问题。

另外，mpvue的热更新功能不太好用，有时即使改了代码，页面也不一定能更新。

5. 兼容性问题

mpvue兼容性问题主要体现在两个方面：

• 浏览器兼容性：mpvue不支持IE浏览器。
• 微信版本兼容性：mpvue不支持低版本的微信。

在开发微信小程序时，需要考虑兼容性问题，以免小程序在某些浏览器或微信版本上无法正常运行。

避坑指南

通过以上踩过的坑，我们总结了一些避坑指南：

• 新建页面时，必须直接在pages目录下新建页面文件，且必须严格按照index.vue、main.js、main.json三个文件齐全的要求。
• 如果要使用组件化开发，需要在新建页面时手动引入组件文件。
• mpvue不支持hash模式，需要将路由模式设置为history模式。
• 使用微信开发者工具来调试mpvue项目。
• 考虑兼容性问题，以免小程序在某些浏览器或微信版本上无法正常运行。

希望这些避坑指南能帮助大家在使用mpvue开发微信小程序时少踩坑。

总结

mpvue是一个非常优秀的框架，使用它可以快速开发出高质量的微信小程序。但是，在使用mpvue时也需要注意一些坑，以免耽误开发进度。

希望本文能帮助大家在使用mpvue时避开这些坑，快速开发出高质量的微信小程序。