前文 说到我开发了一个简单的小程序叫做 车标速查(代码以及二维码详见 这里),本文简单讲讲如何将这个小程序转为 mpvue 开发(最终 成果

mpvue 官网的 文档 真的是非常简单,不,应该说是简洁,因为依托 Vue,所以很多语法不需要赘述,直接去看 Vue 的文档就好了。mpvue 这个名字真的是不忍吐槽,起名也太不上心了吧 ... 反正我个人觉得不好听

mpvue 的入门非常简单,可以看这个 quickstart。生成的模版目录结构和 Vue 开发很像,但是有区别,为了使之构建出符合小程序项目结构的代码格式: json/wxml/wxss/js 文件。src 是开发目录,dist 是最后 build 的目录,也就是小程序的代码

简单看一下 src 的代码结构:

├── App.vue
├── data
│   └── data.js
├── main.js
├── pages
│   ├── about
│   │   ├── index.vue
│   │   └── main.js
│   ├── detail
│   │   ├── index.vue
│   │   └── main.js
│   └── index
│   ├── index.vue
│   └── main.js
└── utils
└── index.js

App.vue 最后会被编译成 app.js/app.wxss,一些全局相关的样式和钩子函数会被放在这里(比如说 onLaunch,但是在 mpvue 里我们可以用 created 代替)。main.js 会被编译成 app.json,一些全局相关的配置放在这里(比如页面入口,tabbars 等)

pages 目录即为每个页面,以 index 目录为例,index.vue 会被编译成 main.js/main.wxml/main.wxss,而 main.js 可以放置针对单个页面的配置,最后会被编译成 main.json(如果没有填入配置项,则不会生成该文件)

然后来简单过下开发过程中踩的一些坑:

  • pages 目录下新增入口,需要重新 npm start 启动,因为新建了 webpack 的 entry
  • 关于 navigator。index 页面点击图标需要去详情页,这就有了导航需求。小程序有原生的 navigator 组件,现在用 mpvue 开发,那么能不能用 Vue-Router 呢?答案是并不可以,参考 这个 faq。所以最后还是用了小程序原生的 navigator 组件
  • detail 页面的 onLoad 钩子会有一个 options 参数,如果在这个页面用 created,是获取不到的,可以看下 mpvue 的 生命周期。因为 mpvue 不建议使用小程序的生命周期钩子,所以比较好的方式是在 mounted 的时候用 this.$root.$mp.query 去获取 options
  • .vue 文件需要加上 style/script 标签后才能被正确编译,这点不难理解,script 里的内容被编译成 js 文件,而 style 里的内容被编译成 wxss 文件,一个小程序的页面需要它们支撑
  • filters 还是不能用
  • 关于富文本。看了下 v-html 指令是可以用的,但是是被编译成 rich-text 组件,并不符合我的要求,最后用的是 mpvue-wxParse,还是不错的,跟 wxParse 功能基本一样
  • 关于 scroll-view。因为有个侧边导航点击跳转的功能,还是用了 scroll-view 去实现,并没有更好的办法
  • {{}} 中小程序原生不支持的语法,mpvue 同样无法支持,比如一些复杂的计算,比如函数等
  • 所有页面里面的 created 生命周期函数都会在小程序加载的时候, 一次性执行,而不是每进入一个页面执行一次(可以用 mounted 或者 onLoad 或者 onReady 代替)

总的来说,我从入门 mpvue 到用其改写这个小程序,也就不过一天时间,由此可见 mpvue 上手真的非常快,但是它给我的总体感觉是有点鸡肋,一方面可能是我这个项目有点简单(不需要用到 Vuex 以及组件化),另一方面可能还不是很了解 mpvue

官网概括的它的主要能力:

  • 彻底的组件化开发能力:提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案:方便构建复杂应用
  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  • H5 代码转换编译成小程序目标代码的能力

我觉得目前主要的亮点在于 Vuex 的可引入以及组件化开发,但是越来越觉得随着原生小程序开发的改善,这些功能都会被补充进去。所以,最大的卖点可能还是在于 多端统一

我觉得有点鸡肋的另一个重要原因是,使用 mpvue 开发并不能完全忽略小程序的 API 或者组件,比如这个小程序,还是要用 navigator 组件以及 scroll-view 组件去实现一些功能(当然随着 mpvue 生态的发展,完全有可能出现 navigator/scroll-view 的 mpvue 组件,但是这样造轮子是否值得?),而且可能还有其他一些 API。而类比 jQuery 和 js,jQuery 完全不用去考虑原生的 dom 操作方式,从而更加 “傻瓜式”。mpvue 的开发模式注定不会是这样的结局(因为并不是从小程序底层去开发)

另外一点,用 mpvue 开发,增加了一层 vue->小程序 编译环节,所以 reload 的速度应该会比原生开发慢一点

鲁小夫 在 如何看待美团开源的 mpvue ? 这个问题下的答案非常值得思考:

不过我们也该思考一下,为什么大家对微信小程序自带的机制有这么多意见,为什么大家对 vue 这么认同,为什么多端兼容这个事情这么重要,为什么微信小程序没有拥抱开源,为什么微信小程序的技术栈没能做到标准化通用化。为了兼容微信小程序,前端工程师做了这么多工作,弄了那么多框架,到底得到的是什么。

以前看到过一句话,大概意思是,微信小程序有太多满分的开源框架可以借鉴,最后却造了个负分的轮子。

all in all,我的看法是,如果你刚好熟悉 Vue 或者需要多端统一开发,那么 mpvue 或许是个选择,如果你只是从头开始开发一个小程序,原生开发也未尝不可。说到底,一系列小程序框架的出现无非是原生开发体验太差,但是我相信,以微信的能力,假以时日能够把小程序原生开发的体验做好。

mpvue 初体验之改写车标速查小程序的更多相关文章

  1. vue初体验:实现一个增删查改成绩单

    前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...

  2. 【阿里云产品公测】消息队列服务MQS java SDK 机器人应用初体验

    [阿里云产品公测]消息队列服务MQS java SDK 机器人应用初体验 作者:阿里云用户啊里新人   初体验 之 测评环境 由于MQS支持外网访问,因此我在本地做了一些简单测试(可能有些业余),之后 ...

  3. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  4. 为什么选择MpVue进行小程序的开发

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...

  5. 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?

    小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)? 自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Androi ...

  6. 小程序第三方框架对比 ( wepy / mpvue / taro )(转)

    文章转自  https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...

  7. 小程序第三方框架对比 ( wepy / mpvue / taro )

      众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...

  8. 基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...

  9. 基于mpvue的小程序项目搭建的步骤一

    未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...

随机推荐

  1. 模拟Http请求的几种常用方式

    HttpURLConnection HttpClient JSOUP Nutch 后续补充用法……

  2. Taro开发之城市选择器(带坐标)

    要写个城市选择器能返回对应的城市(这里只定义到了地级市),同时返回坐标系,参考了网上资料,下面就看看具体代码吧 import Taro, { Component } from '@tarojs/tar ...

  3. 基于springboot的SSM框架实现返回easyui-tree所需要数据

    1.easyui-tree easui-tree目所需要的数据结构类型如下: [ { "children": [ { "children": [], " ...

  4. 一起学libcef--搭建自己的libcef运行环境(Win32程序,错误C2220解决方案)

    转自 http://blog.csdn.net/wangshubo1989/article/details/50180413 现在就来讲讲如何在自己的win32程序中搭建libcef运行环境. 首先就 ...

  5. Linux 使用nmcli配置网络

    Linux 使用nmcli配置网络 前提: 在虚拟机中添加一张桥接模式的网卡,如果是VirtualBox虚拟机中要shutdown才能添加. 1.启动NetworkManager工具,安装nmcli命 ...

  6. python 获取随机字母

    Python2 #-*- coding:utf- -*- import string #导入string这个模块 print string.digits #输出包含数字0~9的字符串 print st ...

  7. Java8-函数式接口理解及测试

    1.  函数式接口的理解 根据重构的思想,需要把容易变化的模块进行抽象并封装起来,从这个点来看,Java8新引入的函数式接口就是基于这个思想进行设计的. 2. 函数式接口定义 2.1 自定义如下 需要 ...

  8. 解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题

    在setting.json中加入如下内容 { "eslint.autoFixOnSave": true, "eslint.validate": [ " ...

  9. spring boot1.0 集成quartz 动态配置定时任务

    转载自 https://www.imooc.com/article/36278 一.Quartz简介了解 Quartz Quartz 是一个完全由 Java 编写的开源作业调度框架,为在 Java 应 ...

  10. opencv关于Mat类中的Scalar()---颜色赋值

    这个 CvScalar就是一个可以用来存放4个double数值的数组(O'Reilly的书上写的是4个整型成员):一般用来存放像素值(不一定是灰度值哦)的,最多可以存放4个通道的. typedef s ...