In the previous chapter , We have learned about the three basic features of components and the basic usage of components . In the actual small program development , We should design the function page of each small program with the thinking of component , Make reasonable component split , Keep every part simple 、 Well organized 、 Attend to each one's own duties , This makes the code easier to understand and maintain , Indirectly, it also improves the robustness of the code , Reduced presence Bug The risk of , Even if Bug, It will also be easier to locate and debug .
 

because mpvue It's using Vue Infrastructure of the framework , So most of the functions are related to Vue coincident . however ,mpvue After all, our code will be translated into the code under the native framework of the applet , Due to some functional limitations of the applet framework itself , Some functions cannot be translated , That is to say, there are some standard Vue Function in mpvue It can't be used or has special restrictions .

Today we will list , In the use of mpvue The points that need to be paid special attention to when you are in the hospital .

1. In the template , Dynamic insertion HTML Of v-html Command not available

It's easy to understand , The applet's interface is not browser based BOM/DOM Of , So you can't insert it into the interface template dynamically HTML Segment to display .

Digression , If there is an insert in the applet html What to do with the requirements of fragments ? It can be used <rich-text> Component or wxParse(https://github.com/icindy/wxParse) To achieve .

2. In the template , Double bracket syntax for data binding {{}} There are many limitations to the expression function in

stay Vue In the double bracket syntax within the template itself , We can deal with binding variables in a rich way , such as :

  • You can call methods Next function , for example :
<template>
<div>{{ formatMessage(msg) }}</div>
</template> <script>
export default {
data() {
return {
msg: "Hello,World"
}
},
methods: {
formatMessage(str) {
return str.trim().split(',').join('#')
}
}
}
</script>
  • If the variable is an object , You can also call the member method of an object
<div>{{ msg.trim().split(',').join('#') }}</div>
  • You can use filters to process variables , The most useful scenario is to format data
<div>{{ msg | format }}</div>

The above features are easy to use , stay mpvue in , Remember, they are all useless !!!

We can only use some simple operator operations in double brackets (+ - * % ?: ! == === > < [] .).

But we have to find some alternative solutions , Let's consider using Compute properties (computed) To do it .

3. In the template , Except for event monitoring , You can't call anything else methods Next function

stay Vue in , Call in template methods Partially defined functions are very common , For example, the following code shows , stay v-if Call function in instruction getErrorNum()

<div v-if="getErrorNum() > 0 && code == 10001" class="error">{{ errorMsg }}</div>

But , stay mpvue I just can't use it ! Because in the applet native template wxml This function call is not supported in , Lead to mpvue There is no good way to translate the past ( Although the app has wxs, But it feels like the translation of the past mpvue The work to be done will be more complicated ).

therefore , The available alternative might be to compute properties .

4. In the template , Direct binding of an object to style or class Attribute

stay Vue We can do it for HTML Elemental class or style Bind an object , And determine whether to add the corresponding attribute name to... According to the attribute value in the object HTML The style name of the element . Examples are as follows :

<template>
<div :class="classObject"></div>
</template> <script>
export default {
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
}
</script>

The code above is generated after running HTML It will be :

<div class="active"></div>

But in mpvue The following feature doesn't work either , Officially, it's due to some performance related reasons . If you want to dynamically change the components of class How to write ? The official way is this :

<div :class="{ active: classObject.active, 'text-danger': classObject['text-danger']}"></div>

In fact, it has not changed much , A little bit more typing , Equivalent to that in the template class Just define an object in it . But according to the documentation, this will improve performance . ok , For the sake of performance , The trouble is tolerable . But it said : Performance considerations , Don't rely too much on it ...... It seems that even so , There are still performance problems .

Looks like the best plan , You still have to use computational properties , Directly generate a string of styles , Bound to the class or style On :

<template>
<div :class="classStr"></div>
</template> <script>
export default {
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
},
computed: {
classStr() {
let arr = []
for (let p in this.classObject) {
if (this.classObject[p]) {
arr.push(p)
}
}
return arr.join(' ')
}
}
}
</script>

5. In the template , Nesting uses v-for when , Index must be specified index

Usually , We are Vue Template nested loop rendering array when , It's usually like this :

<template>
<ul v-for="category in categories">
<li v-for="product in category.products">{{product.name}}</li>
</ul>
</template>

But in mpvue Using this nested structure in v-for when , Must be on each floor v-for The index is given on , And the index needs to be given a different name :

<template>
<ul v-for="(category, index) in categories">
<li v-for="(product, productIndex) in category.products">{{product.name}}</li>
</ul>
</template>

6. Attention points in event handling

stay mpvue in , Generally, it can be used Web Of DOM Event name to bind events ,mpvue Will Web The event name is mapped to the corresponding applet event name , The corresponding list is as follows :

// On the left WEB event : On the right is the corresponding applet event 
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}

Except for the ones above ,Web Form components <input> and <textarea> Of change The event will be turned into blur event .

then , image keydownkeypress There are no keyboard events like that , Because the applet doesn't have a keyboard , So there's no need for these events .

also ,Vue When binding events inside , You can specify event modifiers , But in mpvue in , The authorities have given some attention information :

  • .stop The use of will prevent bubbling , But it also binds a non bubbling event , Will result in catchEventName invalid !【 This is a personal test , I feel like it's fixed in the latest version or something , There is no such problem in the document 】

  • .prevent You can take out , Because there are no default events in the applet , such as submit It doesn't jump to the page 【 That is, there is no need for support 】

  • .capture Support 1.0.9 【 That is to say mpvue 1.0.9 And later versions support 】

  • .self There is no sign to judge 【 That is to say, it doesn't support 】

  • .once You can't do , Because the applet doesn't removeEventListener, Although it can be directly in handleProxy In dealing with , But it's not elegant , Against the original intention , Not for the moment 【 That is to say, it doesn't support 】

So , All in all, when you have an event related problem , Please come back and check the document , See if you've fallen into a hole .

7. For forms , Please use the native form components of the applet directly

In a word , Form components are numerous and complex , Framework possible Hold Unable to live . So in the actual development , It is recommended to use the form component tag of the applet directly to write , Instead of using Web Form component tag to write . Yes, of course , stay mpvue The component tag of the applet is used in , Data binding is still fully functional . Give me an example :

<template>
<div>
<picker @change="handlePickerChange" :value="selectedIndex" :range="messages">
<view class="picker"> Current news :{{ messages[selectedIndex] }}</view>
</picker>
</div>
</template> <script>
export default {
data () {
return {
selectedIndex: ,
messages: ['Hello', 'World', 'Haha']
}
},
methods: {
handlePickerChange (e) {
console.log(e)
}
}
}
</script>

Other matters needing attention

in addition , stay Vue Development Web When applied , Usually use vue-router For page routing . But in mpvue Small program development , Not in this way , Please use <a> Tags and applets native API wx.navigateTo To do the routing function .

And then there's the request for back-end data , We usually Web Used in development axios etc. ajax Library to implement , But it can't be used in small program development , Please also use the native applet API wx.request Wait .

Use mpvue Development of small programs tutorial ( 6、 ... and )

 
 

Use mpvue Development of small programs tutorial ( 5、 ... and ) More articles about

  1. Use mpvue Development of small programs tutorial ( Four )

    In the previous chapter , We will vue-cli In the code skeleton generated by the command line tool src I cleaned up the catalog , And then from scratch to configure and write a small program page that can run , It's really in use mpvue The first step in developing a small program . Today we're going to go further ...

  2. Use mpvue Development of small programs tutorial ( One )

    Some time ago , Meituan open source mpvue This project , So we have another framework option for developing small programs . because mpvue The framework is completely based on Vue Framework of the ( Rewrite it runtime and compiler), So it's height and Vue One ...

  3. Use mpvue Development of small programs tutorial ( Two )

    In the last article , We introduced the use of mpvue Development of small programs need to build some development environment , And created the first mpvue Applet code skeleton and run it . In this paper , Let's get familiar with mpvue The main directory and file structure of the project . stay V ...

  4. Use mpvue Development of small programs tutorial ( 3、 ... and )

    In the last article , We got familiar with it vue-cli Generated mpvue The basic structure of engineering code skeleton , Get a general idea of where to put the code of each part . From the beginning of this article, we will start to deal with the real coding part , Learn to use Vue To write a small program ...

  5. Use mpvue Development of small programs tutorial ( 6、 ... and )

    In the previous chapter , We've listed in Vue Can be used in, but in mpvue Features that cannot be used or require special attention in , Before the actual development, it is necessary to understand , You can avoid wasting time looking for mistakes . If you've ever used a native applet framework , You must have experienced or thought about how to ...

  6. Use mpvue Development of small programs tutorial

    from vue To mpvue Then to wechat app , I feel dizzy after these days . There are many differences among the three functions , The project is coming to an end , I stepped on a lot of pits , Now I'll give you some summative experience : 1. In the template , Dynamic insertion HTML Of v-h ...

  7. Use mpvue Developing small programs

    Preface : Recently received small program development requirements , Because I haven't developed a small program before , I'm still a little excited . First flower 15 Minutes to see the official documents of the small program , Re flower 10 I'll see it every minute mpvue Official documents , Then take the prototype and UI Just open the picture . I stepped into a lot of holes , Write a blog ...

  8. Learning notes :mpvue Developing small programs —— introduction

    Next, you may want to develop a small program , Colleagues recommend mpvue, So I'll familiarize myself with . Official website address :http://mpvue.com/ 1. Quick start  http://mpvue.com/mpvue/quickstart/ ...

  9. mpvue Development of small program interface data unified management

    mpvue What to do in the project API Separated from data, unified management Request data interface in small program wx:request, Because the project is relatively large , It's better to wx:request encapsulated , Unified use management utils.js Configure the development environment and online environment ...

Random recommendation

  1. for Calculate the game clearance score in a circle

    A game 1 To 20 Pass is the result, is the result of their own level number ,21-30 Every level 10 branch ,31-40 Every level 20 branch ,41-49 Every level 30 branch ,50 Turn off 100 branch . Enter a pass number to get the result The code is as follows : <!DOCTYPE html PUB ...

  2. android.intent.action.MAIN And android.intent.category.LAUNCHER Verification of understanding

    Case one : Yes MAIN, nothing LAUNCHER, There is no icon in the program list reason :android.intent.category.LAUNCHER Decide whether the application is shown in the program list   The second case : nothing MAIN, Yes LAU ...

  3. Socket Programming examples ( Two )

    Take advantage of this leisure time in the evening , Wrote a Socket A small example of communication , This instance includes server and client . Its basic workflow is : When the server starts the service , The client connects , If the connection is successful , Then the user can input the message to be sent in the send message box , then ...

  4. Linux How to create a process

    About preparation knowledge : Each process has the following properties : 1   address space Each process has its own process address space , The format is like this : Stack (Stack) In frames , When a program calls a function ( Suppose the function is called fun01) when ,stack It's going down ...

  5. Front to back ThinkPHP Develop the whole station (2)

    This time I used ThinkPHP The version is :3.2.3 edition , And a pop-up layer plug-in will be used , It's called  layer, The official website address is :http://layer.layui.com/. I don't say much nonsense , Enter the code link . 1. General method writing ...

  6. dataset The use of image delay loading and implementation

    First , Let's talk about javascript in dataset attribute ..html5 Can be used in data- Prefix set the custom properties we need , To store some data . Here's the element application data An example of attributes :~~~~~~~~ ...

  7. Multiple tab tab

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Answer key :[GXOI/GZOI2019] With or with

    At first, there was no idea I saw sample one in Luogu , A whim , I decided to do it first. The elements are just 0/1 The situation of Find subtasks 1 It's all. 1 Submatrix The subtasks 2 Is the total number of submatrix minus the total number 0 Submatrix Discover all 0/1 Matrix can be constructed monotone stack solution . specific working means : Find the prefix sum for each ...

  9. NOIP2016 Problem solving report

    Listen to these questions every day , But in fact, I haven't read all the questions . Do it today . After understanding each question, I cut it in about a minute .D2T3 Think about it \(O(n\log n)\) How to stack , At least 90 Divide up . D1T1 Simulation is enough . D1T2 Each path is broken down into ...

  10. take CAGradientLayer Used as a maskView Mask layer for

    take CAGradientLayer Used as a maskView Mask layer for explain CAGradientLayer Can be used as alpha Mask , for maskView Use , These two kinds of things are very partial , however , Partial door doesn't mean function doesn't ...