找回密码
 立即注册
搜索
首页 › 综合版块 › 技术交流 › 快应用开发教程（3）：APP开发实战-页面开发 ...
发布主题
返回列表 发新帖

技术分享 快应用开发教程（3）：APP开发实战-页面开发

0
回复 3346
查看 [复制链接]
 楼主| 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. ​
  5. .filter-wrap {
  6. position: fixed;
  7. top: 0;
  8. left: 0;
  9. height: 100px;
  10. width: 100%;
  11. background-color: #00B51D;
  12. justify-content: center;
  13. align-items: center;
  14. }
  15. ​
  16. .filter {
  17. text-align: center;
  18. color: #ffffff;
  19. width: 200px;
  20. height: 50px;
  21. border: 1px solid #ffffff;
  22. font-size: 24px;
  23. }
  24. ​
  25. .active {
  26. background-color: #ffffff;
  27. color: #00B51D;
  28. }
复制代码
现在筛选器的界面已经写出来
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. ​
  8. .info {
  9. flex-direction: column;
  10. flex-grow: 1;
  11. padding: 0 20px;
  12. }
  13. ​
  14. .top {
  15. flex-direction: row;
  16. justify-content: space-between;
  17. margin-bottom: 30px;
  18. }
  19. ​
  20. .bottom {
  21. flex-direction: column;
  22. flex-grow: 1;
  23. justify-content: space-around;
  24. }
  25. ​
  26. .bottom text {
  27. font-size: 26px;
  28. }
  29. ​
  30. .name {
  31. font-size: 36px;
  32. }
  33. ​
  34. .title {
  35. flex-direction: column;
  36. }
  37. ​
  38. .poster {
  39. width: 230px;
  40. }
  41. ​
  42. .poster image {
  43. width: 100%;
  44. height: 100%;
  45. }
  46. ​
  47. .rating {
  48. height: 100px;
  49. width: 100px;
  50. border-radius: 20px;
  51. background-color: #f0f3f5;
  52. justify-content: center;
  53. }
  54. ​
  55. .average {
  56. color: #27a;
  57. }
复制代码
现在列表布局的界面已经写出来
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. ​
  3. export default {
  4. switchTab: function (uri) {
  5. router.replace({
  6. uri: uri
  7. })
  8. }
  9. }
复制代码
现在我们的选项卡组件就具备了页面跳转的能力了。
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. ​
  7. .movie {
  8. height: 300px;
  9. - margin: 20px 20px 0 20px;
  10. + margin: 20px 20px 0 0;
  11. width: 100%;
  12. flex-direction: row;
  13. }
  14. ​
  15. - .filter-wrap {
  16. - position: fixed;
  17. - top: 0;
  18. - left: 0;
  19. - height: 100px;
  20. - width: 100%;
  21. - background-color: #00B51D;
  22. - justify-content: center;
  23. - align-items: center;
  24. - }
  25. ​
  26. - .filter {
  27. - text-align: center;
  28. - color: #ffffff;
  29. - width: 200px;
  30. - height: 50px;
  31. - border: 1px solid #ffffff;
  32. - font-size: 24px;
  33. - }
  34. ​
  35. - .active {
  36. - background-color: #ffffff;
  37. - color: #00B51D;
  38. - }
  39. ​
  40. + .number {
  41. + width: 80px;
  42. + justify-content: center;
  43. + }
  44. ​
  45. + .number text{
  46. + font-size: 26px;
  47. + }
复制代码
现在榜单页的界面部分也完成了
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. ​
  5. .container {
  6. padding: 20px;
  7. }
  8. ​
  9. .film-image {
  10. padding-right: 20px;
  11. width: 300px;
  12. flex-shrink: 0;
  13. }
  14. ​
  15. .film-image image {
  16. height: 400px;
  17. width: 300px;
  18. }
  19. ​
  20. .info-container {
  21. justify-content: space-between;
  22. margin-bottom: 50px;
  23. }
  24. ​
  25. .film-title {
  26. font-size: 40px;
  27. lines: 2;
  28. }
  29. ​
  30. .film-year {
  31. color: #999999;
  32. }
  33. ​
  34. .film-rating {
  35. height: 100px;
  36. width: 100px;
  37. border-radius: 20px;
  38. background-color: #f0f3f5;
  39. justify-content: center;
  40. align-content: center;
  41. }
  42. ​
  43. .label {
  44. text-align: center;
  45. color: #888888;
  46. font-size: 26px;
  47. }
  48. ​
  49. .rating {
  50. text-align: center;
  51. color: #ff680d;
  52. font-size: 40px;
  53. }
  54. ​
  55. .detail-wrap {
  56. /*flex-wrap: wrap;*/
  57. }
  58. ​
  59. .directors, .casts {
  60. align-items: flex-start;
  61. }
  62. ​
  63. .directors .label, .casts .label {
  64. width: 100px;
  65. }
  66. ​
  67. .person {
  68. font-size: 26px;
  69. }
  70. ​
  71. .collect-wish text {
  72. font-size: 26px;
  73. }
  74. ​
  75. .title {
  76. height: 60px;
  77. border-left-width: 10px;
  78. border-left-color: #00B51D;
  79. background: linear-gradient(to right, #f0f3f5, #ffffff);
  80. margin: 30px 0;
  81. padding-left: 20px;
  82. }
  83. ​
  84. .content {
  85. line-height: 50px;
  86. }
  87. ​
  88. .casts-list {
  89. flex-direction: row;
  90. height: 300px;
  91. width: 100%;
  92. }
  93. ​
  94. .cast {
  95. width: 200px;
  96. height: 100%;
  97. margin: 0 20px 10px 0;
  98. }
  99. ​
  100. .cast image {
  101. width: 200px;
  102. }
  103. ​
  104. .cast text {
  105. text-align: center;
  106. lines: 1;
  107. }
复制代码
现在详情页的静态界面已经完成
detail_page_ui.png
到现在为止，整个快应用的静态界面都已经完成了，接下来我们就要开始把数据接入写好的页面了。
文档github项目地址：https://github.com/vivoquickapp/quickapp-tutorial/tree/master
作者：dadong
时间：2018.11.22
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册