The principle of

MpVue is a front-end framework for developing small programs using vue.js. The framework is based on the vue.js core and rewrites the runtime and Compiler implementation of vue.js to enable it to run in a small program environment.

  • mpvueThe vue. Runtime core method is retained and inherited seamlesslyVue.jsBasic ability of
  • mpvue-template-compilerProvides the ability to convert vUE’s template syntax to the WXML syntax of applets
  • Modified the construction configuration of VUE to build code formats that conform to the structure of applets: JSON/WXML/WXSS/JS files

benefits

Using MPVue to develop applets, you will gain the following capabilities over the native applets technical architecture:

  • Thorough componentized development capability: improved code reuse [a big benefit is that components are much easier to build]
  • The completeVue.jsDevelopment experience (easier for developers who are already familiar with vue.js)
  • convenientVuexData management solution: Easy to build complex applications (this is similar to the native globalData, I think globalData or setStorage() might be better)
  • quickwebpackBuild mechanism: custom build strategy, hotReload during development
  • Support the use of NPM external dependencies (there are many plug-ins do not have small program version, using NPM dependencies is relatively convenient, but note that it may not be very good support)
  • useVue.jsCommand line tool vue-CLI quick initialization project
  • H5 code conversion ability to compile into small program object code
  • You can use CSS extension languages such as SASS and LESS to improve style writing efficiency

The life cycle

1. Native applets life cycle

App()

onLaunch Function Life cycle function – Listens for applets initialization When the applets are initialized, onLaunch is triggered (globally only once)
onShow Function Life cycle function – Listens for applet display OnShow is triggered when the applet starts, or when it enters the foreground display from the background
onHide Function Life cycle function – Listens for applets to hide OnHide is triggered when the applet goes from the foreground to the background
onError Function Error listener function OnError is raised with an error message when a script error occurs in the applet or when an API call fails
onPageNotFound Function There are no listener functions on the page The applet calls back the function with the page information when the page to open does not exist, as described below
other Any Developers can add any function or data to the Object argument usingthisYou can visit

The global getApp() function can be used to get the applet instance.

// other.js
var app= getApp()
console.log(app.globalData) // I am global dataCopy the code

The Page() function is used to register a Page. Accepts an object parameter that specifies the page’s initial data, lifecycle functions, event handlers, and so on.

Object Parameter Description:

attribute type describe
data Object Initial data for the page
onLoad Function Life cycle function – listens for page loads
onReady Function Life cycle function – Listens for the page to complete its first rendering
onShow Function Life cycle function – Listens for page display
onHide Function Life cycle function – Listens for page hiding
onUnload Function Life cycle function – Listens for page unload
onPullDownRefresh Function Page-specific event handlers – listen for user pull actions
onReachBottom Function A handler for a pull-down event on the page
onShareAppMessage Function The user clicks in the upper right corner to forward
onPageScroll Function Handlers for events triggered by page scrolling
onTabItemTap Function Triggered when you click TAB when the current TAB page is displayed
other Any Developers can add any function or data to the object argument to be used in functions on the pagethisYou can visit



3. MpVue life cycle

Vue Mounted life cycle is triggered after onReady

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed

In addition to Vue’s own life cycle, MPVue is also compatible with applets’ life cycle hooks, which originate from the Page of wechat applets. It is not recommended to use applets’ life cycle hooks except in special cases.

Note:

  1. Do not use arrow functions on option properties or callbacks, such as created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Since the arrow function is bound to the parent context, this will not be an instance of Vue as you would expect, and this.a or this.myMethod will also be undefined.

  2. Query parameters of the page of wechat applets are obtained through onLoad, and mpvue has optimized this.$root.$mp.query to obtain the corresponding parameter data directly, and its call needs to be used after the onLoad life cycle is triggered, such as onShow