This is the 28th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

First of all, we need to download wechat developer tools and select the corresponding version.

New project

The AppID is very important. It is the unique identifier of the applet. A applet account corresponds to an AppID, so we need to register a applet.

At the time of registration, we can input the corresponding information, a mailbox can only correspond to a public number, or small program, so you may need to create a mailbox first. After registering, log in to the background of the applet to view the AppID. There is a setting at the bottom of the dropdown. Click on the Settings drop-down to see the AppID.

The development mode is to choose the small program, here can choose according to their own needs whether cloud development, the last section also said this problem, the language can choose JavaScript.

The initial project looks something like this, taken as a whole, divided into three modules, emulator, compiler and debugger. All three modules are shrinkable. Just click on the module in the upper right corner.

The simulator is suitable for the mobile phone model that can be set up in the upper right.

The editor is where our source code is.

The debugger can be used to view a console log debug. There is a TAB that is used a lot, which is AppData. Click on this TAB and you can see all the data in the page. The debugger is also the most used place to locate source code, similar to F12 in our browser.

Applets directory structure

Sitemap. json file is not useful for development. Sitemap is very search engine friendly. If you generate new files on your site, sitemap can be quickly indexed by search engines.

Json: this file stores the configuration of the project, such as the project name, AppID, etc.

App.js/json/WXSS these are important configurations, like global interaction, global configuration files, global style files. Each page in the Pages directory has 4 files, JS JSON, WXML, WXSS. These are similar to the JS page configuration in our front end, HTML CSS.

WXML is responsible for the skeleton of the page, WXSS is responsible for the style of the page, JS is responsible for the interaction of the page, and the interaction of the back end, JSON is responsible for the configuration of the page.

As an example, to create a new page, first create a folder in the Pages directory with the name of the page you want to create, then right-click the folder and create a new page name with the same name as the index page in the image above. There is an Index folder, and then a set of pages (JS JSON WXML WXSS).

Compilation mode

Said the small program compilation mode, every time we entered the small program or to save a page after the small program will automatically compile implementation, however, there is a problem, how to set up direct I modified pages, small program provides the function of adding compilation mode, why just enter the small program, will load the index this page? This is determined by the order of pages tags in app.json, plus if we want to compile logs first, there are two ways. The first is to change the order of pages in the Pages tags. However, this approach is not recommended because we want to compile the pages that are being developed, which requires constant modification of the Pages TAB.

Alternatively, at the top of the development tool, click On Normal Build and select Add Build mode to change the compile order of the page.

  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
Copy the code

conclusion

So far here, we have introduced the small program environment building process, the follow-up is some specific development methodology, I think it is very useful, we continue to pay attention to ha