Applet experience
inspiration
Small program development in full force, I applied for a small program account for a period of time, but has not done anything, suffering from no good idea, do not know what to do, the basic thought of all people do; How to do? !
After an alumni party gave me new ideas, because we talked about a question, how is a city of the alumni together, after you come back I was thinking about small program, and now everyone has basic WeChat, then use all the most commonly used way to find alumni, WeChat small programs use namely go, don’t need to download, and reach a very wide, very suitable for alumni to aggregate; Now that you have an idea, start acting on it
The prototype design
When the inspiration comes, we start to design the basic prototype. After the initial function of obtaining the user location, users can see the distribution of alumni of their school after they choose their own university, and then they can share their alumni distribution map; The original prototype is very rough, not beautified processing, but the online version has been simple beautification, here using the prototype tool – ink knife (this is not advertising, purely my own love, ha ha! Because every time I make a prototype, I need to achieve the effect I want as soon as possible, so I feel that the ink knife is very easy to use). The prototype here is different from the online version, and the reasons will be mentioned later;
Technology selection
Front end: small program to provide their own view layer description language, but like to torment I am not willing to use, although learning quickly, but after learning can only be used in small program development, which makes me very unhappy (don’t ridicule 😂); Since no native, so mpvue came into my eyes, just have the time to do the vue program, this just headphones, not only can review the knowledge of the vue, but also can use vue for small procedures, can kill two birds with one stone (although mpvue there are a lot of pit, but also could not prevent I use heart);
Server: Front-end development selection is completed, the next to the server selection, Java as a service is obviously overweight, as can use JS write server node is of course my first choice of target; In order to let oneself again review mysql curD, of course, select mysql as a database to store data;
Plug-in: I used echarts a lot in my work, so my first thought was to use it. At first, I wasn’t sure if there was an appropriate version, but WHEN I saw the comment section of the article “Using Echarts applet components on MPvue,” I was very excited (does the author want to hit me? Echarts-for-weixin was recommended, but I went to the comments section and found mpvue-echarts😂), so here I’m using the echarts mini mpvue version, thanks to contributor F-Loat
Ok! Technology selection completed
The project build
Now that the prototype and technology have been selected, project preparation begins;
Front-end directory structure
Since MPvUE has helped us build the basic directory structure, so there is no need for too much modification, as long as the pages needed are added according to the rules;
Server directory structure
The back-end service is divided into global configuration, router, control, and SQL related configuration. Because HTTPS protocol is required before going online, an HTTPS configuration is added here, which will be configured in Nginx after going online. I won’t go into too much detail here; You can see here that I’m using PM2, which is a node process management tool that can simplify many of the tedious tasks of managing node applications, such as performance monitoring, automatic restarts, load balancing, etc., and it’s very simple to use. Here attach the use of pm2 tutorial blog.csdn.net/sunscheung/…
Data preparation
1. Since this mini program needs all provinces and regions in China, it needs to establish the relationship between provinces and regions, and it needs to be easy to save. The provinces and regions here can be easily found on the Internet, and the mini program also provides ready-made components for urban area selection;
2. Since I am an alumnus, I need to collate and aggregate the information of all universities. At the beginning, I only found the data of some universities, and the data is not so complete, so it is difficult to ensure the integrity of the data; Later, I found the latest university information through the website of the Ministry of Education, PRC.
(As of May 31, 2017, there are 2,914 institutions of higher learning in China, including 2,631 regular institutions of higher learning (including 265 independent colleges) and 283 adult institutions of higher learning.) Later, through other channels, we found 34 institutions in Hong Kong, Taiwan and Macao, so a total of 2,941.
The data is found, but the data cleaning work is the most tedious, through screening and cleaning after sorting out the following form, and then according to this form into the database;
Since I have shared this article, then I will run towards the principle of resource sharing, if there is a need for these collated institutions of data, you can leave a comment below, I will send the data to your email;
The function point
1. After the user opens the small program, the user can obtain the latitude and longitude information, and return the user’s city according to the latitude and longitude information;
2, users determine the city, search colleges, search departments support fuzzy search function;
3. After the selection of universities, jump to the distribution of alumni of this university and display the top5 cities;
4. Share the distribution of alumni;
Mining pit point
1. Since online small programs are not allowed to call interfaces other than authorized domain names, it is necessary to implement the invocation of Tencent location service API interface on the server side to return user location information;
<button open-type=”getUserInfo”></button> </button> To guide users to take the initiative to authorize operations. Therefore, it is not so easy to obtain the basic information of the user, so the user needs to be referred to the user for authorization in the next operation; (This is just to get the user’s nickname and profile picture information, no private information)
3. There is a small problem with the mpvue-echarts, so when a page has two instances, my map cannot click to see the number of people in the current city.
Deprecated functions
1. In the test phase of small scope, I found that users rarely wait for the location to complete on the first screen, but directly proceed to the next step, which resulted in the failure to store the user’s location information; So later, I directly abandoned the first screen, and directly processed the positioning operation of users on the server and saved it. Users only need to fill in their own colleges and universities to enter the page to view the distribution. This also simplifies the user’s steps, but also to solve the user location can not save the awkward situation
Online version
1, because there is not a large area of users, so the generated chart is not so good (hope the friends of the Denver can support, ha ha! I’ll share the source code later); I only made part of the fake data for reference, please do not feel sorry!
Share the page
subsequent
In the next article I’ll share the source code for your reference, and I encourage you to make suggestions as well;
experience
You can also search in the small program search bar – “alumni footprint”, your use will bring me a great honor, looking forward to your arrival, thank you
