上来先把movie.json
中的导航标题改了
{
"navigationBarTitleText": "电影详情页"
}
搭建静态页面
movie.wxml
<view class='moviesContainer'>
<image class='moviesImg' src='/images/index/cart.jpg'>image>
<view class='movie_detail'>
<text class='movie_name'>无限战争text>
<text space='nbsp' class='movie_year'>年份: 2018text>
<text space='nbsp' class='movie_director'>导演: 安东尼·罗素 乔·罗素text>
view>
<text class='movie_rating'>10.6text>
view>
movie.wxss
/* pages/movie/movie.wxss */
.moviesContainer{
display: flex;
padding: 20rpx;
border-bottom: 2rpx solid #eee;
}
.moviesImg{
width: 128rpx;
height: 128rpx;
}
.movie_detail{
display: flex;
flex-direction: column;
width: 70%;
margin-left: 30rpx;
}
.movie_director{
font-size: 30rpx;
color: #333;
}
.movie_name{
font-size: 32rpx;
color: #000;
/* 名字不换行 */
white-space: nowrap;
/* 名字超出部分隐藏掉 */
overflow: hidden;
/* 隐藏了的部分用...代替 */
text-overflow: ellipsis;
}
.movie_year{
font-size: 28rpx;
color: #666;
}
.movie_rating{
font-size: 40rpx;
color: red;
font-weight: bold;
}
movie.js
// pages/movie/movie.js
//这个是豆瓣开放的接口
const MOVIE_URL = 'http://t.yushu.im/v2/movie/top250?start=25&count=25';
Page({
/**
* 页面的初始数据
*/
data: {
moviesArray:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用wx.request发送请求
wx.request({
url: MOVIE_URL,
success:(data)=>{
console.log(data);
//更新状态值
this.setData({
moviesArray: data.data.subjects
})
}
})
},
这里如果出现403
错误的可能是豆瓣禁止小程序请求了,将链接中的http://api.douban.com
换为http://t.yushu.im
就可以了
还有一个错误就是http://t.yushu.im
不在以下 request
合法域名列表中
最后回到页面处理数据,遍历数据时记得在外面多套一层view
movie.wxml
<view wx:for='{{moviesArray}}' wx:key='{{index}}'>
<view class='moviesContainer'>
<image class='moviesImg' src='{{item.images.large}}'>image>
<view class='movie_detail'>
<text class='movie_name'>{{item.title}}text>
<text space='nbsp' class='movie_year'>年份: {{item.year}}text>
<text space='nbsp' class='movie_director'>导演: {{item.directors[0].name}}text>
view>
<text class='movie_rating'>{{item.rating.average}}text>
view>
view>
备注:
https
协议,且如果没有在开发设置中配置请求的连接是无法访问指定的链接的新建movieDetail
目录,里面新建movieDetail
页面
现在想要实现点击电影(movie
)跳转到电影详情页(movieDetail
)
以前是绑定一个点击事件,然后在js
中用wx.navigateTo
跳转,现在用另一种方式
navigator
:页面链接。在movie.wxml
中改一下,把最外面的view
换成navigator
,然后在后面加上url
属性,里面填你要跳转到的页面的地址
<navigator url='/pages/movieDetail/movieDetail?index={{index}}' wx:for='{{moviesArray}}' wx:key='{{index}}'>
<view class='moviesContainer'>
<image class='moviesImg' src='{{item.images.large}}'>image>
<view class='movie_detail'>
<text class='movie_name'>{{item.title}}text>
<text space='nbsp' class='movie_year'>年份: {{item.year}}text>
<text space='nbsp' class='movie_director'>导演: {{item.directors[0].name}}text>
view>
<text class='movie_rating'>{{item.rating.average}}text>
view>
navigator>
这样跳转就实现了
为了不用再发请求,我们把电影数据存到App
的moviesArr
中
App({
data:{
//是否在播放
isPlay:false,
//哪一个页面在播放
pageIndex:false,
//要跳转的item
moviesArr:[]
}
});
然后在movieDetail.wxml
中拿到数据
// pages/movieDetail/movieDetail.js
let appdata = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
movie:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
movie: appdata.data.moviesArr[options.index]
})
},
显示页面movieDetail.wxml
<view class='movieDetailContainer'>
<image class='movie_img' src='{{movie.images.large}}'>image>
<text class='movie_name'>{{movie.title}}text>
<view class='movie_detail'>
<text>评分:{{movie.rating.average}}text>
<text>导演:{{movie.directors[0].name}}text>
<text class='movie_zhuyan'>主演:<text wx:for='{{movie.casts}}' wx:key='index' space='nbsp'>{{item.name}} text>text>
view>
<button>我要观影button>
view>
样式movieDetail.wxss
/* pages/movieDetail/movieDetail.wxss */
.movieDetailContainer{
display: flex;
flex-direction: column;
align-items: center;
}
.movie_img{
width: 70%;
height: 700rpx;
margin: 20rpx 0;
}
.movie_name{
font-size: 40rpx;
font-weight: bold;
}
.movie_detail{
width: 60%;
display:flex;
flex-direction: column;
font-size: 28rpx;
}
.movie_detail text{
margin: 5rpx 0;
}
.movie_zhuyan{
/* 名字不换行 */
white-space: nowrap;
/* 名字超出部分隐藏掉 */
overflow: hidden;
/* 隐藏了的部分用...代替 */
text-overflow: ellipsis;
}
button{
width:70%;
height: 80rpx;
background: green;
color: #fff;
line-height: 80rpx;
margin-top: 50rpx;
}