Small program Price (2) Watercress movie _js Logic Chapter

From previous applet Advanced (1) Watercress Film _ Layout we know that.

The double curly braces are some of the regular and methodical actions that {{}} use to JS and wxml bind events, such as data updates, display rules, and so on.

Then we need to refer to this mechanism to do data update operations for our image and text controls.

Very good to know this, the back of the matter to the JS to complete.

Now, the analysis step, (the first three steps into one, the fourth step is divided in terms of.) ）

1.

The first thing you need is a function to send a request to the network to see the official document sending request

2.

Follow the three keywords in the document,URL, header, success,

URL, not much to say the network request, do not understand must first understand

header, not familiar with the HTTP protocol friends, when you see this property in the document is bound to confuse the foggy, he is the content of the page to parse such as the document in the header method code: ' Content-type ': ' application/json' is to parse the content into JSON format, if it is replaced with ' content-type ': ' application/xml' Then it will parse the content of the Web page into XML format, now you should understand that JSON is its own designated file format, we follow its wording can be, so and so will be directly copied over to use.

success, a function for reading data, (see his type function when looking at a document)

3, (This step of the operation of the understanding of the latter a bit of help)

Watercress Movie API We want to use to his, are aggressively, Top250, movie search, three interfaces.

Https://api.douban.com/v2/movie/in_theaters view interface to be aggressively as column because the content of this page is too complex, we can do some simplification

Open this link, press F12 to appear the Debug box, copy all the contents of the page, and then enter Var A in the Debug box = Paste the copied content after the equal sign , enter, and type a carriage return, now the content of this page is organized.

4.

With the above steps, the final thought, the data read, and Data format processing ( here the format and header, we are the data formatting to the user to see ).

So: We need two functions, one to iterate through the network data, and the other to format the data. Since these two functions can also be used for subsequent top250 pages, I use encapsulation to encapsulate both of them for later logic use.

5.

Correlate the data in Wxml.

With this four-step approach, we begin to look at the implementation of JS code. (I'm afraid you've fainted!) Don't worry about the steps ahead. I think you look at the code to be more handy. ）

Since the first three steps are relatively simple, start with the two functions of the fourth step:

Create Subjectutills.js in Utils (the file name is not fixed.) )

The next step is to write the function that gets the data in the first loop.

Now to write the function of the data format, because the code a little more thinking to save you a little time below the text can be copied.

//Get data and Format function Provesssubject (subject){//movie name var title = subject.title;//Director Information var directors = Subject.directors;var directorstr = ""; for (var index in director s) {directorstr = directorstr + directors[index].name + "/";}if (directorstr! = ""){directorstr = directorstr.substring (0, directorstr.length-2);}//actor information var casts = Subject.casts;var Caststr = ""; for (var index in casts){caststr = caststr + casts[index].name + "/";}if (caststr! = ""){caststr = caststr.substring (0, caststr.length-2);}//Type information var genres = Subject.genres;var Genrestr = ""; for (var index in genres){genrestr = genrestr + genres[index] + "/";}if (genrestr! = ""){genrestr = genrestr.substring (0, genrestr.length-2);}//Release year var = subject.year;//data format var text = "Name:" + title + "\ n Director:" + directorstr + "\ n Actor:" + caststr + "\ n type:" + genrestr + "\ n Release years:" + year + "(Mainland China)"//Get formatted data Subject.text = text;}

Modular (package) Finally, don't forget to package

Complete these two functions, now let's write the logic Code of the network request

The fifth step is to complete the data association in Wxml.

Note that {{Item.images.medium}} This string of code and {{Item.text}} is followed by a small number of words. The block loop and loading components are added here.

Say {{item.images.medium}}, and {{Item.text}} should not be more than the data we formatted.

Use the third step of the operation you will get such a page, after watching you should be unaware of the feeling,

The homepage is almost finished. Now look at how it works.

Write here a display area is almost ready to write, and continue to go deep in the back.

Small program Price (2) Watercress movie _js Logic Chapter