鸿蒙开发实战：快速上手【万能卡片】

本文链接：https://blog.csdn.net/m0_62167422/article/details/137047689

本文详细指导了如何在HUAWEIDevEcoStudio中创建并配置一个基于ImmersiveData模板的卡片应用，包括项目创建、代码编辑和运行模拟器的过程，以及鸿蒙开发的基础知识和学习资源推荐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）练习准备

本案例使用HUAWEI DevEco Studio 3.0.0.800，API4-API7都可以体验，由于IDE版本与API不断升级与兼容性等问题，大家练习时可能会遇到一些细节上的差异，整体流程是一致的。

（二）创建项目

1.创建工程项目

打开DevEco Studio选择你的Ability 模板，这里我们选择Empty Ability模板，然后点击Next进行下一步。如图1所示。

2.配置工程项目

配置的项目工程，如图2和图3所示，然后单击Finish创建。

%E5%9B%BE%E7%89%8728.png

%E5%9B%BE%E7%89%8729.png

（三）创建卡片

1.找到entry中src->main下的js文件，右击选择new中的Service Widget选项，如图4所示。

2.选择immersive Data卡片模板，如图5所示，点击Next进行下一步。

%E5%9B%BE%E7%89%8731.png

3.配置卡片模板信息，如图6，然后点击Finish创建。

%E5%9B%BE%E7%89%8732.png

（四）修改代码

1.查看js下刚刚创建的卡片，如图7。

打开该文件下的index.hml文件，修改代码。

<!--    用堆叠stack组件包裹节点div组件-->
<stack style="background-color: #f5d354;width: 100%;height: 100%;" onclick="routerEvent">
<!--    右边图片（添加此段代码）-->
    <div class="right-img">
        <image class="images" src="/common/ic_default_image.png" alt="img" ></image>
    </div>
<!--    标题信息-->
    <div class="container">
        <div class="title_wrapper">
            <text class="title_big">
                {
  { $t('strings.title_big') }}
            </text>
            <text class="title_small">
                {
  { $t('strings.title