微信小程序-电影详情页

电影详情页

发送请求

上来先把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;
}

效果图: