## movies-detail.xxx  [TOC] ### 1.movies-detail.wxml ``` <view class="movie-detail"> <image src="{{imgUrl}}"/> <text> {{content}} </text> </view> ``` >页面显示图片及内容大概介绍 ***** ### 2.movies-detail.wxss ``` .movie-detail{ padding:20px; display: flex; flex-direction: column; align-items: center; } .movie-detail image{ width: 300rpx; height: 400rpx; } ``` >仍旧使用flex布局， flex-direction: column;将内容呈现改成纵向排列 align-items: center;实现内容居中 ***** ### 3.movies-detail.js ``` var app = getApp(); Page({ data: { }, onLoad: function (options) { var self = this; //声明url地址，将点击事件获取的id值添加在后面从而获取该电影单独的json数据 var url = app.webUrl+options.id; console.log(url); //请求数据 wx.request({ url: url, header: { 'Content-Type': 'json' }, success: function(res) { var imgUrl = res.data.image; var content = res.data.summary; self.setData({ imgUrl, content, }) } }) }, }) ```