HarmonyOS NEXT开发实战：DevEco AI辅助编程工具（CodeGenie）的使用

引言
DevEco AI辅助编程工具（CodeGenie）为开发者提供高效的应用/元服务AI辅助编程工具，支持HarmonyOS NEXT领域的智能知识问答、ArkTS代码补全/生成和万能卡片生成能力，提高开发者编码效率。
一、安装使用
建议使用DevEco Studio 5.0.3.403及以上版本。
文档中心

二、新建项目
项目构建：
若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
 

选择Application应用开发，选择模板“Empty Ability”，点击Next进行下一步配置。
 

进入配置工程界面，Compatible SDK表示兼容的最低API Version，此处以选择“5.0.0(12)”为例，其他参数保持默认设置即可
 

点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

三、代码实现
代码实现只涉及到需要编程的代码文件
在右侧打开CodeGenie，登录账号。
 

根据需求输入想要实现的卡片效果
 

点击Save to Project，将创建好的卡片保存至项目中，命名为Poetry01。
 

保存创建成功。
 

Poetry01代码实现

let storage2086445731 = new LocalStorage()  

@Entry(storage2086445731)  
@Component  
struct Content_F {  
  // @LocalStorageProp('textSubTitleF') textSubTitleF: string = ''  
  @State imgLogo: Resource = $r('app.media.icon') // 应用图标资源  
  @LocalStorageProp('textMainTitleX') textMainTitleX: string = '沁园春' // 主标题文本，从本地存储读取，默认为“沁园春”  
  @LocalStorageProp('backgroundImg') backgroundImg: Resource = $r('app.media.bgImage01') // 背景图片资源，从本地存储读取，默认为bgImage01  
  @LocalStorageProp('textMainTitleB') textMainTitleB: string = '北国风光，千里冰封，万里雪飘。\n' +  
    '望长城内外，惟余莽莽；大河上下，顿失滔滔。\n' +  
    '山舞银蛇，原驰蜡象，欲与天公试比高。\n' +  
    '须晴日，看红装素裹，分外妖娆。\n' +  
    '江山如此多娇，引无数英雄竞折腰。\n' +  
    '惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。\n' +  
    '一代天骄，成吉思汗，只识弯弓射大雕。\n' +  
    '俱往矣，数风流人物，还看今朝。' // 主内容文本，从本地存储读取，默认为《沁园春·雪》  
  ClickToHome = () : void => {  
    // 点击跳转到主页面的函数  
    postCardAction(this, {  
      "action": "router",  
      // 配置跳转的 UIAbility 名称  
      'abilityName': 'EntryAbility',  
      // 配置传递的参数  
      "params": {  
        'targetPage': 'page1' // 目标页面为 page1  
      }  
    });  
  }  
  build() {  
    Stack({ alignContent: Alignment.TopEnd }) {  
      // 堆叠容器，内容顶部右对齐  
      Column() {  
        // 垂直布局  
        Text(this.textMainTitleX)  
          // 主标题文本  
          .constraintSize({ maxWidth: '80%' }) // 最大宽度限制为 80%  
          .fontColor(Color.Black) // 字体颜色为黑色  
          .fontSize('18') // 字体大小为 18  
          .fontWeight(FontWeight.Bold) // 字体粗细为粗体  
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文字溢出时显示省略号  
          .maxLines(1) // 最大显示一行  
        Column() {  
          // 垂直布局  
          // Text(this.textSubTitleF)  
          //   .opacity(0.6)  
          //   .fontColor(Color.Black)  
          //   .fontSize('10')  
          //   .fontWeight(FontWeight.Regular)  
          //   .textOverflow({ overflow: TextOverflow.Ellipsis })  
          //   .maxLines(1)  
          Row() {  
            // 水平布局  
            Text(this.textMainTitleB)  
              // 主内容文本  
              .opacity(0.9) // 透明度为 0.9  
              .fontColor(Color.Black) // 字体颜色为黑色  
              .fontSize('14') // 字体大小为 14  
              .fontWeight(FontWeight.Medium) // 字体粗细为中等  
              .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文字溢出时显示省略号  
              .lineHeight('19') // 行高为 19  
          }  
          .margin({ top: '2' }) // 顶部外边距为 2  
        }  
        .width('100%') // 宽度为 100%  
        // .alignItems(HorizontalAlign.Start)  
        // .justifyContent(FlexAlign.SpaceBetween)  
        .alignItems(HorizontalAlign.Center) // 子组件水平居中对齐  
        .justifyContent(FlexAlign.Center) // 子组件垂直居中对齐  
      }  
      .width('100%') // 宽度为 100%  
      .height('100%') // 高度为 100%  
      .alignItems(HorizontalAlign.Start) // 子组件水平左对齐  
      // .justifyContent(FlexAlign.SpaceBetween)  
      .justifyContent(FlexAlign.Center) // 子组件垂直居中对齐  
      Row() {  
        // 水平布局  
        Image(this.imgLogo)  
          // 应用图标  
          // .width('20')  
          // .height('20')  
          .width('36') // 宽度为 36  
          .height('36') // 高度为 36  
      }  
      .margin({ top: '3' }) // 顶部外边距为 3  
    }  
    .backgroundImage(this.backgroundImg) // 设置背景图片  
    .backgroundImageSize({ width: '100%', height: '100%' }) // 背景图片尺寸为 100% 宽度和高度  
    .padding('12') // 内边距为 12  
    .width('100%') // 宽度为 100%  
    .height('100%') // 高度为 100%  
    .onClick(this.ClickToHome) // 点击事件绑定到 ClickToHome 函数  
  }  
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.
• 57.
• 58.
• 59.
• 60.
• 61.
• 62.
• 63.
• 64.
• 65.
• 66.
• 67.
• 68.
• 69.
• 70.
• 71.
• 72.
• 73.
• 74.
• 75.
• 76.
• 77.
• 78.
• 79.
• 80.
• 81.
• 82.
• 83.
• 84.
• 85.
• 86.
• 87.
• 88.
• 89.
• 90.
• 91.
• 92.
• 93.
• 94.
• 95.

复制

Poetry01相关代码说明
目录结构
 

在module > src > main > ets 路径下， formcommon目录用于存放生成卡片的逻辑代码。
formsetting：存放用户可配置的文件。
formsetting > formdbsetting：自定义配置以数据库方式进行卡片刷新的相关参数。
formdbsetting > formdbinfo：存放包含卡片信息的Info.ets文件，可在Info.ets文件中，添加卡片刷新所需要的具体的数据，后续会读取该文件并将数据存入数据库中。
UserSettings.ets：可以自定义卡片刷新时从数据库获取数据的规则、数据解析规则、message内容刷新规则。
formsetting > formhttpsetting：自定义配置以网络请求方式进行卡片刷新的相关参数。
formhttpsetting > formhttpinfo：存放包含卡片信息的Info.ets文件，可在Info.ets文件中添加获取卡片刷新数据的URL。
UserSettings.ets：可以自定义卡片刷新时从URL获取数据的规则、数据解析规则、message内容刷新规则。
说明
如需使用网络请求方式刷新卡片页面，需在EntryFormAbility.ets文件中将FormDbUpdate的接口注释掉，并将启用FormHttpUpdate接口。
formsetting > FormAction.ets：配置卡片事件。
utils：存放工具类的目录，用户不可修改，如果修改再次生成逻辑代码时utils目录会被刷新。

自定义配置卡片事件
 

可以在FormAction.ets文件中配置触发卡片router事件时具体的页面分发规则。
在EntryAbility.ets文件的onWindowStageCreate方法中会插入页面分发接口的调用，示例如下：
 

此接口默认插入到方法开头，可根据当前工程onWindowStageCreate逻辑来将此接口移动至合适的位置，保证页面能正常跳转。
四、效果实现