mpvue开发小程序——入门笔记（01）

接下来可能要开发一个小程序，同事推荐使用mpvue，那么我提前熟悉下。

官网地址：http://mpvue.com/

1.快速上手 http://mpvue.com/mpvue/quickstart/

跟着官网提示走，搭建一个mpvue的小程序项目

注意，这里我用yarn代替了npm才安装成功。

2.分包机制

mpvue-loader 1.1.2-rc.2之后，优化了build后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。

3.注意事项：新增的页面需要重新 npm run dev 或 yarn run dev来进行编译

4.不要在选项属性或回调上使用箭头函数

扫描二维码关注公众号，回复： 6249720 查看本文章

比如：

created: () => console.log(this.a)

或

vm.$watch('a', newValue => this.myMethod())

因为箭头函数是和父级上下文绑定在一起的，this不会是如你做预期的vue实例，且this.a或this.myMethod也会是未定义的

5.微信小程序的页面的query参数是通过onLoad获取的，mpvue对此进行了优化，直接通过this.$root.$mp.query获取相应的数据参数，其调用需要在onLoad生命周期出发之后使用，比如onShow等

6.不支持 v-html

7.不支持部分复杂的JavaScript渲染表达式

8.不支持过滤器

9.不支持在template内使用methods中的函数

10.class支持的语法：

<p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[activeClass, errorClass]">333</p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

将分别被转换成：

<view class="_p {{[isActive ? 'active' : '']}}">111</view>
<view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222</view>
<view class="_p static {{[activeClass, errorClass]}}">333</view>
<view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444</view>
<view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555</view>

11.style支持的语法：

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

将分别被转换成：

<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view>

不支持vue官网的class和style绑定语法

12.用computed方法生成class或style字符串，插入到页面中

<template>
    <!-- 支持 -->
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>

    <!-- 不支持 -->
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

13.嵌套列表渲染必须指定不同的索引

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

（未完待续）

以上笔记摘自： mpvue官方文档 http://mpvue.com/mpvue/

mpvue开发小程序——入门笔记（01）

猜你喜欢