介紹

本篇Codelab我們將教會大家如何構(gòu)建一個簡易的OpenHarmony新聞客戶端（JS版本）。應(yīng)用包含兩級頁面，分別是主頁面和詳情頁面，兩個頁面都展示了豐富的UI組件，其中詳情頁的實現(xiàn)邏輯中還展示了如何通過調(diào)用相應(yīng)接口，實現(xiàn)跨設(shè)備拉起FA。本教程將結(jié)合以下內(nèi)容進行講解：

1．頂部tabs以及新聞列表list的使用

2．每條新聞的文本框以及圖像

3．布局及頁面跳轉(zhuǎn)

4．設(shè)備發(fā)現(xiàn)以及跨設(shè)備拉起FA

最終效果預(yù)覽如下圖所示：

搭建OpenHarmony環(huán)境

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以Hi3516DV300開發(fā)板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進制）。
2. 搭建燒錄環(huán)境：
   1. [完成DevEco Device Tool的安裝]
   2. [完成Hi3516開發(fā)板的燒錄]
   3. 鴻蒙開發(fā)指導(dǎo)文檔：[qr23.cn/AKFP8k]
3. 搭建開發(fā)環(huán)境：
   1. 開始前請參考[工具準(zhǔn)備] ，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū) 創(chuàng)建工程（模板選擇“Empty Ability”），選擇JS或者eTS語言開發(fā)。
   3. 工程創(chuàng)建完成后，選擇使用[真機進行調(diào)測] 。

分布式組網(wǎng)

完成本篇Codelab我們還需要完成開發(fā)板的分布式組網(wǎng)，本示例以Hi3516DV300開發(fā)板為例，參照以下步驟進行：

1. 硬件準(zhǔn)備：準(zhǔn)備兩臺燒錄相同的版本系統(tǒng)的Hi3516DV300開發(fā)板A、B。

2. 兩個開發(fā)板A、B配置在同一個WiFi網(wǎng)絡(luò)之下。
   打開設(shè)置-->WLAN-->點擊右側(cè)WiFi開關(guān)-->點擊目標(biāo)WiFi并輸入密碼。
   

3. 將設(shè)備A、B設(shè)置為互相信任的設(shè)備。

   • 找到系統(tǒng)應(yīng)用“音樂”。

   

   • 設(shè)備A打開音樂，點擊左下角帶箭頭的流轉(zhuǎn)按鈕，彈出列表框，在列表中會展示遠端設(shè)備的id。
     
   • 選擇遠端設(shè)備B的id，另一臺開發(fā)板（設(shè)備B）會彈出驗證的選項框。
     
   • 設(shè)備B點擊允許，設(shè)備B將會彈出隨機PIN碼，將設(shè)備B的PIN碼輸入到設(shè)備A的PIN碼填入框中。
     

   配網(wǎng)完畢。

代碼結(jié)構(gòu)解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在最后的參考中提供下載方式，接下來我們會用一小節(jié)來講解整個工程的代碼結(jié)構(gòu)：

• images：存放工程使用到的圖片資源。
• index：構(gòu)成新聞列表頁面，包括index.hml布局文件、index.css樣式文件、index.js邏輯處理文件。
• detail：構(gòu)成新聞詳情頁面，包括detail.hml布局文件、detail.css樣式文件、detail.js邏輯處理文件。
• config.json：配置文件。

添加主頁新聞類型

首先為我們的應(yīng)用添加頂部新聞類型，用于切換不同類別的新聞。這里會使用到tabs、tab-bar控件，同時使用for循環(huán)對新聞的title進行遍歷，新聞的標(biāo)題有All、Health、Finance、Technology、Sport、Internet、Game七大類。圖片示例和代碼如下：

< div class="container" >
    < tabs index="0" vertical="false" onchange="changeNewsType" >
        < tab-bar class="tab-bar" mode="scrollable" >
            < text class="tab-text" for="{{ title in titleList }}" >{{ title.name }} < /text >
        < /tab-bar >
    < /tabs >
< /div >

添加主頁頂部新聞類型

1. 我們需要實現(xiàn)一個新聞item的布局，其樣式包含左邊的新聞標(biāo)題、右邊的新聞圖片以及下方的新聞分割線，圖片示例和代碼如下：
   

   < div style="flex-direction : column" >
       < div style="flex-direction : row" >
             < text class="text" >
                 {{ news.title }}
             < /text >
             < image class="image" src="{{ news.imgUrl }}" >
                 < /image >
             < /div >
        < div style="height : 2px; width : 100%; background-color : #97d2d4d4;" >
        < /div >
    < /div >
   

2. 我們需要實現(xiàn)一個新聞列表，也就是將上方的新聞item進行一個循環(huán)的展示，這需要用到list、list-item的相關(guān)知識點。我們需要將newsList新聞列表數(shù)據(jù)進行循環(huán)，所以新聞item的布局外層需要嵌套一個list和list-item，圖片示例和代碼如下：
   

   < list class="list" >
       < list-item for="{{ news in newsList }}" onclick="itemClick(news)" >
              // 新聞item的布局代碼填充到這里         
       < /list-item >
   < /list >
   

3. 我們需要實現(xiàn)新聞類型的切換，每一條新聞都會有一個新聞類型，當(dāng)選擇All的時候默認(rèn)展示所有類型的新聞，當(dāng)選擇具體的新聞類型時，如選擇Health，則需要篩選出屬于Health類型的新聞進行展示。添加一個自定義函數(shù)changeNewsType，代碼如下所示：

   // 選擇新聞類型
   changeNewsType: function (e) {
     const type = titles[e.index].name;
     this.newsList = [];
     if (type === 'All') {
       // 展示全部新聞
       this.newsList = newsData;
     } else {
       // 分類展示新聞
       const newsArray = [];
       for (var news of newsData) {
          if (news.type === type) {
             newsArray.push(news);
         }
       }
       this.newsList = newsArray;
     }
   }
   

詳情頁頁面布局

詳情頁面包含新聞標(biāo)題、閱讀量和喜好數(shù)、新聞圖片、新聞文字以及下方的狀態(tài)欄。狀態(tài)欄包括1個可輸入文本框和4個功能按鍵，圖片示例和代碼如下：

< div class="container" >
    < text class="text-title" >{{ title }}< /text >
    < text class="text-reads" >reads: {{ reads }}   likes: {{ likes }}< /text >
    < image class="image" src="{{ imgUrl }}" >< /image >
    < text class="text-content" >
        {{ content }}
    < /text >
    < !-- 詳情頁底部-- >
    < div class="bottom" >
        < textarea class="textarea" placeholder="Enter a comment." >< /textarea >
        < image class="image-bottom" src="/common/images/icon_message.png" >< /image >
        < image class="image-bottom" src="/common/images/icon_star.png" >< /image >
        < image class="image-bottom" src="/common/images/icon_good.png" >< /image >
        < image class="image-bottom" src="/common/images/icon_share.png" onclick="toShare" >< /image >
    < /div >
< /div >

需要注意的是detail.hml只是展示了頁面的布局結(jié)構(gòu)，其具體的布局樣式需要參考detail.css文件。

跳轉(zhuǎn)詳情頁

完成新聞列表頁面和詳情頁的布局后，需要實現(xiàn)頁面跳轉(zhuǎn)的功能。新聞列表頁面中綁定一個list-item的點擊事件itemClick，其中傳入的參數(shù)是news（新聞的詳細數(shù)據(jù)）。

< list-item for="{{ news in newsList }}" onclick="itemClick(news)" >

在JS中頁面跳轉(zhuǎn)需要在JS文件的頭部引入如下一行代碼：

import router from '@system.router';

實現(xiàn)list-item的點擊事件itemClick，其代碼如下所示：

itemClick(news) {
  // 跳轉(zhuǎn)到詳情頁面
  router.push({
    uri: 'pages/detail/detail',
    params: {
      'title': news.title,
      'type': news.type,
      'imgUrl': news.imgUrl,
      'reads': news.reads,
      'likes': news.likes,
      'content': news.content
    }
  });
}

設(shè)備發(fā)現(xiàn)

首先給分享按鈕添加一個分享事件toShare，代碼如下所示：

< image class="image-bottom" src="/common/images/icon_share.png" onclick="toShare" >< /image >

然后調(diào)用getTrustedDeviceListSync()，獲取所有可信設(shè)備的列表，代碼如下所示：

import deviceManager from '@ohos.distributedHardware.deviceManager';

toShare() {
    // 創(chuàng)建設(shè)備管理實例
    deviceManager.createDeviceManager('com.huawei.codelab', (err, data) = > {
      if (err) {
        return;
      }
      this.deviceMag = data;
      // 獲取所有可信設(shè)備的列表
      this.deviceList = this.deviceMag.getTrustedDeviceListSync();
    });
    // 循環(huán)遍歷設(shè)備列表,獲取設(shè)備名稱和設(shè)備Id
    for (let i = 0; i < this.deviceList.length; i++) {
      this.deviceList[i] = {
        deviceName: this.deviceList[i].deviceName,
        deviceId: this.deviceList[i].deviceId,
        checked: false
      };
    }
    this.$element('showDialog').show();
  }

最后自定義dialog彈窗顯示所有可信設(shè)備，代碼如下所示：

< dialog id="showDialog" class="select-device-dialog" >
    < div class="select-device-wrapper" >
        < text class="select-device-title" >選擇設(shè)備< /text >
        < list class="select-device-list" >
            < list-item class="select-device-item" for="{{ deviceList }}" id="list" >
                < text class="select-device-item-left" >{{ $item.deviceName }}
                < /text >
                < input class="select-device-item-right" type="checkbox" name="Device" value="{{$idx}}"
                       @change="selectDevice({{$idx}})" checked="{{$item.checked}}" >
                < /input >
            < /list-item >
        < /list >
        < div class="choose-ok-or-not" >
            < text class="select-device-btn" @click="chooseCancel" >取消< /text >
            < text class="select-device-btn" @click="chooseComform" >確定< /text >
         < /div >
    < /div >
< /dialog >

最終實現(xiàn)的效果如下所示：

說明： 本工程項目包含getTrustedDeviceListSync()獲取所有可信設(shè)備的列表方法，請選擇API 7或以上版本。

分布式拉起

彈出設(shè)備列表后，選擇設(shè)備并點擊“確定”按鈕，將會分布式拉起另外一臺設(shè)備，其具體實現(xiàn)代碼如下所示：

chooseComform() {
    this.$element('showDialog').close();
    for (let i = 0; i < this.deviceList.length; i++) {
      // 判斷設(shè)備是否被選中
      if (this.deviceList[i].checked) {
      const params = {
        url: 'pages/detail/detail',
        title: this.title,
        type: this.type,
        imgUrl: this.imgUrl,
        reads: this.reads,
        likes: this.likes,
        content: this.content,
      };

      const wantValue = {
        bundleName: 'com.huawei.newsdemooh',
        abilityName: 'com.huawei.newsdemooh.MainAbility',
        deviceId: this.deviceList[i].deviceId,
        parameters: params
      };

      featureAbility.startAbility({
        want: wantValue
      }).then((data) = > {
        console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
      });
      console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
      console.info('featureAbility.startAbility end');
      }
    }
}

審核編輯 黃宇