2.5 实现电影详情页

单击主页列表中的单项，会进入电影详情页，并展示电影的一些基本信息，如图2-16所示，本节就来实现这样的功能。

2.5.1 格式化代码

使用2.1.3节快捷创建页面的方法，添加pages/douban/item页面，用于展示电影详情。

在文档树中，打开pages/douban/item.wxml文件，添加如下代码，引入weui样式库：

    @import 'sim.js/weui/weui.wxss';

如果读者是从笔者的源码中复制的代码，那么在复制粘贴之后，应在文档区右击从弹出的右键菜单中选择“格式化代码”命令，这样可以快速将代码格式化，易读易改，如图2-17所示。

2.5.2 逻辑层

在文档树中打开pages/douban/item.js文件，修改data变量为：

    data: {
        loading: true,
        movie: {}
    }

将onLoad函数修改为：

    onLoad(options) {
        let app = getApp()
        app. request(`https://api.douban.com/v2/movie/subject/
            ${options.id}`)
            .then(d => {
            this.setData({ movie: d, loading: false });
            wx.setNavigationBarTitle({ title: d.title });
        }).catch(e => {
            console.error(e);
        })
    }

在上述代码中，使用Promise方式从豆瓣API拉取数据，然后在then回调中取得数据并绑定。

loading变量用于指示数据是否加载完成，可使用它在页面上显示一个加载提示。

options是从其他页面传递过来的参数集合，可从中获取id，这将是2.5.4节wxml标签中自定义的参数名称。这里使用电影的id，从豆瓣API中拉取单个电影的详细信息。

2.5.3 视图层

在文档树中打开pages/douban/item.wxml文件，修改标签代码为如下形式：

    <loading hidden="{{ ! loading }}">加载中</loading>
    <image style="position: fixed; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width:
        100%; z-index:  -1000; opacity:  .05; "  src="{{  movie.images.large  }}"  mode=
        "aspectFill" />
    <scroll-view scroll-y>
        <view class="weui-article">
            <view class="weui-article__section">
                <image  class="weui-article__img"  src="{{  movie.images.large  }}"
                    mode="aspectFit" style="width: 100%; height: 800rpx" />
            </view>
            <view class="weui-article__h1">{{ movie.title }}({{ movie.year }})</view>
            <view class="weui-article__section">
                <view class="weui-media-box__info" style="margin-top:10rpx; ">
                    <view  class="weui-media-box__info__meta">评分：{{  movie.rating.
                        average }}</view>
                </view>
                <view class="weui-media-box__info" style="margin-top:10rpx; ">
                    <view class="weui-media-box__info__meta">导演：
                        <block wx:for="{{ movie.directors }}" wx:key="{{ item.id }}">
                              {{ item.name }} </block>
                    </view>
                </view>
                <view class="weui-media-box__info" style="margin-top:10rpx; ">
                    <view class="weui-media-box__info__meta">主演：
                        <block wx:for="{{ movie.casts }}" wx:key="{{ item.id }}"> {{
                              item.name }} </block>
                    </view>
                </view>
            </view>
            <view class="weui-article__section">
                <view class="weui-article__p">
                    {{ movie.summary }}
                </view>
            </view>
        </view>
    </scroll-view>

loading组件并没有出现在微信官方文档中，但它仍然可以使用绑定变量的方式来控制它的显示。如果组件的属性是一个布尔值，那么只有使用这样的绑定方法才可能使它的值为false：

    hidden="{{ ! loading }}"

这里再一次使用了scroll-view组件，但是scroll-y为true，代表允许纵向滚动。

2.5.4 页面跳转

在文档树中打开pages/douban/index.wxml文件，修改wxml标签，在scroll-view容器内，在navigator组件上添加url属性，如图2-18所示。

其中的id是在2.5.2节js代码中获取到的参数。item是页面名称，因为此页与item页面位于同一个目录之下，所以可以使用相对地址。

在页面顶部的swiper组件中，在navigator组件上添加url，如图2-19所示。

此时，刷新项目，会发现效果已经完成。

2.5.5 下载源码

在本节的学习过程中，如果遇到问题，可以通过如下方式来解决。

❑ 加入小程序微信群与作者及其他读者一同探讨。微信扫描前言中的二维码，关注“艺述思维”，发送“小程序”进群。

❑ 下载作者的源码，对照查找问题。在公众号中发送“豆豆电影2.5”获取下载地址。