Project demonstration of daily learning check-in system based on WeChat applet
WeChat mini program related technologies
The original intention of launching the WeChat mini program is not only to make it more convenient for users, but also to provide developers with a more convenient and convenient development environment for more efficient development. The design and development of any system requires a complete system framework to ensure the complete operation of the entire system. For WeChat mini programs, in order to make development faster, the framework used by WeChat mini programs is the MINA application framework. The MINA framework is mainly a system responsible for data interaction. Its composition mainly includes the view layer structure used to display the page and the logic layer system responsible for realizing data interaction. Among them, the view layer is responsible for issuing event requests, and the logic layer is responsible for receiving data and processing data. When the logical layer receives the data, the view layer makes corresponding updates based on the data changes in the logical layer. The MINA framework synchronizes the data changes in the logical layer and the view layer.
The framework is also responsible for many interactive operations. Developers only need to input the page methods and functions to be implemented, and the framework can manage the page routing and life cycle of the entire program, allowing the mini program to seamlessly jump to different child pages. Smooth. The view layer in the MINA framework is used to develop the front-end interface of the mini program. The page builds the interface and uses WXML and WXSS languages for development. WXML and WXSS languages are both description languages provided by the framework itself, and WXML is used to describe the page structure. WXSS is used to control the display style of the page and build the basic view structure of the page. The AppService logical layer is the service center of MINA. It is responsible for the data required for page rendering and the logic of page interaction processing, managing the life cycle of the application and page routing. The view layer sends event requests to the logic layer, and the logic layer performs page data processing and processing through the requests. Transmitted, and then sent to the view layer for page rendering. The logic layer is written in JavaScript language to implement page interaction, network requests and data processing. The logic layer contains powerful API interface functions of small programs. When developing, developers can directly call any functions they need, including the interface for obtaining user information. , payment function interface, location service function interface, etc. In addition, the mini program uses JSBridge to mobilize the underlying API interface. JSBridge connects the Web and Native through JavaScript, so that Native can call the JS code of the WEB and the Web can call the native code. Therefore, the development of WeChat mini programs does not need to consider the differences between ios and Android operating systems. The two are compatible and only need to be developed at the view layer and logic layer. The following figure mainly shows the main structure of the MINA framework:
WeChat applet file directory
The development of every WeChat mini program must include an app whose main function is to describe the mini program as a whole, and a page which is mainly used to describe the page of the mini program. When developing the mini program, the code structure directory initialized by the WeChat mini program is very simple and clear. Only two directories are displayed, namely the pages directory and the utils directory, as well as app.js, app.json, and app.wxss. application files. For the pages directory, its main function is equivalent to a "memory" used to "store" each display page of the applet. A page corresponds to a directory, which contains four files: js files, wxml files, wxss files, and json files. As shown in the figure below, the pages directory mainly stores the files that constitute the two pages, index and logs. Utils is responsible for storing js libraries and digital format files. As shown in Figure 2-2.
Next, we will introduce the three files app.js, app.json, and app.wxss that every mini program must include. These three files are the main part of a mini program. And the file names of these three files are fixed and cannot be modified casually. Table 2-1 below introduces these three files in detail.
The file app.js is the first file to be executed. Because it first requires a unified definition of the program code and a unified handling of the global logic. From the suffix name of app.js, we know that this part uses JavaScript code. App mainly contains onLaunch method, getUserInfo method, globalData global variable data.
The program within the onLaunch method will be executed when the applet starts. The methods starting with wx. are all "built-in" methods of the system. We can call them directly when we need to use them. Every time you enter wx., the system will immediately display its "self-contained" method. Which is shown in the picture above. wx.getStorageSync is to obtain the logs field of the local cache. The unshift() method adds the new log content and the current time to the end of the array. get UserInfo The custom method is used to obtain user information. Here you need to first determine whether the user information is empty. If the user information is empty, call the WeChat login interface. After successful login, the user ID and identity are stored in the global variable globalData. The app.json file is the overall configuration file of the mini program. In this file, the component pages of the mini program must be configured, and the unified window background color and navigation bar of the entire mini program can be configured according to actual needs. Styles, default titles, etc. No comments can be added to this file. app.json is the global configuration of the current applet. Including all page paths of the mini program, interface window performance, network timeout, bottom tab, etc. The configuration of app.json can be overridden by the same .json configuration of other pages.
app.wxss is the common style sheet for the entire applet. Mainly for overall control over the style of the mini program. Likewise, styles in this file will be overridden by the same styles in .wxss in other pages.
The mysql database has many advantages, such as its easy-to-understand operation, powerful functions, and high information storage capacity. Therefore, it is widely used by people. For mysql database, it is generally mainly used for encoding and querying data, and it is applied to this database in many designs. In this process, we can query and combine conventional data, so When we use the mysql database, we only need to write a small piece of data to achieve the corresponding function. A database is a storage room for data storage, but the data is stored on a computer instead of a real storage room. The data is stored in a fixed format, not disordered. The definition is: a fixed format for a long time. Storage on computer memory that can be shared. Database management mainly includes the establishment of data tables, data storage, modification and addition of data. In order to ensure that the database system can operate normally, the management work carried out by relevant personnel. The establishment of the data table can adjust the data in the data table, recombine and reconstruct the data to ensure the security of the data.
System page display
If necessary, you can scan the QR code below the article to contact the source code.