您的当前位置:首页正文

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

2024-11-30 来源:个人技术集锦

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上。

显示全文