The company wants to develop a small program, for the user is divided into three roles, so to their own handwritten tabbar(article editing, will be put over the link) because it is a long time to write small programs, chose to write with Vue similar to MPVue, more or less also encountered some problems, now summarize.

Development environment: System: Mac, version 10.14.6; WeChat Developer Tools: Nightly v1.02.1908222;

1. When V-for encounters the template tag

Vue: Normally when we traverse data, we might write the key attribute to the wrapped DOM

<template v-for="item in 10"> <span :key="item"> number: {{item}}</span> </template>

MpVue: The small program will ask for the key attribute to be written directly to the traversal tag. If we continue to write it like this, the developer tool will tell us:

As a result, the template tag is useless because a key written to template will compile an error and we will have to replace the template tag with the actual tag

Correct way to write in MPVUE:

 <div v-for="item in 10" :key="item">

2. Class /style is not supported on component tags

Such as:

<! FatherClass ="fatherClass" style="color: red;" ></card>

The terminal will directly report an error:

The correct way to write MPVue is to pass class/style as an attribute to a child component

3. Binding an object to a style or class property is not supported

Vue: When we dynamically bind a DOM class, we might write something like this:

<p :class="setClass"> </p> data() {return {setClass: {classOne:true, classTwo:false}}}} // Final render: <p class="classOne"> I am text </p>

MPVUE does not support this type of writing. MPVUE does not support this type of writing.

< p: class = "{classOne: setClass. ClassOne}" > I am writing < / p > data () {return {setClass: {classOne: true, classTwo: false}}}

4. Use the small program component Scroll – View to return to the top question

When we scroll to a certain extent and we want to go back to the top, we should set the property ‘setScroll’ to ‘or’ 0 ‘, but when mpvue is used, setting it to ‘0’ will not work. It must be set twice, for example:

< sc_wapper class="sc_wapper" :scroll top="setScroll"></scroll view> // return top () {this.setScroll = This. setScroll = "" // Return to the top effect implementation},

5. Use vantUi mpvue

Vantui official website: vant, I use it like this, directly download his static resources and put them in the static directory of the local mpVue project, the structure is as follows:

Create a main.json file in the corresponding directory,

In main.json say:

{" navigationBarTitleText ":" home page ", "usingComponents" : {" van - button ":"/static/vant/button/index "}}

Then the page can be used normally, use found a vant pit, is to set the button disabled effect is invalid, but the style has changed, in fact, still can be clicked, for example:

<van-button disabled="disabled" type="primary" @click="changeSome" </van-button Function () {//button set the disabled, but the method can still get in console.log(123)}

The solution that came to mind was to add judgment to the method, to decide whether or not to perform a web search and the question didn’t get an answer, did you see that

If there are inadequacies, please add and correct?