Teach you how to build a small program project from scratch

This article is very simple and suitable for beginners who just downloaded development tools. I still want to take a look at the knowledge preparation of JavaScrip. recommended Tutorial: JavaScript elementary course... IDE preparation

: Mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

Knowledge preparation

JavaScrip is worth looking at. recommended Tutorial: JavaScript Elementary tutorial

Starting from scratch

There are four types of files in the applet

Js ---------- expose Crip file

Json -------- project configuration file, responsible for window color, etc.

Wxml ------- HTML files

Wxss ------- similar to CSS files

The four types of files named by the app in the root directory are program entry files.

App. json

This file must be available. If this file is not available, the IDE will report an error because the framework uses this file as the configuration file Portal,

You only need to create this file and write a braces in it.

In the future, we will configure the global configuration of the entire Applet here. Record the page composition, configure the background color of the applet window, configure the navigation bar style, and configure the default title.

App. js

This file must be available. if not, an error is returned! But this file does not need to be written after it is created.

In the future, we can listen to and process the lifecycle functions of the applet and declare global variables in this file.

App. wxss

This file is not required. Because it is just a global CSS style file

App. wxml

This is not required, and it does not mean the main interface ~ Because the main page of the applet is determined by the configuration in the JSON file.

With these two files you run the program, IDE will not report errors, it also means this is the simplest small program

Create a program instance Hello World

The app. js file manages the entire life cycle of the program, so add the following code in it: (input App IDE will prompt)

App ({onLaunch: function () {console. log ('app launch')}, onShow: function () {console. log ('app Show')}, onHide: function () {console. log ('app Hide ')}})

The API description is as follows:

Beautify ActionBar

The json file is responsible for configuring the ActionBar color. you only need to add the following code in it. there are Parameter descriptions!

Paste_Image.png

Paste_Image.png

{"Window": {"navigationBarBackgroundColor": "# BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle": "white "}}

Paste_Image.png

Now let's see if ActionBar is like that! Next, let's continue to write our first interface.

Beautify the page

For page beautification, we use wxml and wxss files.

Concise program code structure

We need to create a new folder name under the same directory, which is called pages

Create a new folder in the pages folder. the folder name is index.

Then we create the index. wxml file and write the following code in it:

Hellotext> view>

Create the index. wxss file and write the following code in it:

. Window {color = # 4995fa ;}

Then we create the index. js file.

Enter the following code in the file (input Page IDE will prompt)

The function is interpreted as follows:

Paste_Image.png

Configure homepage

The Json file is responsible for configuring the page path

So we add the following code to it:

The description of index actually refers to the index. js file.

Here we need to note that the path in pages actually points to the js file.

If a directory does not have a js file with this name, an error is reported!

"Pages": ["pages/index"],

Finished! Let's run the program!

Super Hello World

To learn how to bind events and update data on pages

Let's make a super Hello World, that is, I click the text to make

It changes color!

Bind event

Let's open index. wxml and change the code to this.

Hellotext> view>

In fact, it adds catchtap = "click"

What do these two attributes mean? don't worry. I will explain them one by one.

Some attribute names of the event are displayed. Note the content marked in the red box to distinguish between the bubble event and non-bubble event. In fact, the bubble event needs to be passed to the previous container.

After reading this figure, let's take a look at the meaning of catchtap = "click ".

Catch indicates a non-bubble event.

Tap indicates a click event

Therefore, the connection is a non-bubble click event.

What is the next click?

Click is actually a variable name.

We need to bind this name to the function that receives events in index. js.

Open index. js.

Then add the following function

Click: function () {console. log ("clicked text ");},

This code is added in the red box after the descendant code length is added.

Therefore, the callback function of the click event is catchtap = "click"

After clicking in

Now let's run the program and then click the text

Check whether the click: function is called and the log is played.

Next, let's write down the color-changing logic.

So how can we change the color of a text, of course, css?

So we need to add a style to index. wxss.

. Window-red {color: # D23933 ;}

Then go to the index. js file.

You will find a data: {} in the code that is not a page lifecycle function.

In fact, it is an array of variables. the applied variables can be used in wxml.

Here we apply for a color

The color value is the style name in index. wxss.

Then go to index. wxml and change the value in the class to {color }}

In fact, it means that the color variable in the js file is used here.

That is, the value is equal to window.

Then we will return to the index. js file.

Apply for a variable control click at the top

Then add the following code to the click: function () function:

Click: function () {console. log ("Click text"); if (flag) {color = "window-red"; flag = false;} else {color = "window"; flag = true ;} this. setData ({color });},

Modified code

In fact, after clicking "yes", the value of the color variable is changed, and the value is actually the style name.

Update interface data

Here is a problem. we have replaced the value but it will not take effect immediately in wxml.

So we need to call

This. setData () method synchronizes the value to wxml for immediate effect.

Okay. run the program and click "Hello" to see if you want to change the color!

Finally, we can add that json files can be configured in the index Directory.

That is, each page can be configured with its own unique actionbar color.

The configuration here will overwrite the configuration of the app. json file.

Source code github address https://github.com/pwh0996/WXDemo.git

Finally, I shared a wave of small program source code, 488 small program demo source code download area:

P/36fc7213b5d0

If you are energetic, you are advised to read it.

---

I opened a live in Zhi Hu, April 22 (Sat) half past eight I am in Zhi Hu to meet with you: [0 basic weekend learning applet Development] (https://www.zhihu.com/lives/832919740296101888), welcome to join.

Long press the small program code, open the "spiritual community", and immediately join the "mini program" circle

This article was first published in my personal public account philosophy, Li Yu, who focuses on the content related to Art/technology. I am interested in all my friends.

The above shows how to build a small program project from scratch. For more information, see other related articles in the first PHP community!