[TOC] > 此版本為基礎版，實現了數據的拿取與渲染 準備工作：創建兩個頁面"template/movie-detail/movie-detail"和"pages/index/index" ## 1.創建模板頁 "template/movie-detail/movie-detail" movie-detail.wxml寫入 ~~~ <view class="movie-item"> <image src="{{imgUrl}}"></image> <view>{{name}}</view> <view class='average'>評分 <text>{{average}}</text></view> </view> ~~~ ## 2.創建主頁面 "pages/index/index" index.wxml寫入 ~~~ <!-- 導入模板頁 --> <import src="/template/movie-detail/movie-detail"></import> <view class="container"> <block wx:for="{{data}}" wx:key="index"> <view class="content"> <template is="movieDetail" data="{{...item}}"></template> </view> </block> </view> ~~~ ## 3.遠程拿數據 index.js寫入 ~~~ //獲取應用實例 const app = getApp() Page({ onLoad() { var self = this; var data = []; wx.request({ url: 'http://douban.uieee.com/v2/movie/top250', method: 'GET', header: { 'Content-Type': 'json' }, success: function (res) { var subjects = res.data.subjects; wx: for (const key in subjects) { var imgUrl = subjects[key].images.small; var name = subjects[key].title; var average = subjects[key].rating.average; var temp = {}; temp.name = name; temp.imgUrl = imgUrl; temp.average = average; data.push(temp); }; self.setData({ data }) } }) } }) ~~~ ## 4.對頁面進行修飾 ~~~ .container{ width: 96%; margin-left: auto; margin-right: auto; } image{ width: 220rpx; height: 270rpx; } .content{ width: 33.333%; float: left; font-size: 13px; display: flex; flex-direction: column; } ~~~