Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to realize the Mini Program development of imitating film review in the development of WeChat Mini Programs. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

First, create a folder and page page as shown in the figure.

Then the update code for the app.json page is as follows:

{

"pages": [

"pages/hotPage/hotPage"

"pages/comingSoon/comingSoon"

"pages/search/search"

"pages/more/more"

]

"window": {

"backgroundTextStyle": "light"

"navigationBarBackgroundColor": "# fff"

"navigationBarTitleText": "WeChat"

"navigationBarTextStyle": "black"

}

"tabBar": {

"list": [{

"pagePath": "pages/hotPage/hotPage"

"text": "Local hit"

}, {

"pagePath": "pages/comingSoon/comingSoon"

Text: coming soon

}, {

"pagePath": "pages/search/search"

"text": "movie search"

}]

}

}

Then there is the app.wxss page (written for the following page style):

/ * * app.wxss**/.container {

Height: 100%

Display: flex

Flex-direction: column

Align-items: center

Justify-content: space-between

Padding: 200rpx 0

Box-sizing: border-box

} / * hotPage.wxss * /

.movies {

Display:flex

}

.myimage {

Flex: 1

}

.moveInfo {

Flex: 2

}

.yanyuanlist {

Display:flex

}

.left {

Flex:1

}

.right {

Flex:2

}

The page is displayed as shown in the figure:

Then there is the hotPage.wxml page:

Name: {{item.title}}

Director: {{item.directors ["0"] .name}}

Actors:

{{item.name}}

Category: {{item.genres}}

Release time: {{item.year}}

Then there is the hotPage.js page:

Var that;var page = 0 / more.js

Page ({

/ * *

* initial data of the page

* /

Data: {

Movies: []

}

/ * *

* Lifecycle function-- listen for page loading

* /

OnLoad: function (options) {

That = this

That.linkNet (0)

}

JumpTomore: function (e) {

Console.log (e.currentTarget.id)

Wx.navigateTo ({

Url:'/ pages/more/more?id=' + e.currentTarget.id

})

}

LinkNet: function (page) {

Wx.request ({

Header: {

"Content-Type": "json"

}

Url: 'https://api.douban.com/v2/movie/in_theaters',

Data: {

Start: 10 * page

Count: 10

City: 'Chengdu'

}

Success: function (e) {

Console.log (e)

If (e.data.subjects.length = = 0) {

Wx.showToast ({

Title:'no more data'

})

} else {

That.setData ({

Movies: that.data.movies.concat (e.data.subjects)

})

}

}

})

}

OnReachBottom: function () {

That.linkNet (+ + page)

}

})

The result of running the program is shown in the figure:

Then there is hotPage.wxss:

Image {

Width:350rpx

Height:280rpx

}

Then the layout of the second page is the same as the first page, so just copy the hotPage.wxml code of the first page.

Similarly, comingSoon.js code is similar to hotPage.js code, and the only thing that needs to be changed is:

Url and data just need to change it.

The .wxss code is consistent

The running results are as follows:

Then comes the code for the third page:

Search.wxml page code:

Search for

Name: {{item.title}}

Director: {{item.directors ["0"] .name}}

Actors:

{{item.name}}

Category: {{item.genres}}

Release time: {{item.year}}

Search.js page code:

Var input;var that;// search.js

Page ({

/ * *

* initial data of the page

* /

Data: {

Movies: []

}

/ * *

* Lifecycle function-- listen for page loading

* /

OnLoad: function (options) {

That = this

}

MyInput: function (e) {

Input = e.detail.value

}

MySearch: function () {

Wx.request ({

Header: {

"Content-Type": "json"

}

Url: 'https://api.douban.com/v2/movie/search?q=' + input

Success: function (e) {

That.setData ({

Movies: e.data.subjects

})

}

})

}

})

The search.wxss code is consistent with the hotPage.wxss code

The result of running the code is as follows:

Finally, there is the details page. After clicking the movie, you will jump to the details page to get the details of the movie:

More.wxml page code:

Name: {{title}}

Director: {{director}}

Starring:

{{item.name}}

Year: {{year}}

Rating: {{rate}}

Introduction: {{summary}}

More.js Code:

Var that

/ / more.jsPage ({

/ * *

* initial data of the page

* /

Data: {

Title: 0

ImageUrl: 0

Director: 0

Casts: []

Year: 0

Rate: 0

Summary: 0

}

/ * *

* Lifecycle function-- listen for page loading

* /

OnLoad: function (options) {

That = this

Wx.request ({

Header: {

"Content-Type": "json"

}

Url: 'https://api.douban.com/v2/movie/subject/' + options.id

Success: function (e) {

Console.log (e)

That.setData ({

Title: e.data.original_title

ImageUrl: e.data.images.large

Director: e.data.directors ["0"] .name

Casts: e.data.casts

Year: e.data.year

Rate: e.data.rating.average

Summary: e.data.summary

})

}

})

}

})

This is the end of the article on "how to achieve Mini Program Development of imitating Film Review in the Development of WeChat Mini Programs". I hope the above content can be helpful to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.