微信小程序电影列表（一）1.

　　当我们再次见面的时候，不得比现在优秀一点点嘛~　　

tab选项卡2.

使用tab选项卡，首先我们等去之前新闻列表的welcome.js文件中修改一个地方：

//页面之间平行跳转，之前的页面被关闭，不可返回，进入同级界面wx.navigateTo({url:'../posts/post',});},3.

122100版本中，如果跳转到一个带有tab选项卡的页面，必须用wx.switchTab这个新增方法。请更改为这个方法。但是如果要跳转到一个不带tab选项卡的页面，还是需要使用redirect或者navigate。

4.

效果图：

5.

　　　　

6.

微信小程序tabBar官方说明文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

7.

tabBar使用案例：

"tabBar":{"list":[{"pagePath":"","text":"主页"},{"pagePath":"","text":"日志"}]}8.

新建movies文件夹，并创建对应的四个文件

9.

　　　　

10.

在app.js文件中添加tarBar设置

{"pages":["pages/posts/post","pages/movies/movies","pages/welcome/welcome","pages/posts/post-detail/post-detail"],"window":{"navigationBarBackgroundColor":"#405f80"},"tabBar":{"list":[{"pagePath":"pages/movies/movies","text":"电影"},{"pagePath":"pages/posts/post","text":"文章"}]}}11.

　　　　

设置tabTar图标12.

修改app.json文件，为tabbarlist设置图片路径：

{"pages":["pages/posts/post","pages/movies/movies","pages/welcome/welcome","pages/posts/post-detail/post-detail"],"window":{"navigationBarBackgroundColor":"#405f80"},"tabBar":{"borderStyle":"white","list":[{"pagePath":"pages/posts/post","text":"阅读","iconPath":"/images/tab/yuedu.png","selectedIconPath":"/images/tab/yuedu_hl.png"},{"pagePath":"pages/movies/movies","text":"电影","iconPath":"/images/tab/dianying.png","selectedIconPath":"/images/tab/dianying_hl.png"}]}}13.

　　　　　

创建电影界面14.

使用template来构建电影界面

15.

创建文件目录结构

16.

　　　　

17.

stars-template.wxml文件作为评分（五颗五角星和得分）的模板

18.

　　

templatename"starsTempalte"viewimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imagetext0.0/text/view/template19.

movie-template.wxml文件作为异步电影的（海报名称评分）的模板

20.

　　

importsrc"../stars/stars-template.wxml"/templatename"movieTemplate"viewimagesrc'/images/yourname.jpg'/imagetext你的名字/texttemplateis"starsTempalte"//view/template21.

movie-list-template.wxml文件作为一列电影（分类的名称更多按钮包含三部电影）的模板

22.

　　

importsrc"../movie/movie-template.wxml"/templatename"movieListTemplate"viewviewtext正在热映/textviewtext更多/textimagesrc'/images/dy/arrow-right.png'/image/view/viewtemplateis"movieTemplate"/templateis"movieTemplate"/templateis"movieTemplate"//view/template23.

将模板构建在电影页面中：

24.

moview.wxml文件

importsrc"movie-list/movie-list-template.wxml"/viewtemplateis"movieListTemplate"/templateis"movieListTemplate"/templateis"movieListTemplate"//view25.

还没有加样式，比较丑，但是元素都设置成功！

26.

　　　　

编写样式27.

编写评分的样式stars-template.wxss

.stars-container{display:flex;flex-direction:row;}.stars{display:flex;flex-direction:row;height:17rpx;margin-right:24rpx;margin-top:6rpx;}.starsimage{padding-left:3rpx;height:17rpx;width:17rpx;}.star-score{color:#1f3463;}28.

编写电影海报和名称的样式movie-template.wxss

/*导入写好的评分的样式*/@import"../stars/stars-template.wxss";.movie-container{display:flex;flex-direction:column;padding:022rpx;}.movie-img{width:200rpx;height:270rpx;padding-bottom:20rpx;}.movie-title{margin-bottom:16rpx;font-size:24rpx;}29.

编写三部电影排列的样式movie-list-template.wxss

@import"../movie/movie-template.wxss";.movie-list-container{background-color:#fff;display:flex;flex-direction:column;}.inner-container{margin:0auto20rpx;}.movie-head{padding:30rpx20rpx22rpx;/*display:flex;flex-direction:row;justify-content:space-between;*/}.slogan{font-size:24rpx;}.more{float:right;}.more-text{vertical-align:middle;margin-right:10rpx;color:#1f4ba5;}.more-img{width:9rpx;height:16rpx;vertical-align:middle;}.movies-container{display:flex;flex-direction:row;}30.

编写电影界面整体样式movies.wxss

@import"movie-list/movie-list-template.wxss";31.

　　

从服务器获取数据32.

我们将使用豆瓣的API接口获取数据

33.

　　豆瓣API官网：https://developers.douban.com/wiki/?titleguide

34.

注意！因为现在很多小程序学习视频都是拿豆瓣做实验，来自小程序的调用过多，豆瓣来自于小程序的调用被禁止。解决方法：将https://www.api.douban.com换成代理https://douban.uieee.com。亲测有效！

35.

修改movies.wxml文件代码

importsrc"movie-list/movie-list-template.wxml"/viewclass'container'viewclass"movies-template"templateis"movieListTemplate"//viewviewclass"movies-template"templateis"movieListTemplate"//viewviewclass"movies-template"templateis"movieListTemplate"//view/view36.

修改movise.wxss文件代码

@import"movie-list/movie-list-template.wxss";.container{background-color:#f2f2f2;}.movies-template{margin-bottom:30rpx;}37.

修改movises.json文件代码

{"navigationBarTitleText":"光与影"}38.

　　

39.

将豆瓣API连接放进全局变量，即修改app.js文

App({globaData:{//指代音乐是否被播放g_isPlayingMusic:false,//哪一个音乐正在被播放g_currentMusicPostId:null,//豆瓣接口的全局变量doubanBase:"https://douban.uieee.com"}})40.

修改movise.js文件，获取豆瓣正在热映、即将上映、top250三组数据

//获取全局的appvarappgetApp();Page({//RESTFULAPIjson//SOAPXML用的相当少/***页面的初始数据*/data:{},/***生命周期函数--监听页面加载*/onLoad:function(event){//正在热映varinTheatersUrlapp.globaData.doubanBase+"/v2/movie/in_theaters";//即将上映varcomingSoonUrlapp.globaData.doubanBase+"/v2/movie/coming_soon";//前250vartop250Urlapp.globaData.doubanBase+"/v2/movie/top250";this.getMovieListData(inTheatersUrl);this.getMovieListData(inTheatersUrl);this.getMovieListData(inTheatersUrl);},getMovieListData:function(url){wx.request({url:url,method:'GET',header:{'content-type':'application/xml'//豆瓣一定不能是json},success:function(res){console.log(res)},fail:function(error){console.log(error)}})}})41.

默认每组数据20条数据，我们只需要三条，我们需要传参数设置只每组获取三条数据movise.js

//获取全局的appvarappgetApp();Page({//RESTFULAPIjson//SOAPXML用的相当少/***页面的初始数据*/data:{},/***生命周期函数--监听页面加载*/onLoad:function(event){//正在热映varinTheatersUrlapp.globaData.doubanBase+"/v2/movie/in_theaters"+"?start0count3";//即将上映varcomingSoonUrlapp.globaData.doubanBase+"/v2/movie/coming_soon"+"?start0count3";//前250vartop250Urlapp.globaData.doubanBase+"/v2/movie/top250"+"?start0count3";this.getMovieListData(inTheatersUrl);this.getMovieListData(inTheatersUrl);this.getMovieListData(inTheatersUrl);},getMovieListData:function(url){wx.request({url:url,method:'GET',header:{'content-type':'application/xml'//豆瓣一定不能是json},success:function(res){console.log(res)},fail:function(error){console.log(error)}})}})处理接收过来的方法42.

movies.js文件：获取豆瓣数据

//获取全局的appvarappgetApp();Page({//RESTFULAPIjson//SOAPXML用的相当少/***页面的初始数据*/data:{inTheaters:{},comingSoon:{},top250:{}},/***生命周期函数--监听页面加载*/onLoad:function(event){//正在热映varinTheatersUrlapp.globaData.doubanBase+"/v2/movie/in_theaters"+"?start0count3";//即将上映varcomingSoonUrlapp.globaData.doubanBase+"/v2/movie/coming_soon"+"?start0count3";//前250vartop250Urlapp.globaData.doubanBase+"/v2/movie/top250"+"?start0count3";this.getMovieListData(inTheatersUrl,"inTheaters");this.getMovieListData(comingSoonUrl,"comingSoon");this.getMovieListData(top250Url,"top250");},getMovieListData:function(url,settedKey){varthatthis;wx.request({url:url,method:'GET',header:{'content-type':'application/xml'//豆瓣一定不能是json},success:function(res){that.procseeDoubanData(res.data,settedKey)},fail:function(error){console.log(error)}})},//处理数据函数procseeDoubanData:function(moviesDouban,settedKey){varmovies[];for(varidxinmoviesDouban.subjects){varsubjectmoviesDouban.subjects[idx];vartitlesubject.title;if(title.length6){titletitle.substring(0,6)+"···";}vartemp{title:title,//电影名称average:subject.rating.average,//评分coverageUrl:subject.images.large,//海报movieId:subject.id//id}movies.push(temp);varreadyData{};readyData[settedKey]{movies:movies,}//数据绑定this.setData(readyData);}},})43.

movies.wxml文件：与数据进行绑定

importsrc"movie-list/movie-list-template.wxml"/viewclass'container'viewclass"movies-template"templateis"movieListTemplate"data"{{...inTheaters}}"//viewviewclass"movies-template"templateis"movieListTemplate"data"{{...comingSoon}}"//viewviewclass"movies-template"templateis"movieListTemplate"data"{{...top250}}"//view/view44.

movies-list-template.wxml文件

importsrc"../movie/movie-template.wxml"/templatename"movieListTemplate"viewclass'movie-list-container'viewclass'inner-container'viewclass'movie-head'textclass'slogan'正在热映/textviewclass'more'textclass'more-text'更多/textimageclass'more-img'src'/images/dy/arrow-right.png'/image/view/viewviewclass'movies-container'blockwx:for"{{movies}}"wx:for-item"movie"templateis"movieTemplate"data"{{...movie}}"/!--templateis"movieTemplate"/templateis"movieTemplate"/--/block/view/view/view/template45.

修改stars-template.wxml文件

templatename"starsTempalte"viewclass'stars-container'viewclass'stars'imagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/none-star.png'/image/viewtextclass'star-score'{{average}}/text/view/template46.

　　　　

编写stars（评分）组件47.

movies.js

varutilrequire('../../utils/utils.js')//获取全局的appvarappgetApp();Page({//RESTFULAPIjson//SOAPXML用的相当少/***页面的初始数据*/data:{//下面三个必须写！！！inTheaters:{},comingSoon:{},top250:{}},/***生命周期函数--监听页面加载*/onLoad:function(event){//正在热映varinTheatersUrlapp.globaData.doubanBase+"/v2/movie/in_theaters"+"?start0count3";//即将上映varcomingSoonUrlapp.globaData.doubanBase+"/v2/movie/coming_soon"+"?start0count3";//前250vartop250Urlapp.globaData.doubanBase+"/v2/movie/top250"+"?start0count3";this.getMovieListData(inTheatersUrl,"inTheaters","正在热映");this.getMovieListData(comingSoonUrl,"comingSoon","即将上映");this.getMovieListData(top250Url,"top250","豆瓣Top250");},getMovieListData:function(url,settedKey,cagetoryTitle){varthatthis;wx.request({url:url,method:'GET',header:{'content-type':'application/xml'//豆瓣一定不能是json},success:function(res){that.procseeDoubanData(res.data,settedKey,cagetoryTitle)},fail:function(error){console.log(error)}})},//处理数据函数procseeDoubanData:function(moviesDouban,settedKey,cagetoryTitle){varmovies[];for(varidxinmoviesDouban.subjects){varsubjectmoviesDouban.subjects[idx];vartitlesubject.title;if(title.length6){titletitle.substring(0,6)+"···";}//[1,1,1,1,1][1,1,1,0,0]vartemp{stars:util.converToStarsArray(subject.rating.stars),//评分，星星title:title,//电影名称average:subject.rating.average,//评分coverageUrl:subject.images.large,//海报movieId:subject.id//id}movies.push(temp);varreadyData{};readyData[settedKey]{cagetoryTitle:cagetoryTitle,movies:movies,}//数据绑定this.setData(readyData);}},})48.

在根目录下创建一个utils文件夹，其中创建一个utils.js文件，用于储存常用函数

49.

utils.js

functionconverToStarsArray(stars){varnumstars.toString().substring(0,1);vararray[];for(vari1;i5;i++){if(inum){array.push(1);}else{array.push(0);}}returnarray;}//导出module.exports{converToStarsArray:converToStarsArray,}50.

movie-template.wxml修改传入评分模板的参数

importsrc"../stars/stars-template.wxml"/templatename"movieTemplate"viewclass'movie-container'imageclass'movie-img'src'{{coverageUrl}}'/imagetextclass'movie-title'{{title}}/texttemplateis"starsTempalte"data"{{stars:stars,score:average}}"//view/template51.

stars-template.wxml修改获取的评分参数

templatename"starsTempalte"viewclass'stars-container'viewclass'stars'!--imagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/star.png'/imageimagesrc'/images/dy/none-star.png'/image--blockwx:for"{{stars}}"wx:for-item"i"imagewx:if"{{i}}"src'/images/dy/star.png'/imageimagewx:elsesrc'/images/dy/none-star.png'/image/block/viewtextclass'star-score'{{score}}/text/view/template52.

movie-list-template.wxml：

importsrc"../movie/movie-template.wxml"/templatename"movieListTemplate"viewclass'movie-list-container'viewclass'inner-container'viewclass'movie-head'textclass'slogan'{{cagetoryTitle}}/textviewclass'more'textclass'more-text'更多/textimageclass'more-img'src'/images/dy/arrow-right.png'/image/view/viewviewclass'movies-container'blockwx:for"{{movies}}"wx:for-item"movie"templateis"movieTemplate"data"{{...movie}}"/!--templateis"movieTemplate"/templateis"movieTemplate"/--/block/view/view/view/template53.