With the approval and launch of our small program V1.0.0, there should be an mpVue stomping experience here. Every time had been not approved is a tragedy, 555

Why choosempVue?

  1. supportVueX;
  2. withmpVue-Router-PatchYou can useVue-RouterWriting mode realizes page skipping
  3. Familiar with Vue syntax (in fact, it is also this project, just know more deeply!

Combined use: VueX, MPVUE-Router-Patch, MPvue-wxparse, Flyio

Just. – Start the pit filling tour

1. mpVuewithvueLife cycle differences

MpVue Supports the vUE life cycle and the life cycle of a small program. BeforeMount, Mounted, onShow, and onUnload are commonly used. BeforeMount is already after onLoad, onReady, onShow in the applet’s previous life cycles.

In the beginning, the principle of not mixing mpVue and small program life cycle was to tread a big hole. Such as

pages/A? Id =1 to pages/B to pages/A? id=2

Go back to Pages /A? If id=1, id= pages/A Id =2. At the beginning, I put most of the data in VueX, but when I pulled it out, IT was not that simple.

A number of Issues(#140, #215, #213, #233, #311, #140, #322… In just two weeks, the number of Issues for the same reason has multiplied.

In mpVue, a page is a Vue instance, close the page without destroying it, beforeDestroy and destroyed are useless, and data will not be initialized when opening the same page the second time.

Show is to fill in the hole ah! The final approach is: Page onLoad (every time a new page is opened) resets the component’s data to the initialized data and pushes it into the dataArr. Page onHide stores the current data into the corresponding dataArr element. Pop dataArr with the following code

let dataArr = [] export default { ... , onLoad () { Object.assign(this.$data, this.$options.data()) dataArr.push({}) }, onHide () { dataArr[dataArr.length - 1] = { ... This.$data}}, onUnload () {// If (dataarr.length) {object.assign (this.$data, dataArr[dataArr.length - 1]) } }, ... }Copy the code

Disadvantages: to run during the small program, may need to open the page for many times with this section of processing, slightly tedious, should be able to take out the configuration to use, temporarily did not think of what method, 555

It’s official: Life cycle hooks for applets are not recommended, except in special cases. Inner OS: How can you be confident? Don’t call me)

2. Can’t do anything before hitting the back button

How do I listen for a return button in the upper left corner of an applet that is not on the first page? Officials say that blocking user returns is not currently supported.

When a page onUnload, the page already returns! Different from App logic, as shown below

The product logic needs to take this into account, and you can also use VueX to choose whether to keep data or not

3. Rich text components are limited in functionality

Applet rich text plug-in, will block the default behavior of the tag. Some plug-ins are required to parse, perform simple operations in callbacks such as a tag jump, and use MPvue-wxParse for the time being

There are still some concerns

1. The number of page stacks of applets is limited

As a result, there are multiple page operations to complete the function, it is possible to operate halfway, page stack full! It’s gonna be awkward. It’s a dilemma. If the user login page is pushed in the code, and the result does not respond then… (Should use bullet frame, can refer to MoBike)

Solution: Determine the length of the page stack before entering the function process and prompt the user to operate manually, which is of course not very friendly; Or pull out the function to make another small program, small program jump between the basic no sense, can also. (Used a small family program, only to find out when you quit using 3, terrible.) However, when the data analysis, will not be a little more difficult.

harvest

1. ToVueXThe use of

There are four main concepts, state, getters, Commit, and Action, which personally feel like a simple database. With asynchronous, synchronous operations, and a definable namespace, page data sharing is much simpler. Using applets syntax, it looks like various values are required.

2. async await、 Promise

Many applets are callback apis, these two syntax is king ah

More next time.