介紹

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

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

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

3．布局及頁面跳轉

4．設備發現以及跨設備拉起FA

最終效果預覽如下圖所示：

搭建OpenHarmony環境

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

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。
2. 搭建燒錄環境：
   1. [完成DevEco Device Tool的安裝]
   2. [完成Hi3516開發板的燒錄]
   3. 鴻蒙開發指導文檔：[qr23.cn/AKFP8k]
3. 搭建開發環境：
   1. 開始前請參考[工具準備] ，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導] 創建工程（模板選擇“Empty Ability”），選擇JS或者eTS語言開發。
   3. 工程創建完成后，選擇使用[真機進行調測] 。

分布式組網

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

1. 硬件準備：準備兩臺燒錄相同的版本系統的Hi3516DV300開發板A、B。

2. 兩個開發板A、B配置在同一個WiFi網絡之下。
   打開設置-->WLAN-->點擊右側WiFi開關-->點擊目標WiFi并輸入密碼。
   

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

   • 找到系統應用“音樂”。

   

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

   配網完畢。

代碼結構解讀

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

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

添加主頁新聞類型

首先為我們的應用添加頂部新聞類型，用于切換不同類別的新聞。這里會使用到tabs、tab-bar控件，同時使用for循環對新聞的title進行遍歷，新聞的標題有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. 我們需要實現一個新聞item的布局，其樣式包含左邊的新聞標題、右邊的新聞圖片以及下方的新聞分割線，圖片示例和代碼如下：
   

   < 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. 我們需要實現一個新聞列表，也就是將上方的新聞item進行一個循環的展示，這需要用到list、list-item的相關知識點。我們需要將newsList新聞列表數據進行循環，所以新聞item的布局外層需要嵌套一個list和list-item，圖片示例和代碼如下：
   

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

3. 我們需要實現新聞類型的切換，每一條新聞都會有一個新聞類型，當選擇All的時候默認展示所有類型的新聞，當選擇具體的新聞類型時，如選擇Health，則需要篩選出屬于Health類型的新聞進行展示。添加一個自定義函數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;
     }
   }
   

詳情頁頁面布局

詳情頁面包含新聞標題、閱讀量和喜好數、新聞圖片、新聞文字以及下方的狀態欄。狀態欄包括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只是展示了頁面的布局結構，其具體的布局樣式需要參考detail.css文件。

跳轉詳情頁

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

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

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

import router from '@system.router';

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

itemClick(news) {
  // 跳轉到詳情頁面
  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
    }
  });
}

設備發現

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

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

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

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

toShare() {
    // 創建設備管理實例
    deviceManager.createDeviceManager('com.huawei.codelab', (err, data) = > {
      if (err) {
        return;
      }
      this.deviceMag = data;
      // 獲取所有可信設備的列表
      this.deviceList = this.deviceMag.getTrustedDeviceListSync();
    });
    // 循環遍歷設備列表,獲取設備名稱和設備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彈窗顯示所有可信設備，代碼如下所示：

< dialog id="showDialog" class="select-device-dialog" >
    < div class="select-device-wrapper" >
        < text class="select-device-title" >選擇設備< /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 >

最終實現的效果如下所示：

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

分布式拉起

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

chooseComform() {
    this.$element('showDialog').close();
    for (let i = 0; i < this.deviceList.length; i++) {
      // 判斷設備是否被選中
      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');
      }
    }
}

審核編輯 黃宇