开发一个JS FA应用

目录

构建页面布局

构建页面样式

构建页面逻辑

效果示例

---

本文主要介绍如何开发一个JS FA应用。此应用相对于Hello World应用模板具备更复杂的页面布局、页面样式和页面逻辑。该页面可以通过将焦点移动到不同颜色的圆形来选择不同的食物图片，也可以进行添加到购物车操作，应用效果图如下。

图1 JS FA应用效果图

构建页面布局

开发者在index.hml文件中构建页面布局。在进行代码开发之前，首先要对页面布局进行分析，将页面分解为不同的部分，用容器组件来承载。根据JS FA应用效果图，此页面一共分成三个部分：标题区、展示区和购物车区。根据此分区，可以确定根节点的子节点应按列排列。

标题区是由两个按列排列的text组件实现，购物车区由一个text组件构成。展示区由按行排列的swiper组件和div组件组成，如下图所示：

• 第一部分是由一个容器组件swiper，包含了四个image组件构成；
• 第二部分是由一个容器组件div，包含了一个text组件和四个画布组件canvas绘制的圆形构成。

图2 展示区布局

 

根据布局结构的分析，实现页面基础布局的代码示例如下（其中四个image组件和canvas组件通过for指令来循环创建）：

<!-- index.hml -->
<div class="container">
  <div class="title">
    <text class="name">Food</text>
    <text class="sub-title">Choose What You Like</text>
  </div>
  <div>
    <swiper id="swiperIm