BilibiliCards 纯鸿蒙版哔哩哔哩服务卡片应用 v1.0

 BilibiliCards这是一款纯鸿蒙版的哔哩哔哩服务卡片应用。

开发环境：

IDE：DevEco Studio 2.1 Release

SDK：API Version 5

服务卡片的制作：

服务卡片设计

首先要先了解服务卡片，都有哪些尺寸，支持哪些组件，使用什么语言。然后规划好要实现哪些功能。

1.尺寸规格

服务卡片有4种尺寸，分别是微卡片、小卡片、中卡片、大卡片。官方提供了4种基础模板，12种高级模板。可以选择。基础模板如下图。

2.功能设计

服务卡片设计的初衷就是信息显示、服务直达。

3.开发语言

推荐JS。

界面实现

本着学习的目的，卡片界面就不使用模板了。不过我们还是要通过IDE>>File>>New>>Service Widget来添加服务卡片，这样添加IDE会自动添加配置和管理相关文件。然后服务卡片的界面重新编写。服务卡片常用的的容器组件有div、list、stack、swiper等。

div：基础容器组件

就是用来划分区域的。比较常用。比如追番服务卡片。

list：列表容器组件

就如上面所说的连续相同的部分，可以使用这个组件，List不但可以显示更多的内容，而且代码更少。

stack：堆叠容器组件

简单来说就是可以在一张图片上堆叠显示另一张图片，例如下图蓝框的图片覆盖在红框图片的上面。

swiper：滑动容器组件

正常情况下swiper是可以实现上下、左右滑动操作的。但是放置在桌面上的服务卡片，在左右滑动操作的时候，会使系统分不清楚用户是要左右滑动屏幕，还是左右滑动卡片。所以目前服务卡片的swiper容器是不支持手势滑动切换子组件的。

总结：服务卡片的设计比较简单，零基础也没关系，官方还贴心的准备了模板。只要挑选模板，设置变量也能快速构建。

API数据请求

卡片设计好之后，就需要通过Bilibili的API来获取数据了。主要就是给权限添加依赖，然后发送网络请求，通过API获取JSON的返回值，然后解析JSON得到我们需要的数据。

1.添加联网权限

2.添加依赖包

3.http请求

4.解析JSON

其他具体安装代码和步骤请查看压缩包中的README.md文件。