六、WebApp 二手信息站点页面制作（IVX 快速开发教程）

六、二手信息站点页面制作

在了解了基础可视组件后，我们可以通过这些可视组件进行站点页面开发，在此以一个二手交易网站站点页面为例，本教程示例并不是成熟完善的示例，需要各位读者进行少量完善，示例只是用于功能讲解，了解 iVX 开发项目的一般流程。

本次完成的二手信息站点首页为信息展示页面，用户在发布物品信息时需要登录账号。用户注册使用了 iVX 自带的 手机短信验证码 进行注册，在接下来几节将会详细的讲解所需要使用到的后台组件。

6.1 完成二手交易站点首页开发

在此我们创建一个 相对定位 的 web应用 作为示例进行说明。创建示例后，为了使读者创建的项目与示例的一致，需要设置相同的页面大小，需要将屏幕大小更改为如图的小屏屏幕：

6.1.1 网站标题头制作

以下是当前页面展示图（由于主要是演示功能效果，此站点并不最求美观性）：

该页面的主要分为 3 个大块，分别是：

• 顶部标题栏
• 顶部下分类与轮播页
• 网页中部展示内容信息
• 底部的页尾

这三个大块还可以细分，顶部标题栏 分为 左侧站点信息、 搜侧搜索 与 发布内容区域；顶部下部分可分为 类型分类与轮播页；内容展示部分分为图片与信息以及底部的具体页尾内容。

我们根据基本的 行 和 列 制作网站标题头：

我们可以看到，该标题头可以当做是两个行，左侧一个、右侧一个；在此可以将者两个内容放在一个行中，这两个行的宽度各为 50%，左侧行的 水平对齐 为 左对齐，右侧行的 水平对齐 为 右对齐，通过这样的设置，即可完成示例所示，完成不同侧的元素显示。

我们先创建一个 页面，命名为信息展示页，在信息展示页下创建一个 行 命名为 标题栏，再用 标题栏 作为父对象创建两个两个 行 于 标题栏 下，命名为 标题栏左侧 与 标题栏右侧。

在此需要注意，标题 左侧栏 需要放在标题 右侧栏 之下。在 iVX 中遵循越下部元素越靠前显示的规则，左右显示左为先右为后、上下显示上为先下为后；若你需要一个元素显示在一个另外一个元素左侧，就需要这个元素在在另一个元素之下。

随后我们可以给这些 行组件 设置一个统一的背景色为白色，再设置统一高度为 100px 即可。我们选中所有的 行组件，设置他们的相同属性，步骤如下：

接下来统一选中 标题右侧 和 标题左侧，设置他们的宽度为 50%：

最后需要设置的为 标题左侧栏 的 水平对齐 为 左侧对齐、右侧标题 栏 水平对齐 为 右侧对齐，垂直对齐 均为 居中：

接下来在 标题左侧行 中添加两个文本，修改文本属性后即可完成更改颜色：

在此你可能对该文本紧贴左侧边缘并不喜欢，可以更改该文本属性中的 左外边距 为 10 即可让该文本距离左侧有一定距离：

接下来我们在 标题右侧行 中添加 文本组件 以及两个 按钮组件，并且给这 3 个组件设置相同的高度，使这 3 个组件能够统一高度美观，在此也将他们的文本内容、背景色进行修改：

此时标题栏即可制作完成：

但为了更好的使这个页面看起来有层次感，我们可以修改当前信息展示页的 背景色 为淡暗灰色，颜色代码为 #F8F8F8，修改后页面看起来更加美观：

6.1.2 网站标题头制作

接下来我们查看一下广告信息区域的布局：

我们通过上图很明显的可以看到，该区域与标题栏类似，由一个 行组件 包裹了两个容器组件，左侧的占比区域较小，右侧的较宽。在这里我们需要注意，该部分距离左侧与右侧有一定距离，此时我们需要创建一个行，命名为广告块；接下来设置这个 海报块行 的 水平对齐 为居中，在其内部创建一个子组件 行容器 命名为 广告内容，设置宽度为 90%，这样这个行就可以居中进行显示；最后两步则是在这个 海报内容行 中创建两个行，一个命名为 广告左侧 一个命名为 广告右侧 并且 广告左侧行 宽度为 30% 广告右侧 宽度为 70%，广告左侧 内创建一个 列 元素命名为 分类内容 即可，该部分结构如下（在这里需要注意，重复的内容为了精简内容提高阅读效率则不再赘述重复内容）：

接下来我们需要统一设置这些元素的高度为 300px，此高度为了防止高度不一致的情况出现。

接下来我们在左侧分类内容列中创建一个 按钮组件，设置文本为 “手机：华为、小米、OPPO”、宽度为 100%、高度为 50px：

随后将该按钮复制 6 个并修改其对应的文本，此时按钮就可以充满整个高度：

接着我们在广告右侧添加一个 轮播页：

轮播页 设置高度为 300px，设置好图片后完成的只是 轮播页背景 的添加，即可完成以下页面效果：

此时我们完成 轮播页 的背景添加，接下来还可以为这个 轮播页 创建文本；将 轮播页 作为一个容器，在其添加 行组件 命名为 轮播文本，接着在 轮播文本行 中添加 文本组件 即可为这个 轮播页 完成如下效果：

此时该 轮播页 的对象树如下：

样式可以按照个人的喜好完成自己的布局。

6.1.3 最新信息内容展示

接下来开始制作最新信息块。通过以上的制作已经对 行、列组件 布局有了一定的熟练度，接下来我们查看最新信息块的布局方式：

我们可以很清晰的看到该部分内容红色区域为 行、蓝色区域为 行、紫色为 行、绿色为 列。得知了布局信息后便很容易的完成该布局，由于内容相似，在此不再赘述，布局后的对象树：

接下来在 详情行组件 中创建一个列叫做 商品信息，宽度为 32% 、左侧外边距 为 8、上外边距 为 8；接着在商品信息列为图片和文字信息设置一个行方便控制布局：

之后再 图片行组件 中添加一张图片，设置宽度为 100%，在 商品文字信息中行中 添加一个文本：

此时复制商品信息多个在详情行下，即可完成该部分内容：

6.1.4 页尾完成

页尾的制作相信现在对于你来说应该十分简单，在此不再过多描述过程，只贴出对象树：

6.2.1 登录/注册页面制作

登录界面制作为 4 个行，并且设置对应的 外边距 即可，图示如下：

我们新创建一个 页组件 命名为 登录，随后创建一个 行组件 名为 登录块，再到 登录块行 中创建一个名为登录内容的 行组件，在登录内容行中创建 4 个 行组件，分别用作用命名包裹按钮与文本，设置 水平对齐 为 居中 即可，对象树 如下：

注册页也同理：

6.2.2 商品发布页制作

商品发布页与登录/注册页大致类似：

商品发布页的 对象树 图如下：

下拉选项组件 位于扩展组件之中，我们点击 扩展组件 进行 下拉选项组件 的添加：

下拉菜单组件 在此作为类型的选择菜单，添加完 下拉菜单组件 后，我们在 下拉菜单组件 属性栏中修改选项列表即可，不同选项之间使用逗号间隔即可完成：

富文本编辑器组件 位于 组件栏 右侧中部，点击即可添加到 富文本行 之中：

6.2.3 商品详情页制作

商品详情页 与其它页面保持一致的风格：

图中框选位置为 富文本组件，点击添加即可，方便之后的内容显示，该部分的 对象树 如下：