[WeChat Mini Program Zero Foundation] Getting Started, Create a Project + Structure Explanation

Hits: 0

Written in the front:
Small programs, thanks to their rich functions and convenient operations, have become very popular applications in modern times, and their applications are popular in everyone’s life. It can be said that it is a very cutting-edge development field and has unlimited prospects. direction

This series will take you to learn WeChat applet from 0, and finally make a WeChat applet small project (to learn applet development, it is best to master certain front-end knowledge, such as html, css, js)

Article directory

1. Registration

To develop a WeChat applet, first we need to register an account on the WeChat public platform

Very simple, Baidu search WeChat public platform , click on the link with the official logo, enter our selection registration
and then choose the applet registration

Fill in the required information and click the register button below

It should be noted that the mailbox needs to be registered on the WeChat public platform for the first time, and one mailbox account can only register one applet

After clicking register, your mailbox will receive a link, click it to complete the registration, and finally register the information, you will get a brand new development account!

Second, download the tool

Wechat developer tool is a code tool recommended by wechat, you can write code in it, upload code, of course, you can still edit it with VScode, etc., but in the end you still need to upload code in wechat developer tool

WeChat Developer Tools Click to enter, select the stable version to download

You can choose the package to download according to your computer system

Afterwards, you can choose the installation location according to your own preferences.

After installation, click on the software, and a login QR code will pop up. We only need to use WeChat to scan the code to log in, and the logged-in WeChat account is the manager of the applet.

To this page, it means that our installation is complete

The above are all the preparation stages of WeChat applet development, and then we will start to create our first applet.

Third, create the first applet

Click the plus sign box in the page, and a registration page that requires us to fill in the information will appear

Select the location where the project is stored, and then go to the AppID to fill in. The AppID here is the applet ID of the WeChat public platform account we created in the first step.

Let’s go back to the previous page
Paste it into the corresponding location in our WeChat developer tool

Here we choose not to use cloud services, we can click the OK button, then we will create a small program project

Fourth, the project structure and file types

4.1 Project structure

There are mainly three files and two folders in the root directory of the project

The four files are app.js, app.json, app.wxss,project.config.json

  • app.js is the logic file of the project
  • App.json contains the global configuration of the applet
  • app.wxss is the public style sheet file of the applet. The stored code is similar to css. The
    first two are required, and the last one can be omitted.
  • project.config.json is the configuration file of the project. Let’s understand this first, and use it later.

The two folders are pagesandutils

  • pages is used to store all the pages of the applet, and each page exists as a
    separate subfolder in pages, and the files in the folder are composed of four parts
    js.
    wxmlPage structure
    jsontype file, set the configuration
    wxsstype file of the page, type css file, set the style of the page

  • There is only one file in the utils folder, which is used to store tool-like modules

4.2 File Types

The role of the other three files in the applet is actually equivalent to the front-end Three Musketeers html css js. I won’t introduce it here, mainly JSON

JSON type
I have also learned before that JSON files are files that store data, and are especially suitable as a configuration file for a certain block,
such as a configuration file for a small program.app.json

{
 "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
 "window":[
   "backgroundTextStyle":"light",
   "navigationBarBackgroundColor":"fff",
   "navigationBarTitileText":"Weixin",
   "navigationBarTextStyle":"black"
 ],
 "style":"v2",
 "sitemapLocation":"sitemap.json"
}

The attribute values ​​of the path, window, and style type are configured separately, such as the background color of the window, the text style, and the setting of the title text.
Generally, we will name the home page of the applet as index, and the log page of the applet will be named index. It is defined as logs. Generally, the logs page does not display
the format of JSON storage data. It can be found that the file is enclosed in curly brackets, the name and value are enclosed in double quotation marks, and the two data are separated by commas. The last one does not need a comma. , which is also the basic syntax
tips of JSON in the applet : it should be noted that please do not add comments to the applet JSON file.
The role of other configurations will be explained one by one when the applet is configured.

Today’s introductory article is over here. The next article will mainly focus on the differences between WXMLand HTML, WXSSand CSSfiles, and the small program components. If you think it is helpful to you, you can pay attention to the update after Niuniu.

Debt see~

You may also like...

Leave a Reply

Your email address will not be published.