1.用Vue写小程序:机理,webpack和相关的loader将vue的程序变为wxml、wxss、js、json
比如,你写的:
将变为
再比如,你写的
将变为
http://mpvue.com/
首先要安装Vue-cli
使用vue init命令实际上装的是github上面的包:
然后启动项目npm run dev
我们写的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上。