From one hand to see the official documents to luk over 6 small programs, I filled a lot of holes, but also in the wechat community to witness the small program version again and again
- Share some common tips for previous notes
- Limited personal ability, solve small problems, welcome to discuss correction
It’s all little tricks, no more nonsense, code!
Change the size of the applet native component
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 the applet picker component does not take effect
Picker found in the process of using the official document to write, prompt list rendering as [Object Object], first look at the document:
According to the official document, the problem is in the range – the type of key, because in the {{}} is used in the corresponding data, also leads to the incoming component is not a string value, the correct method of use:
Enclose a single quote for range-key, or call without {{}}
Small program to modify a single page background color
Set the page background color of small programs, initially set up a global background color, in the app. The set in the json object of widows
The first thing I did on the page was use a separate JSON file,
Page background is still gray:
To solve this problem, set a page class in the corresponding WXSS file:
Applets route parameters, pass object parameters
Generally, the parameter id is bound to {{item.id}}, and the event. CurrentTarget is used in click events
But when you do want to pass an object, especially a parent-child object, you can convert the object to a JSON string before transferring it
However, due to the limited length of the URL, the object is too long. As a result, it is found that the concatenation is incomplete after the URL, which leads to the failure of parsing. Therefore, when routing the parameter object, pay attention to that the parameter object cannot be too long.
Receiving mode:
The applet separately sets the specific property values of the objects in data
This is a problem that beginners and veterans can encounter, because the applet must use the this.setData() method to respond to all data, so now suppose I have data like this:
What do I do if I just want to assign a value to the address property of addressData? Maybe you will:
No, No, you don’t have to do this, you just have to:
That’s it. If you haven’t used it, you’ll be excited. Don’t worry. Suppose my data now looks like this:
Now we just want to change the click value of the selected object in the discountList array to 1.
No, No, you’ll find it won’t work. Here’s a simple solution:
But! Having to define variables every time looks like a rush! So keep it simple! Simple!
Remove reshuffle emoticons from nickname data when encrypting applets
Have you ever met, you want to each user’s wechat nickname line interface sent to the background, but he randomly reported an error…… My god, because every time the interface is encrypted by MD5, it needs to encrypt the acquired user nickname and send it to the background, and then it takes it and directly throws it into the background for encryption, until it is tested by the wechat of the background staff, and the Chinese signature test fails. I have adjusted the signature algorithm of The Chinese signature test a few weeks ago, and then I find…
There are three fart in his wechat nickname…
What the hell is that?
You open your input method emoji and there are all kinds of emojis, and one of them is fart… So I thought of the method, remove the special symbol first, replace it with the specified symbol, and then throw in the encryption, the code:
As for why not remove the special emoticons? At first, my first reaction was to remove the emoticons. Later, I thought that if there are still people who only use special emoticons as nicknames… That is an empty string, when the time to take out the display is empty, not a good visual.
The applet class uses ternary expressions
The code is extremely simple, and vUE common
Remove the scroll bar of the widget swiper component
Swiper widget comes with its own swiper component when scrolling will use the scroll bar, sometimes in order to clean the page, so…… Kill it!
A small program jumps to an absolute path
I don’t remember why I used it, but eventually I figured out that path concatenation starts with ‘/’, which you always use
Applet multiline text overflow display ellipsis
This problem, in fact, is not a big problem, but it has been solved for a while, mainly for two reasons:
- Consider starting with a single line beyond the ellipsis:
This is the way of single-line text. At first, I wanted to add a fixed height, but later I found the pixel problem of the device. Some devices would cover half of the line, and SUDDENLY I thought it was wrong.
- I was misled by the device pixel problem and tried to find out whether the line height in different devices changed. It was too troublesome to use pseudo class in the multi-line comment text I found later, so I found a style:
This CSS only works on WebKit and mobile, so it’s perfect for small applications, but remember not to set a fixed height!
Small program page set page height 100%
Put the code:
The key code is that the parent element sets position: fixed; height: 100%; width: 100%; Note that fixed is no longer used for child elements, but absolute based on the parent element
Applet click the event to prevent bubbling
When I click on the View, it will jump to the specified page. When I click on the image in the View, it will jump to the specified page twice. The first reaction is the new recognition of the first front-end project done that year, and the event bubbles.
Solutions:
Events in applets are divided into bubbling events and non-bubbling events:
Bubble event: When an event on a component is fired, the event is passed to the parent node. Non-bubbling event: When an event on a component is fired, the event is not passed to the parent node.
There was a single line that said:
The bind event binding does not prevent bubbling events from bubbling up, and the catch event binding prevents bubbling events from bubbling up.
The applets map component does not display coordinates, and the Bing map logo appears
Map Map component uses:
In the process of using map, there was a problem. I called the interface in the onload method to assign values to LNG and LAT in data, and then FOUND that the map actually showed an empty map with no coordinates, and the bing map logo appeared below. I was immediately confused, did the map component use the coordinates of Tencent map? Is it the bing map coordinates? 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 setData interface. As a result, the map is rendered with virtually empty longitude and latitude values, and the map is rendered only once.
The final rescue is to use wX :if
Initialize mapOn to false, assign LNG and LAT to true, render map!
Applet button click CSS effect
The button component of the applet has the effect of clicking, but once you define the class you find it is just a square, click it is still there, there is no visual click… And often, most of the time, we’re going to have to define our own button styles so we’re going to write our own generic little program for what button clicks look like
The last
- Welcome to discuss the correction, welcome to like ah ~
- Just completed blog: http://118.126.111.172/, based on Vue+ egg.js +MySql, welcome to visit ~~
- Github source: github.com/pangxiaolon… Welcome to the stars ~~