WeChat mini-app-movie rating mini-app production code, mini-app Movie Rating

Small Program movie evaluation code for small program production, small program movie Evaluation

This article provides examples to share with you the specific code for creating a movie evaluation applet for your reference. The specific content is as follows:

This is the file contained in the project of the blogger:

Create a folder and a page

Then the app. json page updates the Code as follows:

{"Pages": ["pages/hotPage", "pages/comingSoon", "pages/search", "pages/more"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black "}, "tabBar": {"list": [{"pagePath": "pages/hotPage", "text": "local hit" },{ "pagePath ": "pages/comingSoon", "text": "coming soon" },{ "pagePath": "pages/search", "text ": "Movie search"}]}

Is the app. wxss page (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;}

Page display

Then there is the hotPage. wxml page:

<View class = "movies" wx: for = "{movies}" id = "{item. id }}" bindtap = "jumpTomore"> <view class = "myimage"> <image src = "{item. images. medium }}"> </image> </view> <view class = "moveInfo"> <view class = "title"> name: {item. title }}</view> <view class = "daoyan"> Director: {item. directors ["0"]. name }}</view> <view class = "yanyuanlist"> <view class = "left"> actors: </view> <view class = "right"> <block wx: for = "{item. casts }}" >{{ item. name }}</block> </view> <view class = "fenlei"> category: {item. genres }}</view> <view class = "year"> Release Date: {item. year }}</view> </view>

Then there is the hotPage. js page:

Var that; var page = 0; // more. jsPage (initial data on the {/*** page */data: {movies: []},/*** lifecycle function -- listen to page loading */onLoad: function (options) {that = this; that. linkNet (0) ;}, jumpTomore: function (e) {console. log (e. currentTarget. id); wx. navigateTo ({url: '/pages/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 );}})

Running Program Results

Then there is hotPage. wxss:

image{ width:350rpx; height:280rpx;}

The layout of the second page is the same as that of the first page, so you can copy the hotPage. wxml code of the first page directly;
Similarly, the comingSoon. js code is similar to the hotPage. js code. The only change is one:

Just change the url and data.

. Wxss code consistency;

The running result is as follows:

The code for the third page is as follows:

Search. wxml Page code:

<Input placeholder = "input keyword" bindinput = "myInput"/> <button bindtap = "mySearch"> Search </button> <view class = "movies" wx: for = "{movies}" id = "{item. id }}" bindtap = "jumpTomore"> <view class = "myimage"> <image src = "{item. images. medium }}"> </image> </view> <view class = "moveInfo"> <view class = "title"> name: {item. title }}</view> <view class = "daoyan"> Director: {item. directors ["0"]. name }}</view> <view class = "yanyuanlist"> <view class = "left"> actors: </view> <view class = "right"> <block wx: for = "{item. casts }}" >{{ item. name }}</block> </view> <view class = "fenlei"> category: {item. genres }}</view> <view class = "year"> Release Date: {item. year }}</view> </view>

Page code:

Var input; var that; // search. jsPage (initial data on the {/*** page */data: {movies: []},/*** lifecycle function -- listen to 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 })}})}})

. Wxss code is consistent with hotPage. wxss code;

The result of running the code is as follows:

The details page is displayed. After you click a video, the details page is displayed to view the details of the video:

More. wxml Page code:

<! -- More. wxml --> <image src = "{imageUrl}"> </image> <view class = "moveInfo"> <view class = "title"> Name: {title }</view> <view class = "director"> director: {director }}</view> <view class = "castleft"> Starring: </view> <view class = "casts" wx: for = "{casts}"> <block class = "castright" >{{ item. name }}</block> </view> <view class = "year"> year: {year }}</view> <view class = "rate"> score: {rate }}</view> <view class = "summary"> Description: {summary }}</view> </view>

More. js code:

Var that; // more. jsPage (initial data on the {/*** page */data: {title: 0, imageUrl: 0, director: 0, casts: [], year: 0, rate: 0, summary: 0},/*** lifecycle function -- listen to 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 })}})}})

The result of running the code is as follows:

Okay. All the code is shown in figure. Come on.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.