请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用开发教程(3):APP开发实战-页面开发

0
回复
73
查看
[复制链接]

8

主题

76

帖子

420

积分

 楼主| 2018-11-27 20:05:53 显示全部楼层 |阅读模式
本帖最后由 vivo技术弟 于 2018-11-27 10:41 编辑

上一篇中我们最后搭建出了一个可以开发的快应用项目,优化了项目的结构,为项目增加了可以拿来就用的UI组件库,接下来我们正式开始快应用的开发。
需求分析
首先我们明确要开发的快应用需要哪些功能,我简单罗列一下第一版本的功能需求。
  • 需要一个查看正在上映的电影页面
  • 需要一个查看即将上映的电影页面
  • 需要一个查看电影详细信息的页面
  • 需要一个查看电影排行榜单的页面

第一版本的APP我们暂定实现这四个需求。现在我们分解一下这四个需求,对应到我们要开发的具体页面上去。首先我们可以把正在上映和即将上映的电影放在一个页面,对应APP的一个tabbar,详细信息页面作为点击单个电影之后的跳转的详情页面,电影榜单则作为tabbar的第二个页面。下面是根据这个需求分析做的一个简略的说明图。
app_page.png

界面搭建
根据上面的页面结构,我们可以开始进行项目中的页面配置了。

1.增加页面文件和目录
目录结构增加情况
  1. ├── src
  2.    │   └── page                  应用页面
  3.    │        └── index             应用首页目录
  4.    │        │   └── index.ux      应用首页文件
  5. +  │        └── top               榜单页目录
  6. +  │        │   └── index.ux      榜单页文件
  7. +  │        └── index             详情页目录
  8. +  │            └── index.ux      详情页文件
  9.    └── package.json              定义项目需要的各种模块及配置信息
复制代码
增加的页面在manifest.json中对应字段修改
  1. {
  2.   "router": {
  3.     "entry": "page/index",
  4.     "pages": {
  5.       "page/index": {
  6.         "component": "index"
  7.       },
  8. +      "page/top": {
  9. +        "component": "index"
  10. +      },
  11. +      "page/detail": {
  12. +        "component": "index"
  13. +      }
  14.     }
  15.   },
  16.   "display": {
  17. -    "titleBarBackgroundColor": "#f2f2f2",
  18. -    "titleBarTextColor": "#414141",
  19. +    "titleBarBackgroundColor": "#00B51D",
  20. +    "titleBarTextColor": "#ffffff",
  21.     "menu": true,
  22.     "pages": {
  23.       "page/index": {
  24.         "titleBarText": "首页",
  25.         "menu": false
  26.       },
  27. +      "page/top": {
  28. +        "titleBarText": "排行榜",
  29. +        "menu": false
  30. +      },
  31. +      "page/detail": {
  32. +        "titleBarText": "详情页",
  33. +        "menu": false
  34. +      }
  35.     }
  36.   }
  37. }
复制代码

2.编写首页界面
需要注意的是,快应用的样式布局和web有比较多不同的地方,快应用的布局都采用flex方式实现,如果你不以前没有用过flex,请提前熟悉flex布局相关的概念和属性。这里推荐看阮一峰flex布局的博文
首页可以看到需要一个顶部的筛选组件,中间是电影列表组件,底部是tabbar组件。我们分别开始编写。

  • 顶部筛选组件

顶部筛选组件是固定在页面顶部的,所以定位的方式采用position:fixed来实现,由于固定在顶部会占用页面的高度,中级的列表也要相应的减掉这一部分的高度,列表中的内容才不会被挡住。所以中间的列表容器元素需要添加margin-top:100px样式规则。
template部分代码
  1. <template>
  2.     <div class="container">
  3.         <div class="filter-wrap">
  4.             <text class="filter active">正在热映</text>
  5.             <text class="filter">即将上映</text>
  6.         </div>
  7.     </div>
  8. </template>
复制代码
style部分代码
  1. .container {
  2.     display: flex;
  3. }

  4. .filter-wrap {
  5.     position: fixed;
  6.     top: 0;
  7.     left: 0;
  8.     height: 100px;
  9.     width: 100%;
  10.     background-color: #00B51D;
  11.     justify-content: center;
  12.     align-items: center;
  13. }

  14. .filter {
  15.     text-align: center;
  16.     color: #ffffff;
  17.     width: 200px;
  18.     height: 50px;
  19.     border: 1px solid #ffffff;
  20.     font-size: 24px;
  21. }

  22. .active {
  23.     background-color: #ffffff;
  24.     color: #00B51D;
  25. }
复制代码
现在筛选器的界面已经写出来
filter_ui.png

中间列表组件
中间的列表我们采用官方的list组件来实现,官方的list组件在渲染的时候会复用相同type属性的list-item,这样会提高我们的渲染效率和性能。需要注意的是不同结构的list-item是不可以用相同的type属性的,会造成应用崩溃。
template部分代码
  1. <list class="movie-list">
  2.     <block for="[1,2,3,4,5]">
  3.         <list-item type="movie">
  4.             <div class="movie">
  5.                 <div class="poster">
  6.                     <image src=""></image>
  7.                 </div>
  8.                 <div class="info">
  9.                     <div class="top">
  10.                         <div class="title">
  11.                             <text class="name">毒液</text>
  12.                             <text class="year">2018</text>
  13.                         </div>
  14.                         <div class="rating">
  15.                             <text class="average">9.0</text>
  16.                         </div>
  17.                     </div>
  18.                     <div class="bottom">
  19.                         <div class="wrap">
  20.                             <text>类型 </text>
  21.                             <text>科幻</text>
  22.                         </div>
  23.                         <div class="wrap">
  24.                             <text>演员 </text>
  25.                             <text>广东吴彦祖</text>
  26.                         </div>
  27.                         <div class="wrap">
  28.                             <text>导演 </text>
  29.                             <text>广东彭于晏</text>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.         </list-item>
  35.     </block>
  36.     <list-item type="nomore">
  37.         <text>没有更多了~</text>
  38.     </list-item>
  39. </list>
复制代码
style部分代码
  1. .movie {
  2.     height: 300px;
  3.     margin: 20px 20px 0 20px;
  4.     width: 100%;
  5.     flex-direction: row;
  6. }

  7. .info {
  8.     flex-direction: column;
  9.     flex-grow: 1;
  10.     padding: 0 20px;
  11. }

  12. .top {
  13.     flex-direction: row;
  14.     justify-content: space-between;
  15.     margin-bottom: 30px;
  16. }

  17. .bottom {
  18.     flex-direction: column;
  19.     flex-grow: 1;
  20.     justify-content: space-around;
  21. }

  22. .bottom text {
  23.     font-size: 26px;
  24. }

  25. .name {
  26.     font-size: 36px;
  27. }

  28. .title {
  29.     flex-direction: column;
  30. }

  31. .poster {
  32.     width: 230px;
  33. }

  34. .poster image {
  35.     width: 100%;
  36.     height: 100%;
  37. }

  38. .rating {
  39.     height: 100px;
  40.     width: 100px;
  41.     border-radius: 20px;
  42.     background-color: #f0f3f5;
  43.     justify-content: center;
  44. }

  45. .average {
  46.     color: #27a;
  47. }
复制代码
现在列表布局的界面已经写出来
list_ui.png

  • 底部选项卡

快应用中的底部选项卡没有提供类似于微信小程序的配置方式,所以需要我们自己来写一个通用的组件,底部选项卡组件我们可以使用官方的tabs组件来实现,当然也可以使用其他组件来模拟实现。这里我们使用的div组件模拟完成。
底部选项卡是要固定在页面底部的,所以需要我们可以采用position:fixed的方式实现,由于选项卡在底部占用了页面高度,所以中间的列表需要把这一部分的高度减掉,采用padding-bottom:100px,这样我们的列表滑到底部后才不会被底部的选项卡挡住一部分内容。
template部分代码
  1. <div class="tabbar">
  2.     <div class="tab">
  3.         <image src="/common/picture/ing-active.png"></image>
  4.         <text class="active-tab">首页</text>
  5.     </div>
  6.     <div class="tab">
  7.         <image src="/common/picture/coming.png"></image>
  8.         <text class="">排行榜</text>
  9.     </div>
  10. </div>
复制代码
style部分代码
  1. .container {
  2.     display: flex;
  3.     padding: 100px 0;
  4. }
  5. .tabbar {
  6.     position: fixed;
  7.     bottom: 0;
  8.     left: 0;
  9.     width: 100%;
  10.     height: 100px;
  11.     border-top-width: 1px;
  12.     border-color: #bbbbbb;
  13.     background-color: #ffffff;
  14.     flex-direction: row;
  15.     border-top-color: black
  16. }
  17. .tab {
  18.     flex: 1;
  19.     align-items: center;
  20.     justify-content: center;
  21.     flex-direction: column;
  22. }
  23. .tab image {
  24.     height: 60px;
  25.     width: 60px;
  26. }
  27. .tab text {
  28.     font-size: 20px;
  29. }
  30. .active-tab {
  31.     color: #27a;
  32. }
复制代码
底部选项卡的界面完成了
tabbar_ui.png

到此,整个界面有了一个应用的雏形,我们还需要帮选项卡把页面跳转的功能加上,方便我们编写排行榜的界面。页面跳转我们使用@system.router相关的接口来完成,具体的接口使用方法你可以在文档这里找到。下面我们给出针对我们项目的使用的代码。/size]
加上跳转方法和事件的template代码
  1. <font color="rgb(51, 51, 51)"><div class="tabbar">
  2.     <div class="tab" onclick="switchTab('/page/index')">
  3.         <image src="/common/picture/ing-active.png"></image>
  4.         <text class="active-tab">首页</text>
  5.     </div>
  6.     <div class="tab" onclick="switchTab('/page/top')">
  7.         <image src="/common/picture/coming.png"></image>
  8.         <text class="">排行榜</text>
  9.     </div>
  10. </div></font>
复制代码

可以看到每个tab上都多出了一个onclick 的属性,这是我们给tab加上的点击事件,事件触发执行的方法是我们写的switchTab()方法,方法中传入的就是要跳转的页面路径。下面是跳转方法的实现代码。
  1. import router from "@system.router"

  2. export default {
  3.     switchTab: function (uri) {
  4.         router.replace({
  5.             uri: uri
  6.         })
  7.     }
  8. }
复制代码
现在我们的选项卡组件就具备了页面跳转的能力了。

3.编写榜单页界面
榜单的页面实际上就是一个列表加上底部选项卡,和我们首页很相似,我们可以把首页的代码修改一下,作为榜单的界面。
template部分代码
  1. <div class="container">
  2.     <list class="movie-list">
  3.         <block for="[1,2,3,4,5]">
  4.             <list-item type="movie">
  5.                 <div class="movie">
  6.                     <div class="number">
  7.                         <text>{{$idx + 1}}</text>
  8.                     </div>
  9.                     <div class="poster">
  10.                         <image src=""></image>
  11.                     </div>
  12.                     <div class="info">
  13.                         <div class="top">
  14.                             <div class="title">
  15.                                 <text class="name">毒液</text>
  16.                                 <text class="year">2018</text>
  17.                             </div>
  18.                             <div class="rating">
  19.                                 <text class="average">9.0</text>
  20.                             </div>
  21.                         </div>
  22.                         <div class="bottom">
  23.                             <div class="wrap">
  24.                                 <text>类型</text>
  25.                                 <text>科幻</text>
  26.                             </div>
  27.                             <div class="wrap">
  28.                                 <text>演员</text>
  29.                                 <text>广东吴彦祖</text>
  30.                             </div>
  31.                             <div class="wrap">
  32.                                 <text>导演</text>
  33.                                 <text>广东彭于晏</text>
  34.                             </div>
  35.                         </div>
  36.                     </div>
  37.                 </div>
  38.             </list-item>
  39.         </block>
  40.         <list-item type="nomore">
  41.             <text>没有更多了~</text>
  42.         </list-item>
  43.     </list>
  44.     <div class="tabbar">
  45.         <div class="tab" onclick="switchTab('/page/index')">
  46.             <image src="/common/picture/ing.png"></image>
  47.             <text class="">首页</text>
  48.         </div>
  49.         <div class="tab" onclick="switchTab('/page/top')">
  50.             <image src="/common/picture/coming-active.png"></image>
  51.             <text class="active-tab">排行榜</text>
  52.         </div>
  53.     </div>
  54. </div>
复制代码
style部分代码(与首页的style代码的不同之处)
  1. .container {
  2.     display: flex;
  3. -    padding: 100px 0;
  4. +.   padding-bottom: 100px;
  5. }

  6. .movie {
  7.     height: 300px;
  8. -    margin: 20px 20px 0 20px;
  9. +    margin: 20px 20px 0 0;
  10.     width: 100%;
  11.     flex-direction: row;
  12. }

  13. -   .filter-wrap {
  14. -       position: fixed;
  15. -       top: 0;
  16. -       left: 0;
  17. -       height: 100px;
  18. -       width: 100%;
  19. -       background-color: #00B51D;
  20. -       justify-content: center;
  21. -       align-items: center;
  22. -   }

  23. -   .filter {
  24. -       text-align: center;
  25. -       color: #ffffff;
  26. -       width: 200px;
  27. -       height: 50px;
  28. -       border: 1px solid #ffffff;
  29. -       font-size: 24px;
  30. -   }

  31. -   .active {
  32. -       background-color: #ffffff;
  33. -       color: #00B51D;
  34. -   }

  35. +   .number {
  36. +       width: 80px;
  37. +       justify-content: center;
  38. +   }

  39. +   .number text{
  40. +       font-size: 26px;
  41. +   }
复制代码
现在榜单页的界面部分也完成了
toplist_ui.png

4.编写详情页界面
详情页面主要就是单个电影更详细的信息了,也没有太多复杂的布局方法,全部采用flex布局把信息按照合理的方式排列出来就可以了。下面直接给出相应的代码。
template代码
  1. <template>
  2.     <div class="container column">
  3.         <div class="film-detail">
  4.             <div class="film-image">
  5.                 <image src=""></image>
  6.             </div>
  7.             <div class="film-info column">
  8.                 <div class="info-container">
  9.                     <div class="column">
  10.                         <text class="film-title">毒液</text>
  11.                         <text class="film-year">2018</text>
  12.                     </div>
  13.                     <div class="film-rating column">
  14.                         <block>
  15.                             <text class="label">评分</text>
  16.                             <text class="rating">9</text>
  17.                         </block>
  18.                     </div>
  19.                 </div>
  20.                 <div class="directors">
  21.                     <text class="label">导演:</text>
  22.                     <text class="detail-wrap">
  23.                         <block for="[1,2,3]">
  24.                             <span class="person">广东吴彦祖 </span>
  25.                         </block>
  26.                     </text>
  27.                 </div>
  28.                 <div class="casts">
  29.                     <text class="label">主演:</text>
  30.                     <text class="detail-wrap">
  31.                         <block for="{{[1,2,3]}}">
  32.                             <span class="person">广东彭于晏 </span>
  33.                         </block>
  34.                     </text>
  35.                 </div>
  36.                 <div class="genres">
  37.                     <text class="label">类型:</text>
  38.                     <block for="{{[1,2]}}">
  39.                         <text class="person">科幻</text>
  40.                     </block>
  41.                 </div>
  42.                 <div class="genres">
  43.                     <text class="label">国家/地区:</text>
  44.                     <block for="{{[1,2]}}">
  45.                         <text class="person">美国</text>
  46.                     </block>
  47.                 </div>
  48.                 <div class="collect-wish">
  49.                     <text>看过(10)</text>
  50.                     <text>想看(10)</text>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.         <div class="summary column">
  55.             <text class="title">剧情简介</text>
  56.             <text class="content">
  57.                 2018漫威压轴巨制,蜘蛛侠最强劲敌“毒液”强势来袭!
  58.             </text>
  59.         </div>
  60.         <div class="content-wrap column">
  61.             <text class="title">演职人员</text>
  62.             <list class="casts-list">
  63.                 <list-item class="column cast" type="cast" for="[1,2,3,4,5,6,7]">
  64.                     <image src=""></image>
  65.                     <text>yanyuan</text>
  66.                 </list-item>
  67.             </list>
  68.         </div>
  69.     </div>
  70. </template>
复制代码
style部分代码
  1. .column {
  2.     flex-direction: column;
  3. }

  4. .container {
  5.     padding: 20px;
  6. }

  7. .film-image {
  8.     padding-right: 20px;
  9.     width: 300px;
  10.     flex-shrink: 0;
  11. }

  12. .film-image image {
  13.     height: 400px;
  14.     width: 300px;
  15. }

  16. .info-container {
  17.     justify-content: space-between;
  18.     margin-bottom: 50px;
  19. }

  20. .film-title {
  21.     font-size: 40px;
  22.     lines: 2;
  23. }

  24. .film-year {
  25.     color: #999999;
  26. }

  27. .film-rating {
  28.     height: 100px;
  29.     width: 100px;
  30.     border-radius: 20px;
  31.     background-color: #f0f3f5;
  32.     justify-content: center;
  33.     align-content: center;
  34. }

  35. .label {
  36.     text-align: center;
  37.     color: #888888;
  38.     font-size: 26px;
  39. }

  40. .rating {
  41.     text-align: center;
  42.     color: #ff680d;
  43.     font-size: 40px;
  44. }

  45. .detail-wrap {
  46.     /*flex-wrap: wrap;*/
  47. }

  48. .directors, .casts {
  49.     align-items: flex-start;
  50. }

  51. .directors .label, .casts .label {
  52.     width: 100px;
  53. }

  54. .person {
  55.     font-size: 26px;
  56. }

  57. .collect-wish text {
  58.     font-size: 26px;
  59. }

  60. .title {
  61.     height: 60px;
  62.     border-left-width: 10px;
  63.     border-left-color: #00B51D;
  64.     background: linear-gradient(to right, #f0f3f5, #ffffff);
  65.     margin: 30px 0;
  66.     padding-left: 20px;
  67. }

  68. .content {
  69.     line-height: 50px;
  70. }

  71. .casts-list {
  72.     flex-direction: row;
  73.     height: 300px;
  74.     width: 100%;
  75. }

  76. .cast {
  77.     width: 200px;
  78.     height: 100%;
  79.     margin: 0 20px 10px 0;
  80. }

  81. .cast image {
  82.     width: 200px;
  83. }

  84. .cast text {
  85.     text-align: center;
  86.     lines: 1;
  87. }
复制代码
现在详情页的静态界面已经完成
detail_page_ui.png
到现在为止,整个快应用的静态界面都已经完成了,接下来我们就要开始把数据接入写好的页面了。

文档github项目地址:https://github.com/vivoquickapp/quickapp-tutorial/tree/master
作者:dadong
时间:2018.11.22


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册