目录
开发背景
在日常生活中，人们经常会想查看当天或者最近几天的天气情况，但是却只有少数人与天气APP进行交互，因为只是一些简单的数据，用户们只需要查看了解即可，在本案例中我们通过开发一款简单的天气卡片来实现这个效果。
一、卡片的定义
卡片是FA的一种界面展示形式，将FA的重要信息或操作前置到卡片，以达到服务直达，减少体验层级的目的。
本案例所讲述的天气卡片是帮助使用者了解本地以及其他地方的天气，用户可以很直观的在卡片界面上看到本地的当天以及最近几天的天气情况。
二、卡片的使用方法
长按桌面上底部带有横杠的应用APP，在弹出的菜单中点击服务卡片，可以查看其对应的所有卡片。
长按桌面的卡片实例，在弹出的菜单中可以移除该卡片，也可以查看其对应应用的所有卡片。
卡片只有4种尺寸，分别是：1×2、 2×2、2×4、4×4。
三、卡片的框架图
最左边的图是卡片提供方，有两种选择：Service（原子化服务）和Application（传统应用），本次案例开发的天气卡片使用的卡片提供方就是原子化服务，省去了安装应用的步骤。
中间的是卡片管理服务，起着连接两边的桥梁般的作用。
最右边的图是卡片使用方，包括了桌面和服务中心，此次我们在服务中心里面来使用这个天气卡片。
四、开发卡片（使用JS方式）
1、打开DevEco Studio，创建一个新的HarmonyOS工程，选择模板Empty Ability（Java），按照下图配置完成后点击Finish，进入工程配置页面，等待工程同步完成：
2、工程同步完成后，我们在MainAbility所在的目录上右键单击，然后依次点击new-->Service Widget
3、在新的页面中Type选择Service Widget，Template有四个选择选择分别是宫格布局、图文布局、沉浸布局和列表布局，我们以图文布局为例选择Image With Information，然后点击next，接下来配置卡片信息
4、Service Widget Name对应卡片名称，Description为卡片描述，Ability Name对应卡片所挂靠的Page Ability，Type我们选择JS，Support Dimensions表示卡片支持的规格，我们选上所有规格，点击Finish
5、创建完成后的目录栏如图所示：
6、此时，我们点击MainAbility.java可以看到，与普通FA应用相比较，这里多了4个方法分别是
- onCreateForm：创建卡片时自动执行，实现卡片需要的初始化工作
- onUpdateForm：卡片的更新条件触发时执行
- onDeleteForm：删除卡片时自动执行，按需实现收尾工作
- onTriggerFormEvent：触发卡片消息事件时执行
以后我们如果要实现刷新，切换天气等功能，可以在这4个方法中编写相关代码
7、在config.json中也增加了一些新的配置信息：
- module中多了js模块，对应卡片的js资源和配置
- Pages表示JS Component的页面，用于列举页面的路由信息
- Window用于定义窗口显示方式的配置
- Type表示JS应用的类型，值为form表示这是个卡片实例
- abilities模块下新增了forms模块，对应卡片的配置，大家可以去官方文档查看详细说明
8、打开js目录下的index.hml文件，然后点击IDE右侧Preview标签查看卡片预览图
五、页面代码编写
下面我们通过编写图中这三个文件的内容来实现本次案例：
1、index.hml
<div class="image_with_info_layout">
<stack class="title_container">
<!-- stack方便内部组件的布局，组件的位置都是相对title_container来计算-->
<text class="temperature" >21°</text>
<div class="image_container">
<image src="/common/cloud.png" onclick="routerToApp"></image>
</div>
<div class="text_container">
<div style="justify-content: space-between;margin-bottom: 5px;">
<text class="primary_info" style="diaplay-index:2;width: 130px;">{
{ city }}</text>
<text class="primary_info" style="diaplay-index:1">{
{time}}</text>
</div>
<div style="justify-content: space-between;">
<text class="primary_info" style="diaplay-index:2;width: 130px;">{
{date}}</text>
<text class="primary_info" style="diaplay-index:1">Mon,15 of Xin Chou Year</text>
</div>
</div>
</stack>
<div class="items_container" ></div>
</div>2、Index.css
.image_with_info_layout {
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
}
.title_container {/* show in 4X4 */
display-index: 2;
flex-weight: 18;
min-height: 148px;
width: 100%;
background-image: url("/common/weather.png");
}
.temperature{
font-size: 35px;
color: #c5ffff;
margin-left: 4%;
margin-top: 30px;
}
.image_container{
height: 75px;
width: 75px;
position: absolute;
left: 65%;
top: 18px;
}
.text_container{
flex-direction: column;
justify-content: flex-end;
margin: 12px 12px 12px 12px;
}
.primary_info{
font-size: 17px;
color: #e5ffff;
}
.items_container {/* show in 2X2,2X4,4X4 */
display-index: 1;
flex-weight: 20;
min-height: 170px;
}3、Index.json
{
"data": {
"time": "15:00",
"date": "Sunday,June 06",
"temperature": "21°",
"city": "HangZhou"
},
"actions": {
"routerToApp": {
"action": "router",
"abilityName": "com.example.jsformdemo.MainAbility"
},
}
}六、效果展示
1、本次案例我们用的卡片提供方为Service（原子化服务），原子化服务在桌面上是没有图标的，所以在手机桌面上看不见，我们可以通过“服务中心”对原子化服务进行统一的查看、搜索和管理，在桌面左下角或者右下角按住向上滑动就可以进入服务中心了：
2、在常用中可以看到已经有我们所创建的entry_MainAbility的卡片显示出来（实验过程中，我发现p40服务中心没有常用，而mate30有，可能是因为配置问题）：
3、长按卡片，可以将其“添加到我的收藏”或者“添加到桌面”：
4、我们点击将其“添加到桌面”，此时，桌面上便出现了这个新的卡片，如图所示：
5、长按卡片，在弹出的菜单中点击”服务卡片”，就会展示出应用的所有卡片规格，如下图所示：
6、点击添加到桌面，如图所示：
7、此外，卡片上的天气图标还被赋予了点击事件，点击卡片上的天气图标就能进入卡片应用内了，如图所示：
到这里，使用JS方式开发卡片的案例已经告一段落，后续还会对卡片内部的样式编写，赋予卡片更新刷新时间功能，使其能动态获取数据。
总结
在万物互联时代，人们拥有的智能设备数量日益增多，设备和使用场景的多样性，使得应用开发变的更加复杂、应用入口更加丰富。原子化服务是HarmonyOS提供的一种面向未来的服务提供方式，是有独立入口的（用户可通过点击方式直接触发）、免安装的、可为用户提供一个或多个便捷服务的用户应用程序形态。
本次试验中我通过一个简单的案例了解到卡片开发的独特之处与其有趣的地方，对我在学习HarmonyOS有很大的帮助，在本次开发过程中我还发现了一个问题：启动手机模拟器时，选用p40，在服务中心没有找到常用这一板块，后来改用mate30在服务中心中有常用这一板块，有可能是因为配置问题导致的，应该以后会有所改进。
随着HarmonyOS版本的更新，有趣且便捷的设备及应用也会越来越多，期待人们的衣食住行会因此越来越舒适与便捷。