OpenHarmony开发实例：【新闻客户端】

 介绍

本篇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布局文件、detai