gogoWebsite

The development of small programs is extremely similar to traditional web front-end development, I'm sure you tech geeks are concerned about how to go about developing a small program, and here I'll briefly introduce how to get started with developing a small program in a simple way.

Step 1: Installation

First download the WeChat Developer Tools

/debug/wxadoc/dev/devtools/?t=201716

Download and install directly, click next

Then scan the code to enter the WeChat public number, he will automatically get your public number and WeChat

After scanning the code and logging in, selectLocal applet program , click Add Item, and then fill in the relevant information:

• AppID: Enterprises that apply and get it, or are invited to participate in the beta test can go to theWeChat-Public PlatformIf you just want to test it, choose No AppID.
• fill in sequentiallyProject namecap (a poem)Project CatalogWhen creating a project for the first time, it is recommended to check the Build Common Quick Enable Template option. This will help to create an initial demo.

Step 2: Basic Configuration

After entering the initial demo created, you can see the following page:

After clicking Edit, you can find the right sidedirectory structureThere are two folders in the root directory and three files in the root directory, the three files are、、The roles of each of these three documents are described below:

as a script file, we can add theIn the initial demo, you can listen to and handle the applet's lifecycle functions, declare global variables, and call the various APIs provided, such as calling the login interface and fetching data in the initial demo.

The file consists of two parts, where we can define the paths to the pages, and also where we can define the background color of the window for some applets, configure the navigation bar style, and configure the default title. We can see that this corresponds exactly to the two pages in the pages file. If we want to add a new page, we also need to declare the path here, "pages" array of a page for the applet's home page.

Attention:No comments can be added in it!!!

Define the public styles of the applet in the

Step 3: Page Creation

As introduced earlier, there are two pages in this initial demo, and the [path + page name] of each page in the WeChat applet needs to be written in the pages.

Each applet page is composed of four different files with the same name under the same path, such as: , , , . Files with .js suffix are script files, files with .json suffix are configuration files, files with .wxss suffix are style sheet files, and files with .wxml suffix are page structure files. Here's a look at each file one at a time:

is the page structure, equivalent to what we wrote.htmlDocumentation.together with.htmlThere are still some differences. We find that the above document in thetag is the same as in the `.html` in theThe labels are very similar. Other、、The use of the ` tag is similar to theSimilar in .html`.

is the script file for the page, which is the same as our previous.jsfile has the same functionality. In this file we can listen to and handle page lifecycle functions, get applet instances, declare and process data, respond to page interaction events, and more.

is a style sheet for the page, similar to the.cssWhen there is a page style sheet. When there is a page style sheet, the style rules in the page's style sheet cascade over the style rules in the page's style sheet. If you do not specify a page style sheet, you can also use the style rules specified in the page structure file directly.

The page's configuration file is not required. When a page profile is available, the configuration items on that page override the same configuration items in the window of the page. If no page profile is specified, the default configuration in the window is used on that page.

Step 4: Debugging

Click on the left side of the development boxadjust components during testingEnter the debugging interface:

Debugging is the same as chrom debugging code

Step 5: Project Preview

The "Settings - Project Settings" module on the top side of the developer tool includes the current project details, uploads and some other settings for the project.

Since there is noAppID, some functions are not available.