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
methodsNext 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 keydown、keypress 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
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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/ ...
- 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
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 :~~~~~~~~ ...
- Multiple tab tab
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 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 ...
- 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 ...
- 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 ...