Teach you how to build a small program project from scratch

IDE preparation

Download address: mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

Knowledge preparation

You still need to take a look at JavaScript. Recommended tutorial: JavaScript Beginner Tutorial

Start from Scratch

There are four types of files in WeChat Mini Program

js ----- -----JavaScrip file

json -------- Project configuration file, responsible for window color, etc.

wxml ------- Similar to HTML file

wxss ------- Similar to CSS files

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

app.json

This file must be present. If there is no such file, the IDE will report an error because the WeChat framework uses this as the configuration file entry.

You only need to create In this file, just write curly brackets

We will configure the global configuration of the entire applet here in the future. The page composition is recorded, the window background color of the mini program is configured, the navigation bar style is configured, and the default title is configured.

app.js

This file must be present, otherwise an error will be reported! But just create this file. You don’t need to write anything.

In the future, we can monitor and process the life cycle 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 necessary, and this does not refer to the main interface~because the main page of the mini program is based on the JSON file It depends on the configuration

With these two files, when you run the program, the IDE will not report an error, which also means that this is the simplest WeChat applet

Create a program instance Hello World

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

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

Specific API The explanation is as follows

Beautify ActionBar

The json file is responsible for configuring the ActionBar color. We only need to add the following code in it. The parameters are explained in the figure below!

Paste_Image.png

Paste_Image.png

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

Paste_Image.png

Now let’s see if the ActionBar looks like that! Okay, let’s continue writing our first interface

Beautify the page

We used wxml and wxss files to beautify the page

For the simplicity of the program code structure

We need to create a new folder in the directory with a random name. We call it pages here

Then create a new folder in the pages folder with a random name. Here we call it index

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

Hellotext>view>

Then 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 (there will be a prompt when entering Page IDE)

The function is explained as follows:

Paste_Image.png

Configuring the home page

The Json file is responsible for configuring the page path

So we add the following code to it

The index is The meaning actually refers to the index.js file

It needs to be explained here that the path in pages actually points to the js file

If there is no js file with this name in a directory, an error will be reported!

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

Done! Let's run the program!

Super Hello World

In order to learn event binding and how to update data on the page

Let's make a super Hello World, that is, when I click on the text, it will

It changes color!

Binding event

We open index.wxml and change the code inside to this

Hellotext>view>

In fact, we add catchtap=" click"

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

The above picture shows some attribute names of the event. Here you need to pay attention to the content marked in the red box. Distinguish between bubbling events and non-bubbling events. In fact, bubbling events need to pass the event to the upper layer container.

After seeing this picture, let’s look at the meaning of catchtap="click"

catch represents a non-bubbling event

tap represents a click event

So even Together they are non-bubble click events

What is the click behind it

click is actually just a variable name

We need to use this name to bind and receive in index.js Event function

We open index.js

and add the following function

click:function(){ console.log("Clicked the text"); },

After adding, the code will look like this. The red box is the added code

So in fact, the callback function of the click event is catchtap="click"

, followed by click. :function()

Now let’s try running the program and click on the text

See if the click:function function is called and the log is printed

Okay, then let’s write the logic of changing color when clicked

How to make a text change color, of course it is css

So we need to add a style to index.wxss

.window-red{ color:#D23933;}

Then we enter the index.js file

You will find that there is data:{} in the code. It is not a page life cycle function

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

We apply for a color here

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

Then enter index.wxml , change the value in class to {{color}}

In fact, it means to use the value of the variable color in the js file here

That is, the value is equal to window

Then we go back to the index.js file

Apply a variable control click at the top

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

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

The modified code is as shown in the figure

In fact, after clicking Yes, the value of the color variable is replaced, and the replaced value is actually the name of the style

Update interface data

There is a problem here. We have changed the value but it will not take effect immediately in wxml

So we need to call the

this.setData() method to The value is synchronized to wxml to make it take effect immediately

Okay, let’s run the program and click Hello to see if the color changes with one click!

Finally, I would like to add that json files can also be configured in the index directory

That is, each page can configure its own unique actionbar color, etc.

The configuration here will be Overwrite the configuration of the app.json file

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

Finally share a wave of mini program source code, 488 mini program demo source code downloads Special area:

p/36fc7213b5d0

Friends who have energy are recommended to read it.

---

I held a live on Zhihu. I will meet you on Zhihu at 8:30 on the evening of April 22 (Saturday): [0Basic Weekend Study Tips Program Development] (https://www.zhihu.com/lives/832919740296101888), welcome to join us.

Long press the mini program code, open the "Cultivation Commune", and immediately join the "WeChat mini program" rice circle

This article was first published on my personal WeChat public account Philosophy Li Lun, which mainly promotes art/ Technology-related content is all about friends.

The above is the detailed content of Teach you how to build a small program project from scratch. For more information, please follow other related articles on the PHP Chinese website!