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

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

圖1 JS FA應用效果圖

構建頁面布局

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

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

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

圖2 展示區(qū)布局

根據布局結構的分析，實現(xiàn)頁面基礎布局的代碼示例如下（其中四個 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 目錄下。

構建頁面樣式

開發(fā)者在 index.css 文件中需要設定的樣式主要有 flex-direction（主軸方向），padding（內邊距）， font-size（字體大?。┑?。在構建頁面樣式中，還采用了 css 偽類的寫法，當焦點移動到 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;
}

構建頁面邏輯

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

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

邏輯頁面代碼示例如下：

// 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';
    }
  },
}

效果示例

實現(xiàn)此實例后，效果示例如下圖所示。

圖3 運行效果