HarmonyOS实战
目前，CSDN官方App并没有适配鸿蒙系统，但是我们是程序员，完全可以自己开发，何须等待CSDN呢？
自己动手丰衣足食，今天，我们来实现一个有趣的鸿蒙卡片。也就是将自己的最新的博文前10篇搬上鸿蒙卡片，并展示给大家。
除了将10篇最新的博文搬上鸿蒙卡片之外，我们还需要给鸿蒙的卡片提供可编辑的功能，让用户替换博主，自动替换对应博主的前10篇博文。
下面，我们来一一实现这些功能。
我们首先需要观察一下CSDN博文的标题长度，可以发现有些CSDN标题还是很长的，如果用小卡片肯定连标题都显示不下。所以，我们需要提供4*4的长卡片。
创建步骤如下，这里我们首先通过DevEco Studio创建一个纯JS项目，如下图所示：
项目创建完成之后，我们会进入项目开发页面。这里选择entry-src右键创建JS的4*4的卡片内容，具体创建步骤如下所示：
这样，我们就完成了卡片的创建。但是这里一般来说，因为我们刚创建项目的时候，没有默认的2*2卡片，所以这里会创建2*2和4*4两个卡片。
不过，2*2太小，并不能完整显示博文列表。下面，我们来实现博文浏览的4*4功能卡片。
首先，我们可以回博文的最上面看看最终的实现效果。可以发现，我们的4*4卡片有头像、姓名、简介以及一个最新的博文列表。
所以，我们需要创建这样一个布局，来完美搭建这些信息，并完成博文点击的交互。首先，是我们需要实现的界面布局代码（index.hml）：
这里，我们的image组件头像用的是固定的image图片。因为获取到的CSDN头像图片，image组件不更新，只有Java卡片目前能完美实现该功能。（js卡片好像只有展示第一次能显示图片，后面更新图片都不显示）
这也是我期望反馈给鸿蒙官方的问题。所以，这里我们用固定的头像替代，除了头像图片无法替换之外，其他信息可以完美替换。
接着，我们需要实现样式（index.css）代码：
最后，就是完成交互信息的反馈。卡片的交互变量以及交互跳转界面都是通过index.json文件进行定义的，代码如下：
其中，blogList是博文列表信息，head是头像，但因为image不更新，这里忽略。name是博文的归属者昵称，content是博主的简介。
actions这里只定义了一个跳转界面的交互，也就是用户点击博文信息，然后就跳转到博文的详细页面。参数为博文的链接，在博文详细页面通过WebView进行加载。
既然要获取到博文首页的博文信息以及用户的资料，这就涉及到爬虫解析。而Java比较好用的爬虫解析包是jsoup。
而后面我们选择替换博主博文信息，也是同一个方法。所以，需要将解析的代码独立出来，减少代码的冗余程度。具体的帮助类为LYJUtils.java：
而卡片的数据初始化方法在WidgetImpl.java类之中，它的初始化代码如下所示：
这样运行之后，我们的初始化卡片博文样式就完美实现了。
到这里，我们仅仅实现了卡片的数据展示。但我们看一个博主的博文并不是只看标题的，而是要看自己感兴趣的内容。所以，点击博文标题应该实现跳转到博文详情界面。
首先，我们实现点击博文标题跳转到博文。读者可以往博文前面看一下，是不是有index.json文件中有一个actions定义，这里的类就是跳转的界面。
WebViewPageSlice.java代码如下所示：
这个界面的内容很简单，就是获取跳转传递过来的网址参数信息。然后WebView组件，根据网址的内容即可，当然需要支持JavaScript，不然加载出来的界面非常难看。
博文的XML布局文件代码如下所示（ability_web_view_page.xml）：
不过，这些内容都是博主自己的。肯定有读者也对本博主的内容不感兴趣，想要看其他博主的内容怎么办？
我们这里，可以提供一个滑动可选组件，让用户选择自己感兴趣的博主。这样卡片就能完成更新，达到真实意义上的交互。
首先，我们需要定义卡片的编辑跳转界面，需要在config.json文件中定义，代码如下：
这里，主要的定义代码是formConfigAbility，它负责提供卡片的编辑交互功能的跳转界面，与之前跳转界面一样，就是一个普通的Java界面类。
下面，我们实现这里编辑界面，并提供完成交互的能力。
这里，博主只定义了5位博主的信息添加到Picker组件，如果你刚学习鸿蒙开发，对Picker组件陌生，可以参考博主的鸿蒙开发专栏，有专门一篇博文讲解该组件。
运行之后，长按卡片点击编辑，就会弹出如下界面。
当然，弹出来的界面有点不好看，主要是因为博主没有系统学过设计与色彩搭配，这里就随便找了一个背景。
读者如果点击上面的“替换博主信息”的按钮，就会自动替换卡片上的内容，与博文最开头实现的效果一致。
编辑界面的XML布局文件代码如下：
到这里，我们的CSDN博文卡片就移值到鸿蒙系统的卡片上了。当然，你可以添加更多的火爆博主供大家选择。
不过，这里还有几个地方需要注意：
第一，上面的HTML解析需要用到jsoup.jar文件，你在项目中使用的使用，需要将jsoup包复制到entry-libs文件夹中，并右键点击add Libraries。
第二，上面的网页请求涉及到网络权限，需要在项目的配置文件config.json中配置网络权限，代码如下：
第三，默认创建的2*2与4*4的卡片，但我们只需要4*4的卡片，你只需要在配置文件中，删除supportDimensions属性里面的2*2即可。
本文源代码地址：https://gitee.com/liyuanjinglyj/CSDNCard
本文正在参与“有奖征文 | HarmonyOS征文大赛”活动：