Shulou(Shulou.com)06/03 Report--

It's all little tricks, don't talk too much nonsense, go to the code!

Change the size of Mini Program native components

Wechat officially provides some basic components, but some components do not provide attributes similar to size. We only need a css to solve the problem. Take radio as an example:

The range-key of Mini Program picker component is not valid

When using Mini Program picker, it is found that it has been written according to the official document, and the prompt list is rendered as "Object Object". Check the document first:

The usage scenario is that if the incoming component is an array of objects, you need to set range-key to set which value in the array is displayed for the list

According to the official document, the problem lies in the type of range-key, because the corresponding data is used in {{}}, which results in that the passed component is not a string value. The correct way to use it is:

Wrap range-key in single quotation marks, or use nickname directly instead of {{}}

Mini Program modifies the background color of a single page

Set the page background color of Mini Program. At first, a global background color is set, which is set in the widows object of app.json.

Later, the first reaction on the page was to use a separate json file to set up

Decisively found that there is no use of eggs, the background of the page is still gray:

As a solution, set a page class in the corresponding wxss file:

Mini Program route to pass parameters, pass object parameters

Mini Program passes parameters by stitching after the url. Usually, you only need to bind the passed parameter id, bind the id to {{item.id}}, and use event.currentTarget to accept it in the click event.

But when you do want to pass a parameter as an object, especially a parent-child object, you can convert the object to a json string before transfer

"/ >

"/ >

However, because the length of the url is limited and the object is too long, it is found that the splicing is incomplete after the URL, which can not be parsed later, so it should be noted that the object passing parameters cannot be too long.

Receiving method:

Mini Program sets the specific property values of objects in data separately.

This is a problem that both beginners and veterans may encounter, because to respond to all the data of Mini Program, you must use the this.setData () method, so now suppose I have such a data:

What should I do if I just want to assign a value to the address property of addressData? Maybe you'll go like this:

No,No, you don't need to do this, you just need to:

It's as simple as that. If you haven't used it, you must be very excited. Don't worry, let's escalate the problem! Suppose my current data looks like this:

What if we just want to change the click value of the selected object in the discountList array to 1?

No,No, you'll find that this won't work. I'll teach you a simple way:

But! It looks irritable to define variables every time! So it has to be simpler! It's easier!

Remove reshuffle expressions (such as emoji) from nickname data when encrypting Mini Program API.

Have you ever met that you have to send the Wechat nickname of each user to the backend, but he randomly reported it wrong. Oh, my God, because each interface has to be encrypted by MD5, you need to encrypt and send the acquired user nicknames to the background, and start to unconsciously take it and directly throw it into the encryption, until the Wechat test of the backstage staff failed. I adjusted the signature algorithm of Chinese signature verification a few weeks ago, and later found that.

He has three "farts" in his Wechat nickname.

What exactly is the fart.

If you open the emoji of your input method, you will find that there are all kinds of expressions, including a fart. So the way to think of it is to remove the special symbol, replace it with the specified symbol, and then throw it into the encryption and put on the code:

As for why it is not to remove special expressions, at first the first reaction is to remove them, and then I think that in case someone only uses special expressions as nicknames. What is stored is an empty string, which will be taken out and displayed as empty, and the vision will not look good.

Using ternary expressions in Mini Program class

The code is extremely simple and common to vue

Remove the scroll bar from the Mini Program swiper component

Mini Program comes with a swiper component that appears with a scroll bar when scrolling, sometimes in order to keep the page clean, so... Kill it!

Absolute path of Mini Program Jump Writing

I forgot why I used it, but I finally figured out that the path splicing starts with'/', and you'll always use it.

Mini Program multi-line text overflow shows ellipsis

In fact, this problem is not a big problem, but it has been solved for a while for two main reasons:

At first, consider using a single line that exceeds the ellipsis:

This is the way of single-line text. At first, I wanted to increase the fixed height, but later I found that there was a problem with the pixels of the device, and some devices would cover half of the line. Suddenly I felt that something was wrong and I should not do so.

two。 Misled by the device pixel problem, to find out if the line height in different devices has changed, in the multi-line comment text queried later, it is too troublesome to use pseudo classes, so a style is found:

This css is only suitable for webkit and mobile, so it works perfectly on Mini Program, but remember that you can't set a fixed height!

Mini Program Page setup Page height 100%

Put the code:

The key code is that the parent element sets position: fixed;height: 100% width: 100%; note that the child elements in it no longer use fixed, but use absolute to locate based on the parent element

Mini Program click event prevents bubbling processing.

At this time, there will be a situation, when I click view, he will jump to the designated page. When I click image in view, he will jump to the designated page twice. The first reaction is that the first front-end project that year appeared new awareness, event bubbling.

Solution:

In Mini Program, events are divided into bubbling events and non-bubbling events:

Bubbling event: when an event on a component is triggered, the event is passed to the parent node. Non-bubbling event: when an event on a component is triggered, the event is not passed to the parent node.

There is a single line that states:

Bind event binding does not prevent bubbling events from bubbling up, while catch event binding can prevent bubbling events from bubbling up.

The Mini Program map component does not display coordinates, and the logo of the bing map appears

The map Map component uses:

There is a problem in the process of using map. The interface is called in the onload method to assign the lng and lat in data, and then it is found that the map actually shows that the map is empty, there are no coordinates, and there is a sign of the bing map below. I am suddenly confused. Is the map component not using the coordinates of Tencent Map? Are the coordinates of the bing map? You can't be so heartless.

Later, it was found that the component rendering of the map component takes precedence over the asynchronous assignment of the interface setData, resulting in the fact that the values of longitude and latitude are empty during the rendering of map, and the map is rendered only once.

The last way to save is to use wx:if

Initialize mapOn to false, assign mapOn to true after the API assigns lng and lat, and render map!

Click the Mini Program button on the css effect.

Mini Program's own button component has a click effect, but once you customize the class, you find it is a square, click is also so quietly there, there is no visual sense of click. Often in most cases, we have to define the button style ourselves, so we write a set of general Mini Program button click effects.

Finally, it is no longer so rigid.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.