## movie-detial.js
[TOC]
### 外部变量获取
```
var douban = getApp().globalData.doubanUrl;
import utils from "../../../utils/utils";
var http = utils.http;
var star = utils.star;
```
### 页面初始设置
```
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showLoading({
title: "加载中..."
})
var id = options.id;
console.log(id);
var url = 'https://douban.uieee.com/v2/movie/subject/' + id;
// console.log(url);
http(url, this.handleData);
},
```
###
自定义handleData函数
```
handleData(res) {
console.log(res)
var title = res.data.title;
var countries = res.data.countries;
var year = res.data.year;
var collection = res.data.collect_count;
var reviews = res.data.reviews_count;
var img = res.data.images.small;
var original = res.data.original_title;
var stars = star(res.data.rating.stars);
var genres = res.data.genres;
var directors = res.data.directors[0].name;
var average = res.data.rating.average;
// console.log(directors)
var casts = res.data.casts;
var avatars = [];
var summary = res.data.summary;
var avatarsImg = [];
//从casts数组中处理数据得到A/B/C/D的表示结构
casts.forEach(ele => {
var actors = ele.name;
var img = ele.avatars.small;
var larImg = ele.avatars.large;
var nameList = {
actors,
}
var imgUrl = {
img,
larImg
}
avatars.push(nameList);
avatarsImg.push(imgUrl);
});
console.log(avatarsImg)
var avatarsList = [];
avatars.forEach(ele => {
avatarsList.push(ele.actors);
})
var finalList = avatarsList.join("/");
var temp = {
title,
countries,
collection,
reviews,
img,
original,
stars,
genres,
directors,
finalList,
summary,
year,
avatarsImg,
average
};
// console.log(avatars)
console.log(temp);
this.setData(temp);
wx.hideLoading();
},
```
###
点击演员图片显示大图函数
```
viewPhoto(event) {
var id = event.currentTarget.dataset.id;
console.log(id);
var avatarsImg = this.data.avatarsImg;
console.log(avatarsImg)
// var img = this.data.img;
var larImg = this.data.avatarsImg[id].larImg;
wx.previewImage({
// current: avatarsImg.img,
urls: [larImg]
})
}
})
```
- 项目启动配置
- 01.欢迎页
- 03.点击图片切换——事件绑定bindtap、catchtap
- 04.底方分页切换tabBar
- 20.音乐播放
- 06.豆瓣电影列表
- 1.App
- 2.template
- 3.movies-detail 页面详情
- 组件
- 02.地图
- 05.轮播图swiper
- 07.点击预览图片previewImage结合scroll-view
- 11.web-page
- 14.form表单
- 08.头像图片更换chooseImage
- 09.上拉刷新OnReachBottom
- 10.使用缓存(收藏、分享状态)
- 12.导航条加载、页面加载、导航标题设置
- 13.弹出框
- 15.demo
- data
- local.js
- pages
- welcome(欢迎页)
- index
- index.wxml
- index.wxss
- index.js
- index-detail
- index-detail.wxml
- index-detail.wxss
- index-detail.js
- template
- yuedu-list.wxml
- yuedu-list.wxss
- map
- movies
- movies.wxml
- movies.wxss
- movies.js
- movies-grid
- movies-grid-template.wxml
- movies-grid-template.wxss
- movies-item
- movies-item-template.wxml
- movies-item-template.wxss
- movies-more
- movies-more.wxml
- movies-more.wxss
- movies-more.js
- movie-detail
- movie-detail.wxss
- movie-detail.wxml
- movie-detail.js
- star
- star-template.wxml
- star-template.wxss
- web-page
- web-page.wxml
- web-page.js
- post-img
- post-img.wxml
- post-img.js
- post-img.wxss
- 演员列表图
- 列表图.wxml
- 列表图.wxss
- 列表图.js
- utils
- utils.js
- app.js
- app.json
- app.wxss
- 16.事件冒泡
- 18.Tip
- 框架
- 17.模板
- 19.组件模板和样式(slot)
- component构造器
- 组件事件
- behaviors
- wxs
- HTTP封装
- models使用封装HTTP
- 更多有关promise封装的例子
- 生命周期
- 注意：