[TOC] # 這個頁面要用封裝來做 封裝里面套封裝 ## 建一個文件 utils/utils.js * 用來存儲函數 ``` function http(url,callback,type){ wx.request({ url, header:{ 'Content-type':'json' }, success:function(res){ callback(res,type) } }); } function star(stars) { var value = stars.slice(0, 1); var arr = []; for(let i = 0;i<5 ;i++){ if(i<value){ arr.push(1) } else( arr.push(0) ) } return arr; } // module.exports = { // http: http // } function slice(title){ if(title.length>6){ title = title.slice(0,6) + '...'; } return title } function list(subjects){ var movies = []; subjects.forEach(ele => { var average = ele.rating.average; var title = slice(ele.title); var stars = star(ele.rating.stars); var imgUrl = ele.images.small; var id = ele.id; var temp = { average, title, stars, imgUrl, id, } movies.push(temp); }) return movies; } export default{ http, star, list, } ``` ## star 封裝評分星 * pages/star/star ### star.wxml ``` <template name="starTemplate"> <view class="star"> <block wx:for="{{stars}}" wx:key="index"> <image wx:if="{{item==1}}" src="/images/icon/star.png" /> <image wx:if="{{item==0}}" src="/images/icon/none-star.png" /> </block> </view> </template> ``` ### star.wxss ``` .star image{ width: 20rpx; height: 20rpx; margin-right: 5rpx ; } ``` ## movie-item 用來封裝一個小單元的顯示 * pages/movies/movie-item/movie-item ### movie-item.wxml ``` <import src="../star/star-template"></import> <template name="movieItem"> <view class="movie-item"> <image src="{{imgUrl}}" class="banner" mode="aspectFit" catchtap='onClick' data-id='{{id}}'/> <text class='title'>{{title}}</text> <view class="evaluate"> <template is="starTemplate" data="{{stars}}"></template> <text>{{average}}</text> </view> </view> </template> ``` ### movie-item.wxss ``` @import '../star/ster-template'; .movie-item{ display: flex; flex-direction: column; } .banner{ width: 200rpx; height: 280rpx; } .evaluate{ display: flex; } .title{ margin: 15rpx 0; } ``` ## movie-grid 電影頁的分類格 * pages/movies/movie-grid/movie-grid ### movie-grid.wxml ``` <import src="../movie-item/movie-item"></import> <template name="movieItemTemplate" > <view class='movie-grid'> <view class='more'> <text>{{title}}</text> <text catchtap="more" data-type="{{type}}" data-title="{{title}}">更多</text> </view> <view class='movie-grid-item'> <!-- <template is="movieItem" data="{{...item}}"></template> --> <block wx:for="{{movies}}" wx:key="index"> <template is="movieItem" data="{{...item}}" ></template> </block> </view> </view> </template> ``` ### movie-grid.wxss ``` @import "../movie-item/movie-item"; .movie-grid-item{ display: flex; justify-content: space-between; } .movie-grid{ padding: 15rpx; margin: 20rpx 0; background: #fff; } .more{ display: flex; justify-content: space-between; margin: 20rpx 0; font-size: 30rpx; } ``` ## movie ### movie.js ``` const app = getApp(); const douban = app.globalData.doubanUrl; import utils from "../../utils/utils" var http = utils.http; var star = utils.star; var list = utils.list Page({ data:{ "in_theaters":{}, "coming_soon": {}, "top250": {} }, onLoad:function(options){ var self = this; var count = "?start=0&count=3"; var inTheatersUrl = douban+"in_theaters"+ count; var comingSoon = douban + "coming_soon" + count; var top250 = douban + "top250" + count; http(inTheatersUrl, this.handleData,"in_theaters") http(comingSoon, this.handleData,"coming_soon") http(top250,this.handleData,"top250") }, handleData(res,type){ var title = res.data.title; var subjects = res.data.subjects; var movies = list(subjects); var readyData ={}; readyData[type]={ movies, title, type }; this.setData(readyData); }, more(event) { var type = event.currentTarget.dataset.type; var title = event.currentTarget.dataset.title; wx.navigateTo({ url: 'movie-more/movie-more?type=' + type+"&title=" + title }) }, onClick(event) { var id = event.currentTarget.dataset.id; wx.navigateTo({ url: '/pages/web-page/web-page?id=' + id, }) } }) ``` ### movie.wxml ``` <!--pages/movie/movie.wxml--> <import src="./movie-grid/movie-grid-template"></import> <template is="movieItemTemplate" data="{{...in_theaters}}"></template> <template is="movieItemTemplate" data="{{...coming_soon}}"></template> <template is="movieItemTemplate" data="{{...top250}}"></template> ``` ### movie.wxss ``` /* pages/movie/movie.wxss */ @import "./movie-grid/movie-grid-template"; page{ font-size: 30rpx; background: #eee; } ```