4.8 案例6 仿豆瓣电影微信小程序

第4章综合案例仿“豆瓣电影”微信小程序仿“豆瓣电影”微信小程序“豆瓣电影App”是一款用来购买电影票、查看影评的软件，主要界面如下。下面我们就来设计一款“豆瓣电影”微信小程序，用它可以查看上映的电影及电影详情内容“上映”界面“影院”界面“我看”界面详情“介绍”界面1、电影顶部页签切换效果电影界面的顶部有3个页签：“上映”“影院”“我看”。页签的切换会带动相应的内容进行切换显示。界面采用顶部页签切换方式，来完成各个页面的切换展示。顶部页签1、电影顶部页签切换效果添加一个“douban”项目，填写AppID，不使用云服务步骤一：添加“douban”项目添加“douban”项目1、电影顶部页签切换效果{"pages":["pages/movie/movie","pages/cinema/cinema","pages/me/me","pages/movieDetail/movieDetail"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#1A1A1A","navigationBarTitleText":"豆瓣电影","navigationBarTextStyle":"white"}}步骤二：进入app.json文件，添加“pages/movie/movie”“pages/cinema/cinema”“pages/me/

me”“pages/movieDetail/movieDetail”4个文件路径，删除默认创建的index、logs文件路径。将窗口导航栏背景色设置为黑色（#1A1A1A），导航标题设置为“豆瓣电影”，文字颜色设置为白色（white）。具体代码如下。1、电影顶部页签切换效果<viewclass="nav"><viewid="0"class="{{currentTab==0?'select':'normal'}}"bindtap="switchNav">上映</view><viewclass="line">|</view><viewid="1"class="{{currentTab==1?'select':'normal'}}"bindtap="switchNav">影院</view><viewclass="line">|</view><viewid="2"class="{{currentTab==2?'select':'normal'}}"bindtap="switchNav">我看</view></view>步骤三：进入movie.wxml文件，采用view视图容器布局顶部3个页签。设置两种样式，一种是选中样式select，另外一种是正常样式normal。定义currentTab变量，与页签索引值做比较。id为索引值。添加switchNav绑定事件。具体代码如下。1、电影顶部页签切换效果.nav{display:flex;flex-direction:row;background-color:#222222;}.select{width:32%;height:45px;line-height:45px;text-align:center;color:#ffffff;font-size:13px;border-bottom:10pxsolid#777777;}步骤四：进入movie.wxss文件，给nav、select、normal、line这4个class添加样式。.normal{width:32%;height:45px;line-height:45px;text-align:center;color:#ffffff;font-size:13px;}.line{height:45px;line-height:45px;font-size:25px;color:#666666;}界面效果图1、电影顶部页签切换效果Page({data:{currentTab:0},switchNav:function(e){varid=e.currentTarget.id;this.setData({currentTab:id});}})步骤五：进入movie.js文件，定义currentTab变量默认值为0。添加switchNav页签点击事件，点击时获取页签的id索引值，然后赋值给currentTab变量。这样就可以选中顶部页签进行相应的切换显示了。“上映”页签选中效果“影院”页签选中效果1、电影顶部页签切换效果<viewclass="nav"><viewid="0"class="{{currentTab==0?'select':'normal'}}"bindtap="switchNav">上映</view><viewclass="line">|</view><viewid="1"class="{{currentTab==1?'select':'normal'}}"bindtap="switchNav">影院</view><viewclass="line">|</view><viewid="2"class="{{currentTab==2?'select':'normal'}}"bindtap="switchNav">我看</view></view><swipercurrent="{{currentTab}}"style="height:{{winHeight}}px"><swiper-item><view>上映内容</view></swiper-item><swiper-item><view>影院内容</view></swiper-item><swiper-item><view>我看内容</view></swiper-item></swiper>步骤六：进入movie.wxml文件，布局页签内容。点击页签切换时，页签内容进行滑动切换，需要借助于swiper滑块视图组件。根据currentTab变量的索引值来判断显示swiper哪个面板的内容。具体代码如下。1、电影顶部页签切换效果Page({data:{currentTab:0,

winWidth:0,winHeight:0},onLoad:function(e){varpage=this;wx.getSystemInfo({success:function(res){console.log(res);

步骤七：进入movie.js文件，添加onLoad生命周期函数。使用wx.getSystemInfo获得窗口的宽度和高度，赋值给变量winWidth、winHeight，将winHeight作为页签内容的宽度。具体代码如下。page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});}})},switchNav:function(e){varid=e.currentTarget.id;this.setData({currentTab:id});}})2、电影海报轮播效果海报轮播效果是很多App软件和网站都会使用到的，它可以在有限的区域内动态地展示商品图片信息或者广告信息。“豆瓣电影”里也有海报轮播效果。海报轮播区域2、电影海报轮播效果<viewclass="nav"><viewid="0"class="{{currentTab==0?'select':'normal'}}"bindtap="switchNav">上映</view><viewclass="line">|</view><viewid="1"class="{{currentTab==1?'select':'normal'}}"bindtap="switchNav">影院</view><viewclass="line">|</view><viewid="2"class="{{currentTab==2?'select':'normal'}}"bindtap="switchNav">我看</view></view><swipercurrent="{{currentTab}}"style="height:{{winHeight}}px"><swiper-item><viewclass="haibao"><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"style="height:74px;"><blockwx:for="{{imgUrls}}"><swiper-item><imagesrc="{{item}}"class="silde-image"style="width:100%;height:74px;"></image></swiper-item></block></swiper></view>

</swiper-item><swiper-item><view>影院内容</view></swiper-item><swiper-item><view>我看内容</view></swiper-item></swiper>步骤一：将海报轮播的图片复制到douban项目。进入movie.wxml文件，进行海报轮播效果的界面布局。2、电影海报轮播效果Page({data:{currentTab:0,winWidth:0,winHeight:0,indicatorDots:false,autoplay:true,interval:5000,duration:1000,imgUrls:["/images/haibao/1.jpg","/images/haibao/2.jpg","/images/haibao/3.jpg","/images/haibao/4.jpg"]},步骤二：进入movie.js文件，定义海报轮播需要的变量值indicatorDots为False、autoplay为True、interval为5000、duration为1000、imgUrls为“/images/haibao/1.jpg”“/images/haibao/2.jpg”“/images/haibao/3.jpg”“/images/haibao/4.jpg”。onLoad:function(e){varpage=this;wx.getSystemInfo({success:function(res){console.log(res);page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});}})},switchNav:function(e){varid=e.currentTarget.id;this.setData({currentTab:id});}})海报轮播效果界面效果图3、电影列表方式布局“豆瓣电影”的电影列表布局采用每行3个的方式来进行，显示电影海报和电影名称电影列表3、电影列表方式布局步骤一：进入movie.js文件，定义loadMovies函数，使用wx.request来获取“豆瓣电影”的电影列表信息，在onLoad函数里调用loadMovies函数。同时定义movies变量，并将电影列表赋值给movies。Page({data:{currentTab:0,winWidth:0,winHeight:0,indicatorDots:false,autoplay:true,interval:5000,duration:1000,imgUrls:["/images/haibao/1.jpg","/images/haibao/2.jpg","/images/haibao/3.jpg","/images/haibao/4.jpg“],movies:[]},onLoad:function(e){varpage=this;wx.getSystemInfo({success:function(res){console.log(res);page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});}});this.loadMovies();},switchNav:function(e){varid=e.currentTarget.id;this.setData({currentTab:id});},loadMovies:function(){varpage=this;wx.request({3、电影列表方式布局url:'/movie/list.json',data:{type:'hot',offset:0,limit:10},method:'GET',success:function(res){varmovies=res.data.data.movies;console.log(movies);varsize=movies.length; //电影总数量

varlen=parseInt(size/3); //每行放置3个电影，计算出需要多少行 console.log(len);page.setData({movies:movies});page.setData({winHeight:(len+1)*230}); //动态地设置电影内容的高度 } })}})3、电影列表方式布局步骤二：获取电影列表信息后，进入movie.wxml文件。电影海报图片采用中等大小图片，宽度设置为100，高度设置为150。绑定loadDetail查看电影详情事件。<viewclass="nav"><viewid="0"class="{{currentTab==0?'select':'normal'}}"bindtap="switchNav">上映</view><viewclass="line">|</view><viewid="1"class="{{currentTab==1?'select':'normal'}}"bindtap="switchNav">影院</view><viewclass="line">|</view><viewid="2"class="{{currentTab==2?'select':'normal'}}"bindtap="switchNav">我看</view></view><swipercurrent="{{currentTab}}"style="height:{{winHeight}}px"><swiper-item><viewclass="haibao"><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"

style="height:74px;"><blockwx:for="{{imgUrls}}"><swiper-item><imagesrc="{{item}}"class="silde-image"style="width:100%;height:74px;"></image></swiper-item></block></swiper>3、电影列表方式布局</view>

<viewclass="items"><blockwx:for="{{movies}}"><viewclass="item"bindtap="loadDetail"id="{{item.id}}"><view><imagesrc="{{item.img}}"style="width:100px;height:150px;"></image></view><viewclass="name"><text>{{item.nm}}</text></view></view></block></view></swiper-item><swiper-item><view>影院内容</view></swiper-item><swiper-item><view>我看内容</view></swiper-item></swiper>3、电影列表方式布局步骤三：进入movie.wxss文件，给items、item、name这3个class添加样式。.nav{display:flex;flex-direction:row;background-color:#222222;}.select{width:32%;height:45px;line-height:45px;text-align:center;color:#ffffff;font-size:13px;border-bottom:10pxsolid#777777;}.normal{width:32%;height:45px;line-height:45px;text-align:center;color:#ffffff;font-size:13px;}.line{height:45px;line-height:45px;font-size:25px;color:#666666;}.items{background-color:#f2f2f2;height:1000px;}.items{background-color:#f2f2f2;height:1000px;}.item{width:32%;height:200px;margin-top:10px;text-align:center;float:left;margin-left:1%;}.name{font-size:14px;font-weight:bold;margin:5px;}4、电影详情介绍页布局在电影列表界面里，点击电影海报图片，可以查看具体的电影详情介绍。电影详情介绍页在顶部也是采用页签切换的方式进行布局，布局方式和“电影”页面一样。页签的下面是介绍电影相关信息的区域，接着是“我想看”“看过了”两个按钮，再往下面是电影介绍、导演演员列表的展现，如图4.46所示。图4.46电影详情页步骤一：进入movie.js文件，添加loadDetail函数。跳转到详情页里需要把电影的id带过去，详情信息需要电影id才能查得到。具体代码如下。Page({data:{currentTab:0,winWidth:0,winHeight:0,indicatorDots:false,autoplay:true,interval:5000,duration:1000,imgUrls:["/images/haibao/1.jpg","/images/haibao/2.jpg","/images/haibao/3.jpg","/images/haibao/4.jpg"]},onLoad:function(e){varpage=this;wx.getSystemInfo({success:function(res){console.log(res);page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});}});this.loadMovies();},switchNav:function(e){varid=e.currentTarget.id;this.setData({currentTab:id});},4、电影详情介绍页布局4、电影详情介绍页布局loadMovies:function(){varpage=this;wx.request({url:'/movie/list.json',data:{type:'hot',offset:0,limit:10},method:'GET',success:function(res){varmovies=res.data.data.movies;console.log(movies);varsize=movies.length; //电影总数量

varlen=parseInt(size/3); //每行放置3个电影，计算出需要多少行

console.log(len);page.setData({movies:movies});page.setData({winHeight:(len+1)*230}); //动态地设置电影内容的高度

}})},loadDetail:function(e){varid=e.currentTarget.id;wx.navigateTo({url:'../movieDetail/movieDetail?id='+id})}})步骤二：进入movieDetail.js文件，定义3个变量：电影movie、导演directors、演员casts。在onLoad函数中，根据传递过来的id查找电影详情，然后赋值给movie、directors、casts。具体代码如下。Page({data:{movie:{},directors:[],casts:[]},onLoad:function(e){varpage=this;wx.request({url:'/movie/'+e.id+'.json',header:{"Content-Type":"json"},success:function(res){varmovie=res.data.data.MovieDetailModel;console.log(movie);page.setData({movie:movie});page.setData({directors:movie.directors});page.setData({casts:movie.casts});wx.setNavigationBarTitle({title:movie.title})}})}})4、电影详情介绍页布局步骤三：进入movieDetail.wxml文件，进行顶部页签界面布局以及页签内容布局。具体代码如下。<viewclass="nav"><viewid="0"class="{{currentTab==0?'select':'normal'}}"bindtap="switchNav">介绍</view><viewclass="line">|</view><viewid="1"class="{{currentTab==1?'select':'normal'}}"bindtap="switchNav">图片</view><viewclass="line">|</view><viewid="2"class="{{currentTab==2?'select':'normal'}}"bindtap="switchNav">短评</view><viewclass="line">|</view><viewid="3"class="{{currentTab==3?'select':'normal'}}"bindtap="switchNav">影评</view></view><swipercurrent="{{currentTab}}"style="height:1200px;background-color:#F9F9F9;"><swiper-item><view>介绍内容</view></swiper-item><swiper-item><view>图片内容</view></swiper-item><swiper-item><view>短评内容</view></swiper-item><swiper-item><view>影评内容</view></swiper-item></swiper>4、电影详情介绍页布局4、电影详情介绍页布局步骤四：进入movieDetail.wxss文件，给class添加相应的样式。具体代码如下。.nav{display:flex;flex-direction:row;background-color:#222222;}.select{width:32%;height:30px;line-height:30px;text-align:center;color:#ffffff;font-size:13px;border-bottom:8pxsolid#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;}步骤五：进入movieDetail.js文件，定义变量currentTab、winWidth、winHeight，并进行赋值。具体代码如下。Page({data:{currentTab:0,winWidth:0,winHeight:0,movie:{},directors:[],casts:[]},onLoad:function(e){varpage=this;wx.request({url:'/movie/'+e.id+'.json',header:{"Content-Type":"json"},success:function(res){varmovie=res.data.data.MovieDetailModel;console.log(movie);page.setData({movie:movie});page.setData({directors:movie.directors});page.setData({casts:movie.casts});wx.setNavigationBarTitle({title:movie.title})}});

wx.getSystemInfo({success:function(res){console.log(res);page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});}});},4、电影详情介绍页布局switchNav:function(e){varid=e.currentTarget.id;this.setData({currentTab:id});}})顶部页签切换界面效果如图4.47所示。4、电影详情介绍页布局步骤六：进入movieDetail.wxml文件，进行电影详情、电影简介、导演和演员的界面布局设计。具体代码如下。<viewclass="nav"><viewid="0"class="{{currentTab==0?'select':'normal'}}"bindtap="switchNav">介绍</view><viewclass="line">|</view><viewid="1"class="{{currentTab==1?'select':'normal'}}"bindtap="switchNav">图片</view><viewclass="line">|</view><viewid="2"class="{{currentTab==2?'select':'normal'}}"bindtap="switchNav">短评</view><viewclass="line">|</view><viewid="3"class="{{currentTab==3?'select':'normal'}}"bindtap="switchNav">影评</view></view><swipercurrent="{{currentTab}}"style="height:1200px;background-color:#F9F9F9;">

<swiper-item><viewclass="movieInfo"><view><imagesrc="{{movie.img}}"style="width:100px;height:150px"></image></view><viewclass="detail">4、电影详情介绍页布局<view><textclass="score">评分：{{movie.sc}}</text>（{{movie.snum}}人评分）</view><view><text>{{movie.rt}}</text></view><view><textclass="desc">{{movie.cat}}</text></view><view><textclass="desc">{{movie.src}}</text></view><viewclass="buy">选座购票</view></view></view>

<viewclass="opr"><view>我想看</view><view>看过了</view></view><viewclass="intro"><text>{{movie.dra}}</text></view></swiper-item><swiper-item><view>图片内容</view></swiper-item>