On January 9, 2017, the WeChat applet arrived as scheduled. According to the circle of friends that Zhang Xiaolong just pushed, January 9th is not a random choice, but a tribute to Apple's release of the iPhone 10 years ago. There has been a wave of "the impact of miniature programs on the APP market" in the circle of friends. Of course, the future of the industry is very important, but as a technician, I pay more attention to the technology itself. Yesterday, I experienced the charm of a WeChat applet and started writing A series of tutorials for WeChat Mini Programs. Without further ado, today we will start the first demo of the WeChat applet, Hello World (you know the programmer).
Since I have just started to contact WeChat applet, there may be many things that I don't understand. If you don't understand something, please refer to WeChat official development documentation Simple Tutorial applet
The general content of this blog
1. Mini Program Experience
Speaking of small programs, how can users find this entry in WeChat? Zhang Xiaolong, who occasionally claims to be a contemporary Jobs, once said that there is no entry for small programs. For an ordinary user, after opening WeChat several times, he could not find the entrance to the WeChat applet. So, how can we use Mini Programs on WeChat? ? ?
According to the five methods given by WeChat official, you can find the applet: offline code scanning , WeChat search , official account association , friend recommendation , and historical records . The blogger himself just clicked on the recommendation link of his friend and found that there is a small program button in the discovery interface of WeChat.
Since the applet cannot be shared on the computer, I will not specifically explain how to expose the entry of the applet. I believe it is also a small case for everyone. Besides, everyone's WeChat version must be the latest version...
Click to enter, enter the following interface
Since I have added some applications before, if you want to add some small programs. There is a search bar, but it doesn't support fuzzy search. For example: you find the applet very interesting, and you want to see if there is an applet that can replace the calendar, you search for "calendar", but you can't find any results. Unless you know the exact full name of a particular applet, it is absolutely impossible to search, at least not today. From this point of view, WeChat does not give Mini Programs an "entrance".
Select a program and click to enter
It is found that it is a simplified version of Jingdong, and the functions seem to be relatively small. Maybe at this point you will say, this is the applet! ! ! ! Seems like that, JUST SO SO! ! ! At least this is the case for now, and the bloggers themselves think so. It seems that there are no various innovative Internet models mentioned in the circle of friends. The biggest function is that we don't need to install various APPs, just search for it in WeChat, open it and use it.
2. Installation of WeChat development tools
A lot of long-winded, it's time for some dry goods. For us developers, to learn a new technology, we must have a tool. Let's introduce the installation of WeChat development tools and the official download address of WeChat development tools .
After downloading, install it directly, so easy. It is not as cumbersome as those development integration tools we have encountered before, no need to configure any environment variables, nothing, one-click installation, everything is OK.
Open the WeChat development tool and scan the code to log in:
Select the local applet project , and then click Add Project
Here we want to fill in the AppID, what is this? ? ? It feels a bit like the AppID that needs to be applied for when integrating a third-party library in Android development. I asked Du Niang, and it turned out to be the case. Get the link to the AppID of the WeChat applet
A brief understanding of the acquisition process:
Roughly, it is necessary to register information in the name of the company, what organizational code is required, and 300 yuan a year, Tencent is still the same as before. . . . . . In this way, for those of us who want to experience the applet, it's a fool. . . . . However, there are still ways. Generally, after successful registration, there is an administrator account. The administrator can distribute multiple development rights to the programmer. After the programmer confirms on the WeChat interface, he can get an APPID, so everything is OK.
However, some may ask, where is the administrator, blogger, aren't you a fool. At this time, I thought of the all-purpose Taobao. I spent a little money to buy an account on Taobao, and it was OK to bind my WeChat account.
In fact, there is no need to worry about anything here. You can develop some demos without appId, but some functions are limited (just when there is no login function, and you cannot scan the QR code to adjust the applet through the mobile phone)
After adding the project , we created our first Demo
3. The directory structure of the applet
A brief introduction to WeChat development tools
1. Toolbar on the left, editing , debugging , compiling , background ...
2. The interface after the applet runs, similar to the Android Studio emulator
3. File directory
4. Code editing on the right The interface of the area
is very simple. Anyone who has done program development will feel that the interface is very simple. I like it and I like it in Chinese.
Let's try the function of the Demo program first, click on the Hello World interface, and find that it jumps to the log interface
Jump to the log interface:
Others are very simple. Here I will focus on the file directory structure of the applet. Click on the folder inside:
An applet consists of an app that describes the overall program and multiple pages that describe their respective pages.
1. Let's first take a look at the app that describes the overall program (three files in the red box at the bottom)
It should be easy to understand for those who have learned JS
- app.js : Control the logic of the entire program, equivalent to the entry of the applet
- app.json : some common settings for the layout page of the program
app.wxss : style sheet, set various properties for controls, width, etc.
2. In the page file pages (the pages folder at the bottom),
it is found that there are two folders index and logs under the pages folder, which corresponds to the jump from the Hello World page to the log page after we clicked the page before.
An applet page is a folder consisting of four files:
It is found that it is the same as the three files at the bottom, and there is an additional file of page.wxml page structure, which we will not introduce here for the time being.
3. Various js methods are stored in utils
for easy calling
Finally, we open the path where the applet is located, and find that the file directory is exactly the same as the displayed file directory, what you see and what you get.
Summary
1. In this section, you can understand the file directory structure of the applet, pages, utils, app.js, app.json, app.wxss,
2. As for the specific function of each file, I will introduce it in the next section.