This is the first day of my participation in the August Challenge. For details, see:August is more challenging

Talk about some of the pitfalls I encountered in small program development

Recently, I was writing a small program to recruit new students. It was easy when I was learning it, but in the actual development, I encountered some weird holes and spent a lot of time there, so I wrote it down. This article is mainly about the problems I encountered in the process of completing this small program, and will continue to update until I complete this small program.

1. Login authorization

When the user enters the applet, if we want to get the user’s profile picture and nickname, we need to authorize the user. In the previous micro channel small program development, is can use getUserInfo to get, but now to get user information through getUserProfile, see the small program official announcement.

And you can see that now if we usegetUserInfoGet the user’s profile picture and nickname, which is the default anonymous data without the profile picture and nickname of the user who entered the applet. The effect is as follows:

So if you want to get the real user information, you need to get it through getUserProfile, and paste the development document of getUserProfile here. It is important to note that dec is a parameter that must be passed. In addition, this interface can be called only after the page produces a click event (for example, in the callback of BindTap on button) when obtaining user information. Each request will pop up an authorization window, and userInfo will be returned only after the user agrees.

But if you don’t want to get the user’s profile picture and nickname without authorization, you can get it directly with the open-data tag.

<open-data type="userNickName"></open-data>Copy the code

2. Legal domain name

During development, we often turn on “do not verify legitimate domain names” to facilitate development. This is why the results are different in developer tools and preview. If you want the same, you should cancel “do not verify legitimate domain names,….” in details. . If it’s not the same, another problem is that you might have the wrong HHH interface. Try the following real machine debugging to see if the interface is wrong. But in daily development or check the “not verify legitimate domain name,…” Open.

3. Confirm the type

So, when we’re setting an animation or setting some other property, it’s really important to be careful whether the property is of type number or of type string, the two can get mixed up, so let’s make it toString or parseInt after we determine the type. For example, in the following example, I did not add parseInt field at first, preview on the computer is fine, but when I debug it on the real machine it does not move. I just found this left: NaN RPX. So be sure to identify the type.

4. Adapt to different mobile phones

In the animation below, although I used RPX to set the height, it still didn’t fit on the iPad. I’ve been trying for a while and I can’t get it to fit between the two devices. So I ended up using different styles for the phone and iPad to match. Get the model through wx.getSystemInfoSync() and modify the style with regular match.

5. cookie

In small program development, we need to get the cookie from the back end for request verification, but different from the browser, wechat will not automatically help us save the cookie, we need to maintain the session to save the cookie, in the request header with cookie. I’m using local storage here.

wx.setStorageSync('cookie', e.cookies[0]);
Copy the code

6. Hierarchy issues

Small program, in the real machine debugging time, foundtextareaThe labels are too high in level, causing text to float on top and affect the layout. We can do it this way.cover-view