美文网首页微信小程序
9-5 编写电影详情页面(上)

9-5 编写电影详情页面(上)

作者: 留白_汉服vs插画 | 来源:发表于2017-11-30 13:36 被阅读26次

    快速创建电影详情页面文件movie-detail。

    分析一下效果图:

    图片模糊处理,原始图片,标题,副标题,名字,评分,等等。结构比较简单。star组件。下面影人等等。

    拿到电影详情页面,和文章列表跳转文章详情页面是一样的。先拿到subjectId号。拿到ID号之后,才能加载详情。从哪里拿到ID?就是点击电影的地方拿到。movies页面里,电影是一个movie-template编写的。

    给movie-template里面添加一个事件onMovieTap 。点击之后跳转到详情页面。  

    不能调用豆瓣数据太频繁,否则就不让调用了。

    在view上绑定一个自定义属性data-movieId,点击事件onMovieTap的时候,获取这movieId。

    点击事件里面,获取点击事件的movieid,然后跳转时候,加上这个movieId。 

    这里看一下,怎么获取movieId的过程“:

    1、在movies.js中,每次拿到一个电影的详细内容,包含movieId

    2、数据movies绑定到movie-template.xwml上面时候,就能拿到这个movieId了。在movieTemplate里面,自定义一个属性data-movieId

    3、点击事件中获取这个movieId。

    在movie-detail.js中,onload函数里获取movieId,通过option.id。

    打开豆瓣api,获取条目信息的详细api如下

    在movie-detail中获取数据,并处理数据。

    加载看一下数据。看过数据之后,才能知道怎么解析。另外还有一个重要的东西,就是判空。新的电影很全,都有,但是老的电影数据经常是缺失的。所以你在搜索的时候,必须要判断某个值是不是空。比如图片是空的,数据就无法正常加载。不去处理空值,就无法正常加载。单只那么多值,都要判空吗?理论上是,但是实际上属性太多了,不适合所有都判空,只能说调试时候,哪些有问题,对哪些处理。比如图片缺失了,你就对缺失图片做一个容错,让小程序不要报错就可以了。还有一些东西,给一个空字符串。

    相关文章

      网友评论

        本文标题:9-5 编写电影详情页面(上)

        本文链接:https://www.haomeiwen.com/subject/moqpbxtx.html