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

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

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

構(gòu)建頁(yè)面布局

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

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

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

圖2 展示區(qū)布局

根據(jù)布局結(jié)構(gòu)的分析，實(shí)現(xiàn)頁(yè)面基礎(chǔ)布局的代碼示例如下（其中四個(gè) image 組件和 canvas 組件通過(guò) for 指令來(lái)循環(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>

說(shuō)明

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

構(gòu)建頁(yè)面樣式

開(kāi)發(fā)者在 index.css 文件中需要設(shè)定的樣式主要有 flex-direction（主軸方向），padding（內(nèi)邊距）， font-size（字體大?。┑?。在構(gòu)建頁(yè)面樣式中，還采用了 css 偽類的寫法，當(dāng)焦點(diǎn)移動(dòng)到 canvas 組件上時(shí)，背景顏色變成白色，也可以在 js 中通過(guò) focus 和 blur 事件動(dòng)態(tài)修改 css 樣式來(lái)實(shí)現(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)建頁(yè)面邏輯

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

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

邏輯頁(yè)面代碼示例如下：

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

效果示例

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

圖3 運(yùn)行效果