快应用技术干货分享（第三篇）

栏目: Html · 发布时间: 5年前

内容简介：上一篇中我们最后搭建出了一个可以开发的快应用项目，优化了项目的结构，为项目增加了可以拿来就用的UI组件库，接下来我们正式开始快应用的开发。增加的页面在manifest.json中对应字段修改

上一篇中我们最后搭建出了一个可以开发的快应用项目，优化了项目的结构，为项目增加了可以拿来就用的UI组件库，接下来我们正式开始快应用的开发。

需求分析

首先我们明确要开发的快应用需要哪些功能，我简单罗列一下第一版的功能需求。

  • 需要一个查看正在上映的电影页面

  • 需要一个查看即将上映的电影页面

  • 需要一个查看电影详细信息的页面

  • 需要一个查看电影排行榜单的页面

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

快应用技术干货分享（第三篇）

界面搭建

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

1.增加页面文件和目录

目录结构增加情况

├── src
   │   └── page                  应用页面
   │        └── index             应用首页目录
   │        │   └── index.ux      应用首页文件
+  │        └── top               榜单页目录
+  │        │   └── index.ux      榜单页文件
+  │        └── index             详情页目录
+  │            └── index.ux      详情页文件
   └── package.json              定义项目需要的各种模块及配置信息复制代码

增加的页面在manifest.json中对应字段修改

{
  "router": {
    "entry": "page/index",
    "pages": {
      "page/index": {
        "component": "index"
      },
+      "page/top": {
+        "component": "index"
+      },
+      "page/detail": {
+        "component": "index"
+      }
    }
  },
  "display": {
-    "titleBarBackgroundColor": "#f2f2f2",
-    "titleBarTextColor": "#414141",
+    "titleBarBackgroundColor": "#00B51D",
+    "titleBarTextColor": "#ffffff",
    "menu": true,
    "pages": {
      "page/index": {
        "titleBarText": "首页",
        "menu": false
      },
+      "page/top": {
+        "titleBarText": "排行榜",
+        "menu": false
+      },
+      "page/detail": {
+        "titleBarText": "详情页",
+        "menu": false
+      }
    }
  }
}复制代码

2.编写首页界面

需要注意的是，快应用的样式布局和web有比较多不同的地方，快应用的布局都采用flex方式实现，如果你不以前没有用过flex，请提前熟悉flex布局相关的概念和属性。这里推荐看阮一峰flex布局的博文

首页可以看到需要一个顶部的筛选组件，中间是电影列表组件，底部是tabbar组件。我们分别开始编写。

  • 顶部筛选组件

顶部筛选组件是固定在页面顶部的，所以定位的方式采用position:fixed来实现，由于固定在顶部会占用页面的高度，中级的列表也要相应的减掉这一部分的高度，列表中的内容才不会被挡住。所以中间的列表容器元素需要添加margin-top:100px样式规则。

template部分代码

<template>
    <div class="container">
        <div class="filter-wrap">
            <text class="filter active">正在热映</text>
            <text class="filter">即将上映</text>
        </div>
    </div>
</template>复制代码

style部分代码

.container {
    display: flex;
}
​
.filter-wrap {
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    background-color: #00B51D;
    justify-content: center;
    align-items: center;
}
​
.filter {
    text-align: center;
    color: #ffffff;
    width: 200px;
    height: 50px;
    border: 1px solid #ffffff;
    font-size: 24px;
}
​
.active {
    background-color: #ffffff;
    color: #00B51D;
}复制代码

现在筛选器的界面已经写出来

快应用技术干货分享（第三篇）

中间列表组件

中间的列表我们采用官方的list组件来实现，官方的list组件在渲染的时候会复用相同type属性的list-item，这样会提高我们的渲染效率和性能。 需要注意的是不同结构的list-item是不可以用相同的type属性的，会造成应用崩溃。

template部分代码

<list class="movie-list">
    <block for="[1,2,3,4,5]">
        <list-item type="movie">
            <div class="movie">
                <div class="poster">
                    <image src=""></image>
                </div>
                <div class="info">
                    <div class="top">
                        <div class="title">
                            <text class="name">毒液</text>
                            <text class="year">2018</text>
                        </div>
                        <div class="rating">
                            <text class="average">9.0</text>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="wrap">
                            <text>类型 </text>
                            <text>科幻</text>
                        </div>
                        <div class="wrap">
                            <text>演员 </text>
                            <text>广东吴彦祖</text>
                        </div>
                        <div class="wrap">
                            <text>导演 </text>
                            <text>广东彭于晏</text>
                        </div>
                    </div>
                </div>
            </div>
        </list-item>
    </block>
    <list-item type="nomore">
        <text>没有更多了~</text>
    </list-item>
</list>复制代码

style部分代码

.movie {
    height: 300px;
    margin: 20px 20px 0 20px;
    width: 100%;
    flex-direction: row;
}
​
.info {
    flex-direction: column;
    flex-grow: 1;
    padding: 0 20px;
}
​
.top {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 30px;
}
​
.bottom {
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-around;
}
​
.bottom text {
    font-size: 26px;
}
​
.name {
    font-size: 36px;
}
​
.title {
    flex-direction: column;
}
​
.poster {
    width: 230px;
}
​
.poster image {
    width: 100%;
    height: 100%;
}
​
.rating {
    height: 100px;
    width: 100px;
    border-radius: 20px;
    background-color: #f0f3f5;
    justify-content: center;
}
​
.average {
    color: #27a;
}复制代码

现在列表布局的界面已经写出来

快应用技术干货分享（第三篇）

  • 底部选项卡

快应用中的底部选项卡没有提供类似于微信小程序的配置方式，所以需要我们自己来写一个通用的组件，底部选项卡组件我们可以使用官方的tabs组件来实现，当然也可以使用其他组件来模拟实现。这里我们使用的div组件模拟完成。

底部选项卡是要固定在页面底部的，所以需要我们可以采用position:fixed的方式实现，由于选项卡在底部占用了页面高度，所以中间的列表需要把这一部分的高度减掉，采用padding-bottom:100px，这样我们的列表滑到底部后才不会被底部的选项卡挡住一部分内容。

template部分代码

<div class="tabbar">
    <div class="tab">
        <image src="/common/picture/ing-active.png"></image>
        <text class="active-tab">首页</text>
    </div>
    <div class="tab">
        <image src="/common/picture/coming.png"></image>
        <text class="">排行榜</text>
    </div>
</div>复制代码

style部分代码

.container {
    display: flex;
    padding: 100px 0;
}
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    border-top-width: 1px;
    border-color: #bbbbbb;
    background-color: #ffffff;
    flex-direction: row;
    border-top-color: black
}
.tab {
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.tab image {
    height: 60px;
    width: 60px;
}
.tab text {
    font-size: 20px;
}
.active-tab {
    color: #27a;
}复制代码

底部选项卡的界面完成了

快应用技术干货分享（第三篇）

到此，整个界面有了一个应用的雏形，我们还需要帮选项卡把页面跳转的功能加上，方便我们编写排行榜的界面。页面跳转我们使用@system.router相关的接口来完成，具体的接口使用方法你可以在文档这里找到。下面我们给出针对我们项目的使用的代码。/size]

加上跳转方法和事件的template代码

<font color="rgb(51, 51, 51)"><div class="tabbar">
    <div class="tab" onclick="switchTab('/page/index')">
        <image src="/common/picture/ing-active.png"></image>
        <text class="active-tab">首页</text>
    </div>
    <div class="tab" onclick="switchTab('/page/top')">
        <image src="/common/picture/coming.png"></image>
        <text class="">排行榜</text>
    </div>
</div></font>复制代码

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

import router from "@system.router"
​
export default {
    switchTab: function (uri) {
        router.replace({
            uri: uri
        })
    }
}复制代码

现在我们的选项卡组件就具备了页面跳转的能力了。

3.编写榜单页界面

榜单的页面实际上就是一个列表加上底部选项卡，和我们首页很相似，我们可以把首页的代码修改一下，作为榜单的界面。

template部分代码

<div class="container">
    <list class="movie-list">
        <block for="[1,2,3,4,5]">
            <list-item type="movie">
                <div class="movie">
                    <div class="number">
                        <text>{{$idx + 1}}</text>
                    </div>
                    <div class="poster">
                        <image src=""></image>
                    </div>
                    <div class="info">
                        <div class="top">
                            <div class="title">
                                <text class="name">毒液</text>
                                <text class="year">2018</text>
                            </div>
                            <div class="rating">
                                <text class="average">9.0</text>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="wrap">
                                <text>类型</text>
                                <text>科幻</text>
                            </div>
                            <div class="wrap">
                                <text>演员</text>
                                <text>广东吴彦祖</text>
                            </div>
                            <div class="wrap">
                                <text>导演</text>
                                <text>广东彭于晏</text>
                            </div>
                        </div>
                    </div>
                </div>
            </list-item>
        </block>
        <list-item type="nomore">
            <text>没有更多了~</text>
        </list-item>
    </list>
    <div class="tabbar">
        <div class="tab" onclick="switchTab('/page/index')">
            <image src="/common/picture/ing.png"></image>
            <text class="">首页</text>
        </div>
        <div class="tab" onclick="switchTab('/page/top')">
            <image src="/common/picture/coming-active.png"></image>
            <text class="active-tab">排行榜</text>
        </div>
    </div>
</div>复制代码

style部分代码（与首页的style代码的不同之处）

.container {
    display: flex;
-    padding: 100px 0;
+.   padding-bottom: 100px;
}
​
.movie {
    height: 300px;
-    margin: 20px 20px 0 20px;
+    margin: 20px 20px 0 0;
    width: 100%;
    flex-direction: row;
}
​
-   .filter-wrap {
-       position: fixed;
-       top: 0;
-       left: 0;
-       height: 100px;
-       width: 100%;
-       background-color: #00B51D;
-       justify-content: center;
-       align-items: center;
-   }
​
-   .filter {
-       text-align: center;
-       color: #ffffff;
-       width: 200px;
-       height: 50px;
-       border: 1px solid #ffffff;
-       font-size: 24px;
-   }
​
-   .active {
-       background-color: #ffffff;
-       color: #00B51D;
-   }
​
+   .number {
+       width: 80px;
+       justify-content: center;
+   }
​
+   .number text{
+       font-size: 26px;
+   }复制代码

现在榜单页的界面部分也完成了

快应用技术干货分享（第三篇）

4.编写详情页界面

详情页面主要就是单个电影更详细的信息了，也没有太多复杂的布局方法，全部采用flex布局把信息按照合理的方式排列出来就可以了。下面直接给出相应的代码。

template代码

<template>
    <div class="container column">
        <div class="film-detail">
            <div class="film-image">
                <image src=""></image>
            </div>
            <div class="film-info column">
                <div class="info-container">
                    <div class="column">
                        <text class="film-title">毒液</text>
                        <text class="film-year">2018</text>
                    </div>
                    <div class="film-rating column">
                        <block>
                            <text class="label">评分</text>
                            <text class="rating">9</text>
                        </block>
                    </div>
                </div>
                <div class="directors">
                    <text class="label">导演：</text>
                    <text class="detail-wrap">
                        <block for="[1,2,3]">
                            <span class="person">广东吴彦祖 </span>
                        </block>
                    </text>
                </div>
                <div class="casts">
                    <text class="label">主演：</text>
                    <text class="detail-wrap">
                        <block for="{{[1,2,3]}}">
                            <span class="person">广东彭于晏 </span>
                        </block>
                    </text>
                </div>
                <div class="genres">
                    <text class="label">类型：</text>
                    <block for="{{[1,2]}}">
                        <text class="person">科幻</text>
                    </block>
                </div>
                <div class="genres">
                    <text class="label">国家/地区：</text>
                    <block for="{{[1,2]}}">
                        <text class="person">美国</text>
                    </block>
                </div>
                <div class="collect-wish">
                    <text>看过（10）</text>
                    <text>想看（10）</text>
                </div>
            </div>
        </div>
        <div class="summary column">
            <text class="title">剧情简介</text>
            <text class="content">
                2018漫威压轴巨制，蜘蛛侠最强劲敌“毒液”强势来袭！
            </text>
        </div>
        <div class="content-wrap column">
            <text class="title">演职人员</text>
            <list class="casts-list">
                <list-item class="column cast" type="cast" for="[1,2,3,4,5,6,7]">
                    <image src=""></image>
                    <text>yanyuan</text>
                </list-item>
            </list>
        </div>
    </div>
</template>复制代码

style部分代码

.column {
    flex-direction: column;
}
​
.container {
    padding: 20px;
}
​
.film-image {
    padding-right: 20px;
    width: 300px;
    flex-shrink: 0;
}
​
.film-image image {
    height: 400px;
    width: 300px;
}
​
.info-container {
    justify-content: space-between;
    margin-bottom: 50px;
}
​
.film-title {
    font-size: 40px;
    lines: 2;
}
​
.film-year {
    color: #999999;
}
​
.film-rating {
    height: 100px;
    width: 100px;
    border-radius: 20px;
    background-color: #f0f3f5;
    justify-content: center;
    align-content: center;
}
​
.label {
    text-align: center;
    color: #888888;
    font-size: 26px;
}
​
.rating {
    text-align: center;
    color: #ff680d;
    font-size: 40px;
}
​
.detail-wrap {
    /*flex-wrap: wrap;*/
}
​
.directors, .casts {
    align-items: flex-start;
}
​
.directors .label, .casts .label {
    width: 100px;
}
​
.person {
    font-size: 26px;
}
​
.collect-wish text {
    font-size: 26px;
}
​
.title {
    height: 60px;
    border-left-width: 10px;
    border-left-color: #00B51D;
    background: linear-gradient(to right, #f0f3f5, #ffffff);
    margin: 30px 0;
    padding-left: 20px;
}
​
.content {
    line-height: 50px;
}
​
.casts-list {
    flex-direction: row;
    height: 300px;
    width: 100%;
}
​
.cast {
    width: 200px;
    height: 100%;
    margin: 0 20px 10px 0;
}
​
.cast image {
    width: 200px;
}
​
.cast text {
    text-align: center;
    lines: 1;
}复制代码

现在详情页的静态界面已经完成

快应用技术干货分享（第三篇）

到现在为止，整个快应用的静态界面都已经完成了，接下来我们就要开始把数据接入写好的页面了。

文档github项目地址： github.com/vivoquickap…

本文出自“快应用生态平台成员—vivo官方技术团队”


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
软件测试经验与教训

软件测试经验与教训

Cem Kaner、James Bach、Bret Pettichord / 机械工业出版社 / 2004-1 / 35.00

本书汇总了293条来自软件测试界顶尖专家的经验与建议，阐述了如何做好测试工作、如何管理测试，以及如何澄清有关软件测试的常见误解，读者可直接将这些建议用于自己的测试项目工作中。这些经验中的每一条都是与软件测试有关的一个观点，观点后面是针对运用该测试经验的方法、时机和原因的解释或例子。 本书还提供了有关如何将本书提供的经验有选择性地运用到读者实际项目环境中的建议，在所有关键问题上所积累的经验，以......一起来看看 《软件测试经验与教训》 这本书的介绍吧!

码农工具
Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3