微信小程序开发电影详情页面设计

（5）如图，修改“douban.wxml”,在图中阴影位置输入如下代码。
bindtap='loadDetail' id='{{item.id}}'
5
（6）如图，修改“douban.js”,在图中阴影位置输入如下代码。
loadDetail: function (e) { var id = e.currentTarget.id; wx.navigateTo({ url: '../detail/detail?id=' + id })
movie: movie }); _self.setData({
directors: movie.directors }); _self.setData({
casts: movie.casts }); wx.setNavigationBarTitle({
title: movie.title }) } }); }, switchNav: function (e) { var id = e.currentTarget.id; this.setData({ currentTab: id }); }, getDataKey: function () { return '0b2bdeda43b5688921839c8ecb20399b'; } })
（4）编辑“detail.js”文件，代码如下。
Page({ 4
data: { currentTab: 0, movie: {}, directors: [], casts: []
}, onLoad: function (options) {
var _self = this; var key = this.getDataKey(); wx.request({
3
color:#FC7F60; } .desc{
font-weight: bold; } .buy{
width: 155px; height:40px; line-height: 40px; background-color: #2DADDC; text-align: center; color: #ffffff; } .opr{ display: flex; flex-direction: row; } .opr view{ width: 45%; height: 40px; line-height: 40px; margin: 0 auto; background-color: #EEEEEE; font-size: 13px; text-align: center; border-radius: 3px; } .intro{ background-color: #F1F1F1; margin: 10px; font-size: 13px; padding: 10px; line-height: 15px; } .personInfo{ display: flex; flex-direction:row; margin: 15px; background-color: #F1F1F1; } .name{ font-size: 14px; font-weight: bold; line-height: 100px; margin-left: 10px; }
} .select{
width: 32%; height: 30px; line-height: 30px; text-align: center; color: #ffffff; font-size: 13px; border-bottom: 8px solid #777777; } .normal{ width: 32%; height: 30px; line-height: 30px; text-align: center; color: #ffffff; font-size: 13px; } .line{ height: 30px; line-height: 30px; font-size:15px; color: #666666; } .movieInfo{ display: flex; flex-direction:row; margin: 15px; } .detail{ margin-left:15px; font-size: 13px; } .detail view{ margin-bottom: 7px; } .score{
</view> <view class="detail">
<view> <text class="score">评分：{{movie.rating.average}}（{{movie.ratings_count}}人评分）</text>
</view> <view>
<text>{{movie.year}}年上映</text> </view> <view>
<image src="{{item.avatars.small}}" style="width:70px;height:100px"></image> </view> <view class="name">
{{}} [导演] </view> </view> </block> <block wx:for="{{casts}}"> <view class="personInfo"> <view>
2
<swiper-item> <view>短评内容</view>
</swiper-item> <swiper-item>
<view>影评内容</view> </swiper-item> </swiper>
（3）编辑“detail.wxss”文件，代码如下。
.nav{ display: flex; flex-direction: row; background-color: #222222;
<image src="{{item.avatars.small}}" style="width:70px;height:100px"></image> </view> <view class="name">
{{}} </view> </view> </block> </swiper-item> <swiper-item> <view>图片内容</view> </swiper-item>
</view> <swiper current="{{currentTab}}" style="height:1200px;background-color:#F9F9F9;">
<swiper-item> <view class="movieInfo"> <view> <image src=&#="width:100px;height:150px"></image> 1
url: 'https:///v2/movie/subject/' + options.id + '?apikey=' + key, header: {
"Content-Type": "json" }, success: function (res) {
console.log(res); var movie = res.data; _self.setData({
<text class="desc">{{movie.genres[0]}}</text> </view> <view>
<text class="desc">{{movie.countries[0]}}</text> </view> <view class="buy">选座购票</view> </view> </view> <view class="opr"> <view>我想看</view> <view>看过了</view> </view> <view class="intro"> <text>{{movie.summary}}</text> </view> <block wx:for="{{directors}}"> <view class="personInfo"> <view>
电影详情页面设计
（1）如图，在“pages”目录下新建目录“detail”，在“detail”目录下新建页面“detail”。
（2）编辑“detail.wxml”文件，代码如下。
<view class="nav"> <view id="0" class="{{currentTab == 0?'select':'normal'}}" bindtap="switchNav">介绍</view> <view class="line">|</view> <view id="1" class="{{currentTab == 1?'select':'normal'}}" bindtap="switchNav">图片</view> <view class="line">|</view> <view id="2" class="{{currentTab == 2?'select':'normal'}}" bindtap="switchNav">短评</view> <view class="line">|</view> <view id="3" class="{{currentTab == 3?'select':'normal'}}" bindtap="switchNav">影评</view>