用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瞭解下（二）

---