One, code processing

Recently, a university classmate opened a self-study room at home and needed a WeChat applet for the self-study room, and there happened to be no code project on hand. Based on the principle of doing less than doing more, I tried the WeChat applet for the first time. Development. I had to go to work during the day, and I could only use the evening time to write. Anyway, he was not in a hurry to open the business, so it took about half a month before and after, so I made a record.
At the beginning, I really don’t have much experience, and I don’t know where to start. At this time, of course, I adhere to a principle and focus on open source without borders (a large copy of the world's code). Of course, no matter which language, beginners start by seeing other people's code.
Here, I will not explain the specific code, nor analyze the specific code, but only roughly analyze the requirements of a self-study room appointment software. In general, there are two points, the front-end WeChat applet and the back-end server .

(1) WeChat Mini Program (front-end display)

The front-end display is of course indispensable. If it is a small program that does not need to exchange data with the back-end, only the front-end display is needed. Simple recording process.

Looking through the help documents , the most important document for developing small programs is Tencent’s official "WeChat Open Document", which contains very detailed guidelines, frameworks and various development instructions.
Choose a development tool , basically no choice, develop a WeChat applet, look through the WeChat open document, you can see that it is basically "WeChat Developer Tools", there is a transmission port in the document, you can send you to the download page, it does not support the linux system, the specific usage method, Explore by yourself, or Baidu.
Language code basis , WeChat applet is actually web development, using js, json, wxml, wxss, corresponding to web development js, xml, css, the language is almost exactly the same;
Apply for your APPID , apply on the official website of the applet, the applet website , register, log in, a set of procedures is not mentioned . This APPID is a very important identity authentication information. It is the identity authentication ID of the developer. It identifies who developed this small program. It will be used in many places. How to obtain it. There are many tutorials on the Internet, which are not listed here;
To import other people's projects , select "Import Project" in "Project" in WeChat Developer Tools, select your project location in the directory, and appid is the APPID you applied for in point 4.

Architecture of WeChat Mini Program Project

According to the file directory, a brief introduction, a few sharp start:

app.js , this is the content that runs during the startup phase of the applet when entering the WeChat applet. The most distinctive feature is onLaunch(). This function is the startup function. If there is anything that needs to be started with the applet, Put it all under here. Here, some global variables and global functions will be defined and assigned initial values. When each subsequent js document needs to be called, just add a sentence at the beginning of js const app = getApp()to app.globalData.imgUrlcall the value in the form of such as .
app.json is also some global definitions. It is necessary "pages": []to declare each page page in , "window": {}define some parameters such as the name and background color of the applet in "tabBar": {}, define the specific attributes of each tab page in, in addition, common definitions For example, if you need to use navigation and positioning, you need to define a "permission":{}related content here .
app.wxss is some global style definitions of the applet, I didn't use it much, it depends on personal preference.
The pages folder , under this folder, is the content of each page displayed in the applet. Generally, the content of each page contains three parts, namely js (implementation function), wxml (implementation page layout), wxss (definition Some specific styles).

Description of some features

Although the WeChat Mini Program is similar to a web page, it also has its special features, especially a few contents, which need special explanation.

Variables defined in data can be called anywhere in js through the variable name of this.data.
this.setData , this function is used for data interaction with the front desk. It is mainly used to transfer data to the front desk, using key-value pairs to pass the value. For example this.setData({selstartTime: "11:00"}),, selstartTime is the key value passed by the front desk of the king. Time value. Receive the value via { {selstartTime}} in the foreground .
3. The difference between onLoad and onShow , onload is the action when the page is first loaded, and only runs once, onshow is the action every time the page is displayed, sometimes you return to the page through the back button, onload will not run , Onshow will run.
The difference between wx.navigateTo and wx.redirectTo and wx.switchTab , navigateTo can jump to pages other than the tab page (that is, the pages that are displayed when the homepage is switched from left to right), and the original page is still retained when the jump is performed. If you do not destroy it, click Backward can also return to the original page. redirectTo also jumps to a page outside the tab page, but when jumping, the original page is destroyed without keeping it. Clicking Back will not return to the original page. SwitchTab jumps to the tab page.
wx.request , access to the background, access via url.
The openID network identification number is obtained . This is the identity of each user who accesses the applet. Each user is unique. To obtain this openID number, it needs to be obtained through the request and the background linkage.
In the WeChat development tool, you can directly upload to the official website of the WeChat applet and submit it as an experience version.

(2) Background server (data interaction)

This part of the content, not everyone needs to understand, some do not need to interact with the background data, do not need to pay attention, if you need to interact, you need to understand.

Required environment

Apache , this is for deploying web pages, everyone knows it, not much to say.
Mysql , this is more familiar, very common relational databases, many data used to store data, including WeChat applets, need to operate with this database, read and write.
Code running environment , the language here is not limited, the common ones are java and php, because I learn from human php, I can only bite the bullet and use php.
Wampserver , the above three environments, apache, mysql, and php operating environment, seem to be very cumbersome. Of course, if you really set up the environment one by one, it may become a stumbling block on your way forward. So you will be pleasantly surprised to find an artifact, Wampserver, simply install it, you can get the Trinity in one step. After installation, there will be a "wamp64" folder in the installation directory (I chose 64-bit). Put your php webpage in the "www" folder under this folder, and you can. Visit "http://localhost/weixin_yuyue/index.php" (weixin_yuyue is the name of your project folder under the www folder) to access the background web page.
Navicat , the commonly used software for managing mysql database, not much to say.

pay attention

Back-end access to the web page and back-end access to the database are two different things, but the access method is the same, access the back-end through http or https. The difference lies in the different directions.
To get the openid number of the visiting user, you must visit "https://api.weixin.qq.com/sns/jscode2session";

   public function getOpenId(){
    
    
      $url="https://api.weixin.qq.com/sns/jscode2session";
       $appid='wxddd2d233413fb869';//小程序appid
       $secret='477fe8909d4ba0ff092bbd636becd45b';//小程序密钥
       $js_code=I('js_code');
       $sendurl= $url."?appid=".$appid."&secret=".$secret."&js_code=".$js_code."&grant_type=".$_GET['grant_type'];
       $result =json_decode(file_get_contents($sendurl));
       $session_key=$result->session_key;
       $openid=$result->openid;
       echo json_encode(array("openid"=>$openid,"session_key"=>$session_key));
   }

The similar sentence pattern for accessing the back-end database is "". It can be seen from this type of sentence pattern that the corresponding controller accessed is in "C:\wamp64\www\weixin_yuyue\Application\Api\Controller" (my directory, Each person has a personal directory, which is not the same) Under the directory, the content in the corresponding XXXController.php. For example, the content of the corresponding program accessed by "http://localhost/weixin_yuyue/index.php/Api/Orders/index" is the following public function index()function content in the UserController.class.php file. The use of the controller, just say that, Not much to say.

2. Project deployment

(1) Wampserver settings

Wampserver is ideal by default. Therefore, you need to modify the configuration of Wampserver to allow external access. The specific method is available online.

(2) Acquisition of domain name

The domain name is obtained by application, and requires http and https permissions. I’m here to make a convenient picture. I used the peanut shell's intranet for transparent transmission, downloaded the peanut shell 5 software, and spent 6+58=64 yuan. Once you have a permanent https encrypted domain name, you can use this domain name. There are several points to note when using the peanut shell software.

The domain name of https or http must be used, just one step is in place, https, WeChat applet access the background, https protocol is required when necessary, http is only available for debugging.
It is recommended to fix the ip address of the computer. This ip is the ip address of the computer in the local area network, such as my "192.168.1.4". After each restart of the province, the ip changes and the settings have to be changed, otherwise the peanut shell LAN cannot be mapped.
After obtaining the domain name, you need to replace the original "localhost" with your domain name.

(3) Settings on the official website of the Mini Program

"Development"-"Development settings"-"Server domain name"-"request legal domain name", add your domain name here, it means that this is an allowed domain name, otherwise you can only turn on the debugging mode in the WeChat experience version. Or in the WeChat development tool, when debugging, check "Do not verify domain name XXXX".
"Homepage"-"Mini Program Information", fill in carefully, many of which have a limit on the number of revisions.
After uploading the Mini Program as a trial version, you need to manually set it to allow the experience in "Management"-"Version Management"-"Development Version". Then you can get the QR code, you can scan the code to apply for the experience, and the developer can pass it.

Finally, both hands offered me a link to the source code that I borrowed from. I don’t know if this is a violation of the rules. Try it first. If not, please contact me to delete it. WeChat applet self-study room reservation code download address

Record of the whole process of WeChat applet development (from foreground to background, to release)

WeChat Mini Program Development Process Record