Have you encountered these pitfalls of being cheated by mini programs?

I heard from someone that if you have experience in APP development before, it shouldn’t be difficult to switch to mini program development.

Because you only need to learn how to write in three languages ​​to easily start developing mini programs.

Although what you said makes sense, I do not deny that the logic functions of mini programs are all implemented using JavaScript, but in mini programs, all visual elements and interactions need to be implemented through WXML code, and you cannot directly drag elements to build the interface. Moreover, mini programs are not web pages, but application interfaces. They do not have the div and a tags that are common in the front end of web pages, so you should read the development documentation before developing mini programs.

Let me first briefly introduce a few problems I encountered.

Question 1: After authorized login, the development tool on the computer displays "Ok", but when debugging on the phone, no data request is made and the page does not respond.

Thoughts: At first I thought I had not checked the line "Do not verify secure domain name, TLS version, and HTTPS certificate" in the details. Later I checked it and there was no response. I also thought it was a problem with the system proxy. I used the packet capture tool to check one by one and found that there was no request data, and no request was sent to the background at all.

Solution: You need to turn on debugging on your phone, otherwise you will not be able to see the relevant requests of the Mini Program; the request data on the real machine is only available when debugging is turned on; after all, the Mini Program has not been released yet, and it can only be tested on the phone.

Question 2: Some pages have an effect when requesting data, and some pages run OK on the developer tool and the data is requested; but when debugging on the phone, it is found that the page does not respond after clicking in; the packet capture tool shows that there is no requested data.

Thoughts: I thought at first that my request data was written incorrectly, but after checking them one by one, I found that there was no problem; the key was that there was no error when running it on the computer; so I searched on Baidu for a long time and it said that it was a problem with the mobile phone certificate; I didn’t find out until *** that this was a bug in the applet itself.

Solution: Move the page registered in app.json, that is, the page that cannot request data, as far forward as possible, and do not put it at the bottom.

Question 3: When I create a new page, I set the tool to automatically save, so it automatically adds the newly created files. Every time I press Ctrl+S and refresh, a few more new pages will appear.

Solution: It is better to save manually and be careful when adding.

Question 4: The value of data in some Page({data:{}}) pages can be set through that.setData, but I don’t know how to retrieve it and use it in the corresponding position.

Solution: Thanks to the help of my colleague, I learned that I can define global variables outside the page and correspond to the variables in the data in the page. Each time you assign an initial value or change it, assign the global variable first or make a change, and then assign the updated global variable to the corresponding variable in the data in the page. Or save it locally or remotely, and then get the variable.

My mini program has not been developed yet, and I estimate that there will be many problems in the later stage. I will think about them one by one and then summarize them after the development is completed. I will start with these simple problems tonight. At the beginning, I was not used to the development of mini programs because I could not reference some plug-ins, operate on the DOM, and access the external network. Many things seem to have limitations, but the mini program team is also improving some bugs bit by bit.

I also learned a lot of things that I didn’t know in the development of mini programs, such as .vertical-align: middle to set the vertical center, and display: flex layout, etc.