电影详情页
发送请求
上来先把movie.json
中的导航标题改了
{
"navigationBarTitleText": "电影详情页"
}
搭建静态页面
movie.wxml
<!--pages/movie/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'>年份: 2018</text>
<text space='nbsp' class='movie_director'>导演: 安东尼·罗素 乔·罗素</text>
</view>
<text class='movie_rating'>10.6</text>
</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
<!--pages/movie/movie.wxml-->
<!-- 在外面多套一个view用来遍历 -->
<view wx:for='{{moviesArray}}' wx:key='{{index}}'>
<!-- 遍历出来的是item -->
<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
协议,且如果没有在开发设置中配置请求的连接是无法访问指定的链接的 - 一个微信小程序的并发网络请求数量被限制在最多5个
电影详情页
新建movieDetail
目录,里面新建movieDetail
页面
现在想要实现点击电影(movie
)跳转到电影详情页(movieDetail
)
以前是绑定一个点击事件,然后在js
中用wx.navigateTo
跳转,现在用另一种方式
navigator
:页面链接。
在movie.wxml
中改一下,把最外面的view
换成navigator
,然后在后面加上url
属性,里面填你要跳转到的页面的地址
<!--pages/movie/movie.wxml-->
<!-- url 中可以携带你想传递的数据,比如我们把index传递到movieDetail页面 -->
<navigator url='/pages/movieDetail/movieDetail?index={{index}}' wx:for='{{moviesArray}}' wx:key='{{index}}'>
<!-- 遍历出来的是item -->
<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:[]
}
});
在movie.js
中添加存数据的代码
然后在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
<!--pages/movieDetail/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;
}
效果图: