鴻蒙OS 開發(fā)一個JS FA應(yīng)用

本章節(jié)主要介紹如何開發(fā)一個 JS FA 應(yīng)用。此應(yīng)用相對于 Hello World 應(yīng)用模板具備更復(fù)雜的頁面布局、頁面樣式和頁面邏輯。該頁面可以通過將焦點移動到不同顏色的圓形來選擇不同的食物圖片，也可以進(jìn)行添加到購物車操作，應(yīng)用效果圖如下。

圖1 JS FA應(yīng)用效果圖

構(gòu)建頁面布局

開發(fā)者在 index.hml 文件中構(gòu)建頁面布局。在進(jìn)行代碼開發(fā)之前，首先要對頁面布局進(jìn)行分析，將頁面分解為不同的部分，用容器組件來承載。根據(jù) JS FA 應(yīng)用效果圖，此頁面一共分成三個部分：標(biāo)題區(qū)、展示區(qū)和購物車區(qū)。根據(jù)此分區(qū)，可以確定根節(jié)點的子節(jié)點應(yīng)按列排列。

標(biāo)題區(qū)是由兩個按列排列的 tex t組件實現(xiàn)，購物車區(qū)由一個 text 組件構(gòu)成。展示區(qū)由按行排列的 swiper 組件和 div 組件組成，如下圖所示：

• 第一部分是由一個容器組件 swiper，包含了四個image 組件構(gòu)成；
• 第二部分是由一個容器組件 div，包含了一個 text 組件和四個畫布組件 canvas 繪制的圓形構(gòu)成。

圖2 展示區(qū)布局

根據(jù)布局結(jié)構(gòu)的分析，實現(xiàn)頁面基礎(chǔ)布局的代碼示例如下（其中四個 image 組件和 canvas 組件通過 for 指令來循環(huán)創(chuàng)建）：

<!-- index.hml -->
<div class="container">
  <div class="title-section">
    <div class="title">
      <text class="name">Food</text>
      <text class="sub-title">Choose What You Like</text>
    </div>
  </div>
  <div>
    <swiper id="swiperImage" class="swiper-style">
      <image src="{{$item}}" class="image-mode" focusable="true" for="{{imageList}}"></image>
    </swiper>
    <div class="container">
      <div class="description-first-paragraph">
        <text class="description">{{descriptionFirstParagraph}}</text>
      </div>
      <div class="color-column">
        <canvas id="{{$item.id}}" onfocus="swipeToIndex({{$item.index}})" class="color-item" focusable="true"
            for="{{canvasList}}"></canvas>
      </div>
    </div>
  </div>
  <div class="cart">
    <text class="{{cartStyle}}" onclick="addCart" onfocus="getFocus" onblur="lostFocus" focusable="true">
      {{cartText}}</text>
  </div>
</div>

說明

common 目錄用于存放公共資源，swiper 組件里展示的圖片需要放在 common 目錄下。

構(gòu)建頁面樣式

開發(fā)者在 index.css 文件中需要設(shè)定的樣式主要有 flex-direction（主軸方向），padding（內(nèi)邊距）， font-size（字體大小）等。在構(gòu)建頁面樣式中，還采用了 css 偽類的寫法，當(dāng)焦點移動到 canvas 組件上時，背景顏色變成白色，也可以在 js 中通過 focus 和 blur 事件動態(tài)修改 css 樣式來實現(xiàn)同樣的效果。

/* index.css */
.container {
  flex-direction: column;
}
 
.title-section {
  flex-direction: row;
  height: 60px;
  margin-bottom: 5px;
  margin-top: 10px;
}
 
.title {
  align-items: flex-start;
  flex-direction: column;
  padding-left: 60px;
  padding-right: 160px;
}
 
.name {
  font-size: 20px;
}
 
.sub-title {
  font-size: 15px;
  color: #7a787d;
  margin-top: 10px;
}
 
.swiper-style {
  height: 250px;
  width: 350px;
  indicator-color: #4682b4;
  indicator-selected-color: #f0e68c;
  indicator-size: 10px;
  margin-left: 50px;
}
 
.image-mode {
  object-fit: contain;
}
 
.color-column {
  flex-direction: row;
  align-content: center;
  margin-top: 20px;
}
 
.color-item {
  height: 50px;
  width: 50px;
  margin-left: 50px;
  padding-left: 10px;
}
 
.color-item:focus {
  background-color: white;
}
 
.description-first-paragraph {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 30px;
}
 
.description {
  color: #7a787d;
  font-size: 15px;
}
 
.cart {
  justify-content: center;
  margin-top: 20px;
}
 
.cart-text {
  font-size: 20px;
  text-align: center;
  width: 300px;
  height: 50px;
  background-color: #6495ed;
  color: white;
}
 
.cart-text-focus {
  font-size: 20px;
  text-align: center;
  width: 300px;
  height: 50px;
  background-color: #4169e1;
  color: white;
}
 
.add-cart-text {
  font-size: 20px;
  text-align: center;
  width: 300px;
  height: 50px;
  background-color: #ffd700;
  color: white;
}

構(gòu)建頁面邏輯

開發(fā)者在 index.js 文件中構(gòu)建頁面邏輯，主要實現(xiàn)的是兩個邏輯功能：

• 當(dāng)焦點移動到不同顏色的圓形，swiper 滑動到不同的圖片；
• 當(dāng)焦點移動到購物車區(qū)時，“Add To Cart”背景顏色從淺藍(lán)變成深藍(lán)，點擊后文字變化為“Cart + 1”，背景顏色由深藍(lán)色變成黃色，添加購物車不可重復(fù)操作。

邏輯頁面代碼示例如下：

// index.js
export default {
  data: {
    cartText: 'Add To Cart',
    cartStyle: 'cart-text',
    isCartEmpty: true,
    descriptionFirstParagraph: 'This is the food page including fresh fruit, meat, snack and etc. You can pick whatever you like and add it to your Cart. Your order will arrive within 48 hours. We gurantee that our food is organic and healthy. Feel free to ask our 24h online service to explore more about our platform and products.',
    imageList: ['/common/food_000.JPG', '/common/food_001.JPG', '/common/food_002.JPG', '/common/food_003.JPG'],
    canvasList: [{
      id: 'cycle0',
      index: 0,
      color: '#f0b400',
    }, {
      id: 'cycle1',
      index: 1,
      color: '#e86063',
    }, {
      id: 'cycle2',
      index: 2,
      color: '#597a43',
    }, {
      id: 'cycle3',
      index: 3,
      color: '#e97d4c',
    }],
  },
 
  onShow() {
    this.canvasList.forEach(element => {
      this.drawCycle(element.id, element.color);
    });
  },
 
  swipeToIndex(index) {
    this.$element('swiperImage').swipeTo({index: index});
  },
 
  drawCycle(id, color) {
    var greenCycle = this.$element(id);
    var ctx = greenCycle.getContext("2d");
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(15, 25, 10, 0, 2 * 3.14);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
  },
 
  addCart() {
    if (this.isCartEmpty) {
      this.cartText = 'Cart + 1';
      this.cartStyle = 'add-cart-text';
      this.isCartEmpty = false;
    }
  },
 
  getFocus() {
    if (this.isCartEmpty) {
      this.cartStyle = 'cart-text-focus';
    }
  },
 
  lostFocus() {
    if (this.isCartEmpty) {
      this.cartStyle = 'cart-text';
    }
  },
}