用mpvue实现一个简单的demo

序言

上一篇从腾讯后台搭建以及搭建本地开发环境这两个方面进行总结。在进行编码时，这两种搭建方式也能提供更好的开发环境，提升实际的开发效率。
这一节主要分享的即是若是用 mpvue实现一个基础的 demo，这个 demo主要会从 mpvue的特性、结构，以及生命周期来实现，期间遇到的坑，Eknow君也会一步步踩踏实了，走得稳点。

mpvue的特性

完全的组件化开发能力：提升代码
完整的 Vue.js 开发体验

这句话的意思呢，就是说mpvue基本集成了vue的核心代码，亦即继承了vue的核心功能-组件。组件能够拓展html、封装以及复用代码，它阐述一个组件树是由无数的组件去组成的。一般一个应用会以一棵嵌套的组件树的形式来组织：

而一个好的组件树具备封装性、复用性、拓展性。

封装性

组件的封装过程有这几步骤：【建立一个.vue文件】-【进行独立的逻辑处理】-【向外暴露必要的属性、方法等】。
举个demo：列表卡片。里面的信息包括标题title、内容content、图片image、时间time等。这是一个独立的功能项，能够将其封装起来，只暴露一个Array的属性变量，很是简洁、独立。
此时，其余开发者能够不用关注列表项的细节，只须要专一于当前模块的逻辑处理。

复用性

组件的复用，换个专业术语即是，组件间通讯。之前面的demo列表卡片来说，它只负责里面UI功能的实现，不负责与服务端进行打交道；而它的父组件能经过它暴露的Array属性，将须要的数据传进去，达到数据的渲染，这样即可以达到减小耦合的效果，同时若是其余模块须要用到卡片这个组件，好比收藏啊，评论呀等等。所以，能够复用的组件亦即称为通用组件。

拓展性

谈到拓展性，这个能够说是vue的优秀作法了，利用面向对象的思想，达到组件间相互继承的目的。
举个demo：Echarts实现的数据可视化图。经过组件化进行图表的基础配置，在业务实现的过程当中，将extends图表组件进行折线图、柱状图以及力导向图等的切换。
小小聊一下，vue也有一个钩子叫作mixins，这个其实跟extends功能很类似，都是起到混合合并的做用，而它们的区别是extends的优先级较高，执行的顺序要优先于父组件。

mpvue的目录结构

关于mpvue初始化的项目结构，一块儿来看一张图，展现的是主要的目录结构，

project 
└───build                  //编译打包的node.js脚本和webpack配置文件
└───config                //用于开发和生产环境下的不一样配置
└───src                    //主要进行小程序功能编写的地方
    │──components
    │──pages
    │──utils
    │──app.json
    │──App.vue
    │──main.js
└───static                //用于存放各类小程序本地静态资源
└───package.json            //项目的主配置文件
└───project.config.json    //用于管理微信开发者工具的小程序项目的配置文件

从这张图能够看出各个目录结构的功能以及应用。通常进行业务开发的时候，通常也只须要在src目录下进行开发便可。

mpvue的生命周期

mpvue （ github 地址请参见）是一个使用  Vue.js 开发小程序的前端框架。框架基于  Vue.js 核心， mpvue 修改了  Vue.js 的  runtime 和  compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套  Vue.js 开发体验。

所以，mpvue的生命周期既包括vue的生命周期也包括了小程序的生命周期。
对于小程序的生命周期来说，分为2种状况。
APP对象有onLaunch，onShow以及onHide。
Page对象有onLoad, onShow, onReady, onHide和onUnload。
而对于vue的生命周期来说，主要有8个钩子。
【beforeCreate】-【created】-【beforeMount】-【mounted】-【beforeUpdate】-【updated】-【beforeDestroy】-【destroyed】。
mpvue因为关联了小程序与vue这两种，所以mpvue的生命周期其实是vue的实例兼容小程序的生命周期的。一块儿来参照下mpvue的源码【mpvue/mpvue-quickstart初始化后的项目】-【node_modules】-【mpvue】-【LIFECYCLE_HOOKS数组】。

从这张图片能够看出，mpvue的生命周期就是按照这些钩子来对应的。

实现toolsList的简单demo

简介：利用 mpvue初始化的项目，进行实现一个简单的增删改查的列表 demo,过程分为几个小步骤。

1. 建立一个todolist组件

首先，咱们须要在【src】-【components】建立一个【todolist.vue】；接着在pages新建一个文件夹【todolist】，这是小程序新建一个页面，专门来显示todolist。

project 
└───build                
└───config               
└───src                
    │──components
      │──todolist.vue   //建立一个组件
    │──pages
      │──todolist     //建立一个文件夹
    │──utils
    │──app.json
    │──App.vue
    │──main.js
└───static               
└───package.json            
└───project.config.json

1. 着手入口文件

在todolist的文件夹里，新建一个入口文件main.js，这是一个统一的写法，将新建立的组件进行引用以及挂载。

import Vue from 'vue';
   import App from './index';
   const app = new Vue(App);
   app.$mount();

1. 新建一个入口组件

建立一个index.vue的页面，在里面调用components下的todolist.vue组件

<template>
     <div>
         <todo-list></todo-list>
     </div>
</template>
<script>
    import TodoList from '@/components/todolist';
    export default{
         components: {
            TodoList 
         },
    } 
</script>

1. 实现todolist的业务逻辑

<template>
     <div>
         <todo-list></todo-list>
     </div>
</template>
<script>
    import TodoList from '@/components/todolist';
    export default{
         components: {
            TodoList 
         },
    } 
</script>

1. 呈现的效果

ok，基本一个简单的增删改查demo已完成，虽然简单，但里面的坑位很多，好比eslint规则，wx:for问题等等，因此有空的老铁能够去GitHub那里拿下个人代码对比下，但愿能有个更深的学习。

结语

总的来说，了解一个mpvue的总体架构仍是比较简单的，毕竟玩过vue，懂得一些原理，上手起来是很快的。而不管是生命周期仍是结构特性，掌握了主要目的是为了可以更快地编写更好的代码。业务功能是只是知足工做须要，而架构原理才是真正评价一个程序员水平的高低的。业务功能是只是知足工做须要，而架构原理才是真正评价一个程序员水平的高低的。

推荐文章

想高效开发小程序，mpvue了解下（一）
想高效开发小程序，mpvue了解下（二）

---