Douban scoring applet Part-3

One 、 primary coverage

The main page “ Movie theater hit ”、“ Recent hit series ”、“ Recent popular variety shows ” Module real data implementation （ Pass the dead data we originally wrote artificially API The interface becomes live ）

Cinematic effect pictures ：

Two 、wx：key

1、 Debugger warning
Before we finish Douban scoring applet Part-2 after , You can find that the debugger jumps out of the yellow warning , Let us in stars.wxml Add... While rendering the star image wx：key This attribute is used to improve performance

well , Now the pressure comes wx：key, You can see List rendering in wechat official documents wx：key, You can also simply see the following figure , In other words, provide a keyword , Prove that it is unique , Will not be dynamically changed , At present, it can be understood as our ID card , One for one

Here we might as well adopt the second method , Join in *this To avoid warnings

2、 URL usage warning
When we don't bind the corresponding website online applet , These websites are considered unsafe , So in advance Local settings Check this item in

3、 ... and 、 Single layout implementation

1、API Interface
On the home page index.js file ,onLoad（） Function, we write
establish that Variables are convenient for us to use Page Data in the page
wx.request（ Specific to see Official wechat documents -wx.request） Make a request to the website , By default, we will join url, Fill in here API

①API？ Specific to see Official wechat documents -API, It's an interface , We need to use it to get real data

②(;д;) there API The website is provided by others , There is no sharing here
success（） Indicates a successful request to , Inside res It's a random value

2、 Search data
We found that subject_collection_items It's the data we need （ The bid winner in the figure is another , Let everyone know data There are other things in it ）

3、 Definition movies Variable
We will res.data.subject_collection_items Value assigned to movies, Simple writing

4、 Save the data
Save the obtained information in data in

5、index.wxml File layout
At that time, we copied four copies, and we can delete them all , Just keep one , Add wx：for Rendering movies This list , and movies There are five groups of values , So it will be repeated five times .wx：key The corresponding setting is the title of the default item

6、index.wxml Cinema hot layout
Put the original artificially set cover address 、 Movie title 、 Modify the movie score , In this way, other data can be used universally

Four 、 The overall layout

1、 home page index.js file
Let's consider the data of popular dramas and variety shows , Just make the movie theater popular wx.request Copy , Conduct API And variable name can be modified （ Hot shows ：tvs Variable ; variety show ：shows Variable ）

2、index.wxml file
Corresponding , We're on the front page wxml Add these two new modules to the file （ from modelGroup Start copying ） Then make corresponding modification

5、 ... and 、 design sketch

1、 design sketch 1

2、 design sketch

6、 ... and 、 ending

This time we have realized the basic layout of the main page , Next time we will optimize accordingly

If you have any questions , You are welcome to point out ~ ヾ(◍°∇°◍)ﾉﾞ