一、创作背景

在日常生活中，大家离不开app的使用，同时肯定也会遇到一些槽点。可能我就是单纯的想看一下天气，或者看一下快递到哪里了，但打开 APP 迎面而来的是广告弹窗，不晓得大家有没有这种困扰。所以现在大家都趋向于“轻”应用的使用，而卡片就是目前手机操作系统迈向“轻”量化使用体验的方案之一，今天卤煮要分享的也是使用CodeGenie辅助生成功能卡片，并通过CodeGenie进一步优化代码，跳脱app使用的繁重包袱。

二、实操步骤

1. 开发准备

卤煮的电脑已经全部配置好了，小白选手可以直接移步这里：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-overview

2. 项目实战

2.1 唤起CodeGenie，右边工具栏可以打开AI窗口

2.2 使用CodeGenie，生成万能卡片

输入“/”，选择生成卡片的模式，简单描述一下我们的需求

2.3 详述我们的需求，将指令输入给AI
直接按2.2中AI的实例，重新组织我们的需求将指令输给CodeGenie，略微一等，直接看看初版的效果吧

2.4 保存到工程
CodeGenie一次性帮我们生成了三个卡片工程，选择最为符合我们需求的保存到项目里，接下来进行微调

2.5 使用CodeGenie微调卡片布局
再次输入指令：帮我删除右上角的imgLogo，并且整体布局横向居中，然后等待输出

2.6 应用CodeGenie输出代码
应用AI帮我们微调的代码，最终达成的效果图如下：

2.7 代码实现
这样一个完美的卡片就已经生成了，从零开始全程10分钟不到，贴上代码：

let storage181664676 = new LocalStorage()

@Entry(storage181664676)
@Component
export struct Content_B1 {
  @LocalStorageProp('viewsText') viewsText: string = "12000"
  @LocalStorageProp('backgroundImg') backgroundImg: Resource = $r('app.media.random_background_6')
  @LocalStorageProp('goodsIconYImg_realImg') goodsIconYImg_realImg: Resource = $r('app.media.zoulu')
  @LocalStorageProp('textMainTitleY') textMainTitleY: string = "健康行走"
  ClickToGoodsYTarget = () : void => {
    postCardAction(this, {
      "action": "router",
      // Configuring the UIAbility name for jumping.
      'abilityName': 'EntryAbility',
      // Configuring the parameters to be transferred.
      "params": {
        'targetPage': 'page1'
      }
    });  
}  
  ClickToHome = () : void => {
    postCardAction(this, {
      "action": "router",
      // Configuring the UIAbility name for jumping.
      'abilityName': 'EntryAbility',
      // Configuring the parameters to be transferred.
      "params": {
        'targetPage': 'page1'
      }
    });  
}  
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Column() {
        Image(this.goodsIconYImg_realImg)
          .width('60')
          .height('60')
          .borderRadius('5')
          .onClick(this.ClickToGoodsYTarget)
        Column() {
          Text(this.textMainTitleY)
            .fontColor(Color.White)
            .fontSize('14')
            .fontWeight(FontWeight.Bold)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
          Row() {
            Text(this.viewsText)
              .fontColor(Color.White)
              .fontSize('12')
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
          }
          .alignItems(VerticalAlign.Center)
        }
        .margin({ top: '5' })
        .width('100%')
        .height('40%')
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.SpaceAround)
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .backgroundImage(this.backgroundImg)
    .backgroundImageSize({ width: '100%', height: '100%' })
    .padding('12')
    .width('100%')
    .height('100%')
    .onClick(this.ClickToHome)
  }
}

2.8 模拟器运行卡片
在编辑器的preview运行起来体验不是很直观，接下来直接在模拟器中运行起来看一下。
​启动本地模拟器​

• 通过 Tools > Device Manager启动设备

• 选择 ​Phone/mate70 pro

卤煮已经提前将模拟器跑起来啦，没有安装或者不会运行模拟器的，可以参考卤煮的另一篇文章
戳这里

• 卡片安装，右滑至负一屏，点击添加卡片

• 找到自己的卡片并添加到桌面

这样我们通过CodeGenie生成的卡片就完美的运行到了模拟器中，体验感拉满，比本地预览的效果要好得多。

三、体验感受​

在CodeGenie的辅助编程下，卤煮全程10分钟不到就可以生成一个记录每日运动步数的卡片，使用下来的整体感受可以总结如下：

1. 卡片生成速度很快，只要将需求尽可能详细的喂给AI，TA能做到的肯定能更加细致
2. 可生成多个卡片方案，提供了三个方案供卤煮选择，当然也可以都保存下来，取每个方案的需求点拼凑都可以
3. 代码风格整洁、结构清晰，可维护迭代性很高，对于卤煮这种代码洁癖选手来说，这一套流程走下来输出的代码，看着真叫一个舒适
4. 完美实行低耦合开发策略，卤煮项目里还有其他代码，CodeGenie生成的代码自动拆分模块且清晰明了，没有和现有业务代码混淆的情况

四、总结

伴随着科技的快速发展，压力倍增的我们，作为牛马的生活越来越倾向于“轻量化”，能躺平不内卷是我们的口号！！！中长期来看，随着鸿蒙生态设备进一步渗透和原子化服务成熟，卡片有望从 “功能补充” 升级为 “生态核心”。在万物互联场景下，用户对设备的关注点将从 “硬件本身” 转向 “服务获取效率”，卡片作为跨设备服务流转的核心载体，将成为连接用户与服务的首要入口。

市场前景很nice，让我们一起加入到“轻”应用开发的行列，卤煮在这，欢迎小伙伴们加入鸿蒙知识共建交流群！！！！！