小程序-电影详情页面(九)

新建movie-detail

小程序-电影详情页面(九)_第1张图片

.在点击电影的地方获取id号 ,定义一个catchtap=''事件当点击这个catchtap=''时实行跳转

小程序-电影详情页面(九)_第2张图片

编写onMovieTap

小程序-电影详情页面(九)_第3张图片

在movie-detail.js中onload函数中获取数据,然后用console.log()输出一下看下是否成功

小程序-电影详情页面(九)_第4张图片

点击电影时输出了电影的id,成功

小程序-电影详情页面(九)_第5张图片

发送请求获取电影详细信息,接口为https://douban.uieee.com/v2/movie/subject/

小程序-电影详情页面(九)_第6张图片

调用utils.js

小程序-电影详情页面(九)_第7张图片

调用回调函数processDoubanData: function

小程序-电影详情页面(九)_第8张图片

运行一下,数据获取成功

小程序-电影详情页面(九)_第9张图片

加载数据的函数,再给movie附一个初始值

小程序-电影详情页面(九)_第10张图片小程序-电影详情页面(九)_第11张图片

在utils里面定义convertToCastString和convertToCastInfos方法小程序-电影详情页面(九)_第12张图片

  1. 将它输出一下,才能在detail.js里面调用

小程序-电影详情页面(九)_第13张图片

  1. 在processDoubanData方法中打印一下看是否成功

小程序-电影详情页面(九)_第14张图片

 

点击电影时弹出下面的资料代表ok了

小程序-电影详情页面(九)_第15张图片

编写详情页面了,在这里先提一下,我们在获取图片时都会给图片一个class用来限制图片的大小,但是在用api来获取网上的图片时,我们就需要用到image里面的缩放模式和裁剪模式来调节图片了,详细说明在开发者文档里面有,再亲手试一下他们的区别。

  1. 在 more-movie.js的onPullDownRefresh下拉刷新方法里面加多一条this.data.totalCount=0;让他在下拉刷新时将数据编号变为0。

小程序-电影详情页面(九)_第16张图片

  1. 编写movie-detail.wxml的布局并且获取movie里面的数据

小程序-电影详情页面(九)_第17张图片小程序-电影详情页面(九)_第18张图片小程序-电影详情页面(九)_第19张图片

在“更多”页面more-movie.js里面添加这个方法,使得在更多页面的电影列表里面点击电影时也跳转到详情页面

小程序-电影详情页面(九)_第20张图片

在电影首页的js里面也加入

小程序-电影详情页面(九)_第21张图片小程序-电影详情页面(九)_第22张图片小程序-电影详情页面(九)_第23张图片

剩下的就是详情页面的css排布了

小程序-电影详情页面(九)_第24张图片小程序-电影详情页面(九)_第25张图片小程序-电影详情页面(九)_第26张图片小程序-电影详情页面(九)_第27张图片小程序-电影详情页面(九)_第28张图片

你可能感兴趣的:(小程序)