（九）微信小程序：电影页面UI设计 - 欧阳良才

（九）微信小程序：电影页面UI设计

电影页面UI设计

　　1.理清逻辑+辨清可复用元素=template

　　　　　　<!--

  　　　　　　　　页面可复用元素

    　　　　　　　　1.列表电影

      　　　　　　　　　　movie-list-template

    　　　　　　　　2.电影信息

      　　　　　　　　　　movie-template

    　　　　　　　　3.评分信息

      　　　　　　　　　　stars-template

    　　　　　　　层级关系:movie > movie-list-template > movie-template  > stars-template

　　　　　　-->

　　　　　结构图：

 

 

 　　2.具体进行代码书写：

　　　　　　　　从stars-template写起，上层引用下层模板

　　　　　　(1)stars-template　　　　　　　　　　

stars-template.wxml

stars-template.wxss

　　　　　　(2)movie-template

movie-template.wxml

movie-template.wxss

　　　　　　(3)movie-list-template

movie-list-template.wxml

movie-list-template.wxss

　　　　　　最终movie.wxml

movie.wxml

　　　　3.实现效果：

　　　　　　　　　　

 

  本节实现了电影界面的UI设计，明确了复用元素的意义，但这仅仅是一个静态页面！

下节会呈现动态页面，数据从网络中获取，达到动态页面效果~