高效开发小程序，mpvue你该了解一下

1.用Vue写小程序：机理，webpack和相关的loader将vue的程序变为wxml、wxss、js、json

比如，你写的：

将变为

再比如，你写的

将变为

http://mpvue.com/

首先要安装Vue-cli

使用vue init命令实际上装的是github上面的包：

然后启动项目npm run dev

随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

我们写的vue  → 被webpack编译为小程序能识别的源代码 → 生成了dist，将这个文件夹当做小程序工具的源代码拖入进去。

开发者工具打开这个dist：

 

你写的：

2.小程序的内置组件

slider、map、camera √

vuex √

组件 √

vue生命周期 ×

小程序生命周期 √

v-if、v-for √

建议大家看看这个文章：

https://www.cnblogs.com/wangting888/p/9701181.html

http://mpvue.com/mpvue/#_1

在模板中，用于数据绑定的双括号语法{{}}中的表达式功能存在诸多限制。

以上这些好用的功能，在mpvue中，记得都是通通不能用的哦！！！

我们只能在双括号中使用一些简单的运算符运算（+ - * % ?: ! == === > < [] .）。

但是也得找些可用的替代方案呐，大伙先考虑使用计算属性(computed)来做吧。

3. 在模板中，除事件监听外，其余地方都不能调用methods下的函数

在Vue中，模板里调用methods部分定义的函数是非常常见的，比如下面这段代码所示，

在v-if指令中调用函数getErrorNum()：

<div v-if="getErrorNum() > 0  && code == 10001" class="error">{{ errorMsg }}</div>

可是，在mpvue里就是不可以用！因为在小程序原生模板wxml里就不支持这种函数调用，导致mpvue没有很好的方式转译过去（虽然小程序有wxs，但是感觉翻译过去mpvue要做的工作会比较复杂）。

所以，可用的替代方案可能还是计算属性了。

不支持直接绑定一个对象到style或class属性上。

其实改动不大，稍微多打了一些字而已，相当于在模板的class里再定义一个对象罢了。但是据文档中说这样会提升性能。好吧，为了性能，这点麻烦还是能忍受的。但是它又说了：从性能考虑，建议不要过度依赖此......看来即使这样，也还是有性能问题。

看来最好一点的方案，还是得使用计算属性，直接生成一串样式的字符串，绑定到class或style上。