介紹

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

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

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

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

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

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

搭建OpenHarmony環(huán)境

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

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

分布式組網(wǎng)

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

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

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

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

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

   

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

   配網(wǎng)完畢。

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

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

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

添加主頁(yè)新聞?lì)愋?/h1>

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

< 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 >

添加主頁(yè)頂部新聞?lì)愋?/h1>

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

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

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

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

詳情頁(yè)頁(yè)面布局

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

< 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 >
    < !-- 詳情頁(yè)底部-- >
    < 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只是展示了頁(yè)面的布局結(jié)構(gòu)，其具體的布局樣式需要參考detail.css文件。

跳轉(zhuǎn)詳情頁(yè)

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

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

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

import router from '@system.router';

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

itemClick(news) {
  // 跳轉(zhuǎn)到詳情頁(yè)面
  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)

首先給分享按鈕添加一個(gè)分享事件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è)備管理實(shí)例
    deviceManager.createDeviceManager('com.huawei.codelab', (err, data) = > {
      if (err) {
        return;
      }
      this.deviceMag = data;
      // 獲取所有可信設(shè)備的列表
      this.deviceList = this.deviceMag.getTrustedDeviceListSync();
    });
    // 循環(huán)遍歷設(shè)備列表,獲取設(shè)備名稱(chēng)和設(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 >

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

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

分布式拉起

彈出設(shè)備列表后，選擇設(shè)備并點(diǎn)擊“確定”按鈕，將會(huì)分布式拉起另外一臺(tái)設(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');
      }
    }
}

審核編輯 黃宇