微信小程序学习mpvue框架

微信小程序学习mpvue框架

简介

mpvue继承自vue技术规范和语法特点与vue保持一致需要有一定vue使用经验，这是由美团技术团队开发的一个小程序前端框架，因为美团的技术栈是主vue又认为小程序学习起来成本有点高想到如何能多端复用所以就开发了mpvue出来。所以懒惰使人进步（滑稽）

入门

1
2
3
4
5
6
7
8
9
10
11
# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

生命周期

同 vue，不同的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期，详细的 vue 生命周期文档

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。

不支持过于复杂的JavaScript渲染表达式！！！

不支持函数！！！

列表渲染

只是需要注意一点，嵌套列表渲染，必须指定不同的索引！

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

踩坑注意：

  • 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
  • 小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。
  • 事件修饰符
    • .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！
    • .prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
    • .capture 支持 1.0.9
    • .self 没有可以判断的标识
    • .once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑
  • 其他 键值修饰符 等在小程序中压根没键盘，所以。。。

如果不确定会不会出毛病的请使用查阅微信小程序文档使用微信原生代码！！！！

例如表单控件

mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

个人实践总结

新建页面需要包含index.vue main.js main.json 微信中的html、css、js都包含在index.vue中main.js

需要引入vue文件还有挂载index.vue

Main.js

1
2
3
4
5
6
import Vue from 'vue'
import Index from './index.vue'

const index = new Vue(Index)

index.$mount()

组件使用和vue一样生成template在使用页面中引入注册，注意组件必须包含main.js文件

每次生成新的网页都需要npm run dev重新打包dist文件才能正常显示

暂时实践出来的总结就这些还有更多需要接下来去实践

希望能把知识融汇贯通～～