[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; } ~~~