WeChat applet Getting Started Tutorial

This article mainly introduces the small program getting started tutorial. now I will share it with you for some reference value. if you are interested, please refer to it. This article mainly introduces the small program getting started tutorial. now I will share it with you for some reference value. if you are interested, please refer to it.

In recent months, mini-programs have cracked the circle of our programmers. it can be said that there are countless programmers who are ready to take a piece of cake. As front-end developers, what is the difference between small program development and our normal development? Let's take a look at it.

Let's take a look at the development of small programs in the following directions:

1. Development tools

2. layout differences

3. JS differences

4. others

Collation

First look at the Directory initialized by a small program:

Page({ tapName: function(event) {  console.log(event) }})

The output is as follows:

{"type":"tap","timeStamp":895,"target": { "id": "tapTest", "dataset": {  "hi":"WeChat" }},"currentTarget": { "id": "tapTest", "dataset": {  "hi":"WeChat" }},"detail": { "x":53, "y":14},"touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14}],"changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14}]}

You may be a little dizzy when you see such a bunch of things. let's just try again. This event should be clear to everyone. the event contains information about the target object. That means we only need to modify the information of the target object, and we can transmit parameters to the tapName method.

So how to modify the information of the target object? Before that, we must first understand the currentTarget and target attributes. The former is the component bound to the event, and the latter is the component source that triggers the event. It is important to understand these two attributes! If there is only one view component in the preceding example, the values of these two attributes are no different, but the values of these two attributes are different in the following example:

Let's take a look at the output (to facilitate the comparison, only the currentTarget and target attributes are retained ):

{"Target": {"id": "tap2", "dataset": {"hi": "Trigger component source" }}, "currentTarget": {"id ": "tap1", "dataset": {"hi": "bind component "}}}

Through this example, we can clearly find that currentTarget corresponds to the view component bound to the outer layer with the tapName method, while the target corresponds to the internal view component.

Through two examples, I believe you have noticed two attributes: data-hi and dataset. what is the relationship between these two attributes? As you may have guessed, the dataset value is actually the data-xxx value we set, and xxx is the key in the dataset. We should be familiar with writing data-xxx, that is, writing custom attributes in html, which is used to pass parameters in small programs.

4. change the style

As mentioned above, the small program does not provide the ability to obtain and operate the dom. This raises another question: how can we dynamically change the style? Let's take a look at the following example:

 
  Page({ data: {  screenType: '' }, bindType: function(){  this.setData({    screenType: '1'  }) } })
 

Do you understand that we cannot directly obtain the dom and change its style, so we can only control the style changes through the attributes in data, as shown in the code above, the value of overflow depends on whether the screenType value exists. if so, overflow: hidden, and overflow: scroll-y; then we only need to change the value of screenType. It is also easy to change the value of screenType. the applet provides the this. setData method to set the value in data.

4. others

Finally, let's mention the familiar ajax request. in a small program, it is not called ajax, but wx. request. The usage is no different from ajax. The only thing you need to note is that the request must be an https request! Instead of http requests! In addition to https requests, you also need to set a valid domain name in the background of the applet; otherwise, the request cannot be made.

The above is the details of the mini-program getting started tutorial. For more information, see other related articles in the first PHP community!