mpvue将vue项目转换为小程序

介绍MPVue：将Vue项目转化为小程序的开发资料与流程

一、MPVue简介

MPVue是由美团点评团队推出的一款基于Vue框架的小程序开发工具。它通过对Vue的核心代码进行二次开发，赋予了Vue开发微信小程序的能力。使用MPVue开发小程序，开发者可以享受到彻底的组件化开发能力、完整的Vue.js开发体验、方便的Vuex数据管理方案、快捷的webpack构建机制以及支持使用npm外部依赖等多项优势。MPVue还具有将H5代码转换编译成小程序目标代码的能力，从而大大提高了开发效率和代码复用性。虽然理论上可以实现一套代码跑在多端（WEB、微信小程序、支付宝小程序、Native），但由于各端的差异性，官方并不建议这样做。

二、MPVue开发流程

1. 小程序账号配置

开发者需要前往小程序官网，根据指引填写信息和提交相应的资料，申请小程序帐号。在菜单“设置”-“开发设置”中获取小程序的AppID。接着，在同样的菜单中配置服务器域名，确保域名以https开头。

2. 安装开发工具

开发者需要前往小程序开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装。更详细的开发者工具介绍可以查看相关文档。安装完成后，打开小程序开发者工具，使用微信扫码登录开发者工具，为开发小程序做好准备。

3. MPVue生成项目

在开发前，需要先安装全局的vue-cli。可以通过命令行输入“npm install --global vue-cli”进行安装。然后，使用vue-cli创建一个基于mpvue-quickstart模板的新项目。具体命令为：“vue init mpvue/mpvue-quickstart my-project”。进入项目目录后，通过命令“npm install”安装依赖。使用命令“npm run dev”启动构建。构建成功后，本地目录下会生成一个dist文件，这个文件就是生成的小程序相关代码。在小程序中新建项目时，需要填写之前获取的appid，以便后续在手机上进行预览和真机测试。小程序的文件目录即为本地项目目录的dist文件。

三、mpvue开发中的规范与要点

在mpvue开发中，我们不仅要遵循vue的生命周期，还要兼容小程序特有的生命周期。

1、生命周期的交融

在mpvue中，我们体验到了vue与小程序生命周期的和谐交融。对于app部分，我们有onLaunch（初始化）、onShow（当小程序启动或从后台进入前台显示）、onHide（当小程序从前台进入后台）。而对于页面部分，我们则拥有onLoad（监听页面加载）、onShow（监听页面显示）、onReady（监听页面初次渲染完成）、onHide（监听页面隐藏）、onUnload（监听页面卸载）等生命周期函数。还有针对小程序特性的钩子，如onPullDownRefresh（监听用户下拉动作）、onReachBottom（页面上拉触底事件的处理函数）、onShareAppMessage（用户点击右上角分享）等。

值得注意的是，created这个钩子在实际项目加载时可能会引发bug，所有页面的created函数会被一起调用，而进入页面时并不会再次被调用。建议使用小程序的onLoad钩子代替。如果从一个页面返回另一个页面，后一个页面的mounted钩子不会被触发，因为页面没有被重新加载。如果需要每次页面展示都调用某些逻辑，建议使用小程序的onShow代替。

2、mpvue转换的部分规则

在mpvue开发中，有一些特定的转换规则需要留意。微信小程序的页面query参数是通过onLoad获取的，mpvue对此进行了优化，允许通过this.$root.$mp.query直接获取参数数据。由于小程序的特性，所有的BOM／DOM无法使用，包括v-html、v-text。复杂的JavaScript渲染表达式也不被支持。对于模板中的{{}}双花括号部分，由于微信小程序的数据绑定能力限制，无法支持复杂的JavaScript表达式。目前可用的操作符包括 +、-、%、?:、!、==、===、>、<、[]和.。某些复杂的操作如反转字符串（message.split('').reverse().join('')）则不被支持。过滤器也不被支持，因为渲染部分会转为wxml，而wxml不支持过滤器。不支持在template内使用methods中的函数以及官方文档中的classObject和styleObject语法。

在开发过程中，对于节点信息的获取，可以使用wx.createSelectorQuery().select(className).boundingClientRect().exec(res=>{在此处获取到节点的信息left, width, height})这种方式进行操作。

关于类名与样式绑定：组件中的类名绑定有其特定的使用范围。当使用框架或库进行开发时，不支持直接在组件上使用复杂的Class与Style绑定。只能将这些绑定放在组件最外层的div元素上。这意味着我们需要确保在编写代码时遵循这一规则。当我们在列表中进行渲染时，特别是在嵌套列表的情况下，必须为每个列表指定不同的索引，以确保数据的正确对应。例如，在嵌套循环中，我们需要为外层循环的索引命名为“index”，内层循环的索引命名为“itemIndex”，以确保代码的清晰和可维护性。

关于小程序特性：小程序与我们常用的Web开发有所不同，它有自己的特性和规则。例如，小程序不支持传统的路由系统。为了实现页面之间的跳转，我们需要使用小程序的页面导航API，如`wx.navigateTo()`来进入子页面或`wx.reLaunch()`来打开新页面。获取当前页面的地址也有特定的方法。我们需要使用`getCurrentPages()[0].route`来替代`this.$route.fullPath`。小程序的API请求返回的数据结构也有所不同，通常会在外层添加一个“data”字段。在处理接口返回的数据时，我们需要注意这一差异。

关于样式与功能限制：在小程序中，有些Web开发的常见做法并不适用。例如，我们不能直接使用本地图片作为背景图。为了实现背景图的效果，我们可以选择使用网络图片、base64编码的图片或者使用``、``标签。对于上拉加载和下拉刷新的功能，我们应选择使用小程序提供的全局API，因为`scroll-view`组件中无法使用这些功能。小程序不支持CSS媒体查询，因此我们在编写样式时应避免使用标签选择器，以确保样式的可维护性。

关于富文本：为了在小程序中展示丰富的文本内容，我们可以使用`mpvue-wxParse`插件。安装这个插件后，我们只需在组件内引入并使用``标签，然后为`content`属性绑定文章数据即可。需要在样式表中导入`mpvue-wxparse`的CSS文件以确保样式正确渲染。这样我们就能在小程序中轻松展示复杂的文本内容了。

遵循这些规则和建议，我们可以更加高效地开发小程序，确保功能的正确性和用户体验的流畅性。