mpvue小程序踩坑之旅

mpvue小程序

经过一段时间的项目立项，调研，公司大佬根据技术选型，开发成本，以及终端代码维护等综合考虑决定使用mpvue来开发小程序端的业务，微信公众号的项目也是选用的vue框架进行开发并且已经线上运行，因为小程序不支持dom操作，无法完全兼容公众号的代码，所以我们小程序端使用mpvue对原项目进行了一些修改。

mpvue框架搭建

小程序分为全局配置和页面配置 ,全局配置在app.json中配置 
## 全局安装 vue-cli
$ npm install --global vue-cli

## 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

## 安装依赖
$ cd my-project
$ npm install
##启动构建
$ npm run dev
复制代码

mpvue文档链接

base：在微信开发者工具中需要 npm run build 导入dist文件目录下的wx文件夹，然后npm run dev 就可以热更新开发项目了

路由

由于小程序本身配置问题mpvue并不能像vue一些支持router配置，只能使用小程序自带的页面配置

我们在增加页面的时候需要在app.js文件中配置一下页面的路径，手动复制pages文件夹中文件并修改成你配置的文件名

base:当新添加文件后需要重新build，再启服务，不然调试没有效果

组件

组件的功能基本支持，这也是使用mpvue提升开发效率其中的一个比较不错的优点，但需要注意其中几点
1 import ** from **.vue。import引入组件的时候文件必须添加后缀名.vue否者组件引入之后页面不会渲染。
2 有些组件是不支持的例如：动态组件，自定义 render，和<scripttype="text/x-template">字符串模版等都不支持。(我的项目中没怎么用到这些，没有具体实践过)
原因很简单，因为小程序要预编译出 wxml。
mpvue组件文档

页面跳转以及参数传递

因为没有路由文件的问题，页面跳转只能使用小程序原生Api来进行操作，小程序提供了他的一套规则，我目前只用到了俩种。
1 redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面，会销毁其他页面栈

    wx.redirectTo({
        url: `/pages/${type}/main?roomId=${this.roomId}`
    }) 
复制代码

2 navigateTo：留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

    wx.navigateTo({
        url: `/pages/${type}/main?roomId=${this.roomId}`
    }) 
复制代码

    {
      "navigationBarTitleText": "首页",
      "disableSwipeBack": true
    }
复制代码

自带返回icon页面title需要在当前页面文件夹的json文件里面配置上面的俩个字段
3 接受页面路径参数，在页面中添加onload方法默认option对象中就可以接收到页面路径的参数。

    onLoad(option) {
        this.roomId=option.roomId
    }
复制代码

小程序路由文档

filter 过滤器

因为小程序不支持dom操作所以mpvue无法集成vue的filter功能，好多数据操作只能在请求到数据之后根据业务需求在回调函数中对数据进行操作处理

转载于:https://juejin.im/post/5c7e3c9a6fb9a049c9666bcf