The preface

The last article from Tencent background building and building a local development environment these two aspects are summarized. When coding, these two constructs can also provide a better development environment and improve the actual development efficiency. This section is mainly shared that if you use MPVue to achieve a basic demo, the demo will mainly from the mpVue features, structure, and life cycle to achieve, encountered during the pit, Eknow jun will step step by step, walk steadily.

The characteristics of mpvue

Thorough componentized development ability: improve the code integrity of vue.js development experience

Mpvue basically integrates vue’s core code, i.e., inherits vue’s core functions-components. Components can extend HTML, encapsulate, and reuse code, illustrating that a component tree is made up of countless components. Typically an application is organized as a nested component tree:

encapsulation

There are several steps to encapsulate a component: [create a.vue file] – [perform independent logical processing] – [expose necessary properties, methods, etc.]. Example: list cards. The information includes title, content, image, time and so on. This is a standalone feature that can be wrapped up to expose only one Array of property variables, very succinct and independent. At this point, other developers can ignore the details of the list items and just focus on the logic of the current module.

reusability

Component reuse or, to use the technical term, communication between components. From the demo list card above, it is only responsible for the implementation of UI functions, not for dealing with the server; The parent component can use its Array property to render the required data, which can reduce the coupling effect, and if other modules need to use the card component, such as favorites, comments, etc. Components that can be reused are therefore called generic components.

expanding

Speaking of extensibility, this is vUE’s best practice, using object-oriented thinking to achieve the purpose of inheriting components from each other. Take a demo: data visualization of Echarts implementation. The basic configuration of the extends chart is implemented through componentization. During the process of business implementation, the extends chart component is switched between line, bar, and force guide charts. For a quick note, Vue also has a hook called mixins. This is similar to extends in that it mixes and merges, but extends has a higher precedence and executes in a higher order than the parent component.

Pvue directory structure

For the mpVUE initialization project structure, let’s look at a diagram showing the main directory structure,

Project └── build // build a package of node. Js scripts and webpack config files for different Settings in development and production environments │ ─ ─ pages │ ─ ─ utils │ ─ ─ app. Json │ ─ ─ app. Vue │ ─ ─ the main, js └ ─ ─ ─ the static / / to hold all kinds of small programs local static resource └ ─ ─ ─ package. The json / / project the main configuration file ├ ──project.config.json // Config file for managing small program projects of wechat developer toolsCopy the code

This diagram shows the functions and applications of each directory structure. For business development, you only need to develop in the SRC directory.

Mpvue life cycle

Mpvue (see Github address) is a front-end framework for developing applets using vue.js. The framework is based on vue. js core, and MPvue modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small programs, thus introducing a whole set of vue. js development experience for small program development.

Therefore, the mpVue life cycle includes both the vUE life cycle and the applets life cycle. For the life cycle of a small program, there are two cases. APP objects include onLaunch, onShow, and onHide. Page objects include onLoad,onShow, onReady, onHide and onUnload. For the vUE lifecycle, there are eight hooks. 【beforeCreate】-【created】-【beforeMount】-【 Mounted 】-【beforeUpdate】-【updated】-【beforeDestroy】-【destroyed】. Because mpVue is associated with both applets and vues, the life cycle of mpVue is actually compatible with the life cycle of vUE instances. Mpvue /mpvue- Quickstart initialization project – node_modules – mpvue- LIFECYCLE_HOOKS array

mpvue

Implement a simple demo of toolsList

Introduction: using mpvue initialization project, to implement a simple add, delete, change and check list demo, the process is divided into several small steps.

  1. First, we need to create a Todolist component in thesrc“-“componentsCreate a [todolist.vue】; Then, inpagesCreate a new foldertodolist], this is a small program to create a new page, dedicated to display todolist.
Project └─ build └─ config └─ SRC │ ├ ─todolist │ ─ ─ app. Json │ ─ ─ app. Vue │ ─ ─ the main, js └ ─ ─ ─ the static └ ─ ─ ─ package. The json └ ─ ─ ─ project. Config. JsonCopy the code
  1. Start the entry file attodolistCreate a new entry file in the “import” foldermain.js, which is a unified way to reference and mount newly created components.
   import Vue from 'vue';
   import App from './index';
   const app = new Vue(App);
   app.$mount();
Copy the code
  1. Create a new entry component to create oneindex.vuePage, in which to callcomponentsUnder thetodolist.vuecomponent
<template>
     <div>
         <todo-list></todo-list>
     </div>
</template>
<script>
    import TodoList from '@/components/todolist';
    export default{
         components: {
            TodoList 
         },
    } 
</script>
Copy the code
  1. implementationtodolistThe business logic of
  <template>
     <div>
         <todo-list></todo-list>
     </div>
</template>
<script>
    import TodoList from '@/components/todolist';
    export default{
         components: {
            TodoList 
         },
    } 
</script>
Copy the code
  1. Present effect

Ok, basically a simple add, delete, change check demo has been completed, although simple, but there are a lot of holes, such as ESLint rules, WX :for problems and so on, so you can go to GitHub to take my code comparison, I hope to have a deeper study.

conclusion

In general, it is relatively easy to understand the overall architecture of an MPVue. After all, it is quick to get started after playing VUE and knowing some principles. The main purpose of mastering both lifecycle and structural features is to be able to write better code faster. The business function is to meet the needs of the job, and the architectural principles are the true evaluation of a programmer’s level. The business function is to meet the needs of the job, and the architectural principles are the true evaluation of a programmer’s level.

Recommend the article

To develop small programs efficiently, MPvue

Want to develop small programs efficiently, MPvue understand below (2)