Front-end Learning---mobile vue development Stomp

Objective:

About two months ago in a project, the project is a mobile project, the framework is the more popular Vue. This article is also a summary of the project and previous learning, including some common mobile development considerations, Vue development encountered some problems. The purpose of this article is to avoid these pits in future development and to improve our development efficiency.

First, mobile development-specific issues:

1. Mobile-style compatibility:

In the current mobile development to face a variety of mobile phones, different phone dpi is different, such as the DPI of the Iphone 8 is 2,iphone 8P dpi is 3. To enable the page to be compatible with different phones, the solution is as follows:

1) Set the phone's viewport to a uniform resolution by forcing the device to ignore the true resolution, setting the maximum minimum scale and preventing the user from scaling.

<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, Use-scalable=no "

2) processing 2x and 3x images for different phones: I use stylus to define a method to solve. can be introduced directly where needed.

bg-Image ($url)  background-image URL ($url + "@2x.png")  @media (- Webkit-min-device-pixel-ratio:3), (min-device-pixel-ratio:3) background-image URL ($url + "@3x.png")

2, the mobile side click Delay Problem:

This problem I did not notice before, and even do not know that I have encountered, I am through the forum to see the mobile development will appear 300ms delay, often cause click Delay or even click the failure of the bug. This problem is caused by a double-click scaling issue in the mobile browser. The problem can be solved by:

1) using a plug-in Fastclick solution, the code is also very concise, after the entrance registration, directly using the following code. In fact, you can implement the Fastclick function yourself: custom click to block the default click event bubbling and default behavior.

2) If the compatibility requirements of the project are relatively low, you can add a meta tag.

<meta name= "viewport" content= "Width=device-width" >

3. In iOS, enter the first letter in the English capital:

Using the inputautocapitalize属性对首字母大小写进行设置：

<input type= "text" autocapitalize= "none" class= "box" >

4, a long time to click on the page will be the problem of the Flash back:

In the mobile side of the project debugging, there may be a problem is a long time to hold the flash back, can be resolved by the following code.

element {-webkit-touch-callout:none;}

5. Do not automatically lose focus when there is an input box for other operations:

In this project there is a search interface, the search results in the search for the decline, the input box will not automatically lose focus, the phone keyboard will not be hidden, so you can use the element to manually blur.

6, the mobile side of the sliding will appear white stripes:

You can cssreset the project before you develop it: set the width of the html,body to 100%,overflow:hidden.

Ii. some problems encountered by Vue when using:

This part is not an advanced technical article, but a record of some of the problems encountered.

0, the most important point, but also put on the front: Vue's life cycle is really important! It's important! Important! As you develop with Vue, the larger the project, the more time types you need, the more data, and so on, the more you feel the importance of life cycle. The life cycle is described in detail in Vue's official documentation, which you can read on your own.

1. The file path is too verbose or the relative path is too cumbersome:

By webpack the custom path alias, you can

// Build/webpack.base.js {  resolve: {    extensions: ['. js ', '. Vue ', '. JSON '],    alias: {      ' vue$ ': ' vue/dist/ Vue.esm.js ',      ' @ ': Resolve (' src '),      ' ~ ': Resolve (' src/components ')    }  }}

2. The styles in the assembly affect each other.

By adding the scoped property to the style label in the component, the style of the component does not spill over. Vue's scoped is that implementing a style by adding a unique property identifier to the component does not contaminate the element with the same name as the other component.

3. Vue responds to input text at all times:

People with Vue know that Vue has a very important function is to achieve two-way data binding, which for our development has a very important purpose. But I found a problem in the development of a search component, because the search data is crawled through the line, and when the input box is entered to search for information, the search list is automatically loaded. Each keystroke sends a request, which greatly increases the consumption of the traffic. So I used a data throttling method, set a delay function, each 0.3S to check the input data, rather than synchronous data binding.

4, the use of Vuex:

Vuex for Vue, it is equivalent to redux for react. It is the state management mode of Vue, and the adoption of VUEX is very important in the case of multiple components sharing state.

The flow of data between different components becomes cumbersome and difficult to maintain, especially when the sibling components communicate, because the components become more complex. When a sibling component communicates, a parent component is required first, the child component communicates to the parent component through $dispatch, and then the broadcast event $broadcast by the parent component is passed to the individual subcomponents. The process is tedious and difficult to debug.

In the use of Vuex encountered this problem: the use of Vuex every time the store loaded with new data will cause the card screen phenomenon, after understanding the principle of Vue know this is because in order to get the data to the attempted response change, Each object in the store is added setter and Getter methods to monitor the data (dirty check), but when there is a large amount of data entering the store, doing this for each object consumes a lot of time, thus causing the card screen phenomenon. The way I want to do this is to use the Freeze method to freeze objects, to avoid the Vue manipulating each object, not directly accessing the attributes in the state, but by changing the index to make Vue's getter indirectly accessible.

5. The parent-child element binds the click event simultaneously:

In the development process, we often encounter the parent-child element is bound to an event, when the child element is clicked due to the bubbling mechanism of the event will cause the parent element event triggered. In native JS we can use Event.stoppropagation () to block time bubbling. So how to solve this problem in Vue. We just need to add a. Stop to the click.

These are some of the things that have happened in recent times for mobile development and Vue usage. If there is no place, you can leave a message to me, or send me an email [email protected]. Let's make progress together! ^_^

If the article is useful to you, can you give me a star? Https://github.com/lml19960131/music-ml

Front-end Learning---mobile vue development Stomp