**重點看本例index.js代碼** **頁面目錄結構如下：**  **頁面渲染效果如下：**  ## 1.模板頁template編寫 ### 1.1template-star ~~~ <template name="templateStar"> <view class="images"> <block wx:for="{{stars}}" wx:key="index"> <image src="{{item?'/images/icon/star.png':'/images/icon/none-star.png'}}"></image> </block> </view> </template> ~~~ ~~~ .images>image{ width: 20rpx; height: 20rpx; } .images{ height: 60rpx; } ~~~ ### 2.1template-movies-item ~~~ <import src="../star/template-star"></import> <template name="templateMoviesItem"> <view class="movie-item"> <image class="mitem" src="{{imgUrl}}"></image> <title>{{title}}</title> <view class="average"> <template is="templateStar" data="{{stars}}"></template> <text>{{average}}</text> </view> </view> </template> ~~~ ~~~ @import "../star/template-star.wxss"; .mitem{ width: 220rpx; height: 280rpx; } .movie-item{ display: flex; flex-direction: column; } .movie-item>title{ font-size: 31rpx; margin-top: 15rpx; } .average{ display: flex; align-items: center; } .average>text{ margin-left: 12rpx; font-size: 25rpx; } ~~~ ### 1.3template-movies-detail ~~~ <import src="../movies-item/template-movies-item"></import> <template name="templateMoviesDetail"> <view class="head"> <text>{{title}}</text> <text class="more">更多> </text> </view> <view class="tmovie-itm"> <block wx:for="{{movies}}" wx:key="index"> <template is="templateMoviesItem" data="{{...item}}"></template> </block> </view> <view class="line"></view> </template> ~~~ ~~~ @import "../movies-item/template-movies-item.wxss"; .head{ display: flex; justify-content: space-between; padding: 25rpx 20rpx; font-size: 34rpx; } .head .more{ color: aqua; } .tmovie-itm{ display: flex; justify-content: space-around; } ~~~ ## 2.自定義方法util編寫 ~~~ function http(url, callback, type) { wx.request({ url, // header: {}, // 設置請求的 header header: { 'Content-Type': 'json' }, success: function (res) { // success 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, star:star } ~~~ ## 主頁面index編寫 ~~~ //index.js //獲取應用實例 const app = getApp(); const douban = "http://douban.uieee.com/v2/movie/"; import utils from "../../utils/util"; const http = utils.http; const star = utils.star; Page({ data:{ in_theaters:{} }, onLoad() { var inTheatersurl = douban + "in_theaters" + "?start=0&count=3"; var comingSoonurl = douban + "coming_soon" + "?start=0&count=3"; var top250url = douban + "top250" + "?start=0&count=3"; http(inTheatersurl,this.handleData,"in_theaters"); http(comingSoonurl,this.handleData,"coming_soon"); http(top250url,this.handleData,"top250"); }, handleData(res,type) { var subjects = res.data.subjects; var title=res.data.title; var movies = []; subjects.forEach(ele => { var temp = { imgUrl: ele.images.small, title: ele.title, stars: star(ele.rating.stars), average: ele.rating.average, } movies.push(temp) }); var data={}; /* js給對象賦值屬性方式：對象名[屬性名]={} */ data[type]={ movies, type, title } /* console.log(data) console.log(data.in_theaters) */ /* this.setData({ 數組 }) */ /* this.setData({ 屬性 }) */ /* this.setData({ 對象 }) */ /* this.setData(對象內容) */ this.setData( data ) } }) ~~~ ~~~ <!-- "pages/index/index.js" --> <import src="../../template/movies-detail/template-movies-detail"></import> <template is="templateMoviesDetail" data="{{...in_theaters}}"></template> <template is="templateMoviesDetail" data="{{...coming_soon}}"></template> <template is="templateMoviesDetail" data="{{...top250}}"></template> ~~~ ~~~ @import "../../template/movies-detail/template-movies-detail"; ~~~