DevEco Studio实时模板（代码片段）

最新推荐文章于 2024-12-16 20:44:06 发布

HarmonyOS技术分享

最新推荐文章于 2024-12-16 20:44:06 发布

阅读量945

点赞数 14

分类专栏：实用小工具：提升工作效率文章标签： harmonyos 编辑器

本文链接：https://blog.youkuaiyun.com/weixin_50985468/article/details/143649397

版权

实用小工具：提升工作效率专栏收录该内容

1 篇文章

订阅专栏

DevEco Studio实时模板

1.为什么要配置实时模板？

提高开发速度：快速生成代码框架，减少手动编写样板代码的时间。
支持快速迭代：快速响应需求变更，快速生成或修改代码。
减少错误：对于复杂的代码结构，模板可以作为一个可靠的起点，降低出错率。

在初阶，第一次创建项目，可以看到Index.ets 默认写的代码，会看不懂，不过没关系

以做项目为目的，肯定是要写多个页面的，当我们创建新的ArkTS File时，就是一个空白页，这个时候，就需要一套空白的模板，进阶版的复制粘贴就是配置实时模板，可以快速创建空白页面，直接开始搭建页面了，是每个程序员必备的技能。

举例：VSCode的代码片段

DevEco Studio也是必不可少的，这也是入门必备的技能

接写来带你手搓自己的模板。

2.如何创建新的Index文件

第一步：在pages文件夹下，右键鼠标

第二步：新建 → ArkTS File

第三步：命名

这个时候你就得到一个空白文件

3.配置实时模板（代码片段）

第一步：点击左上角的文件，找到设置选项

第二步：在搜索框内，搜索实时模板

第三步：点击 + ，然后选择实时模板

第四步：命名

第五步：然后在模板文本中，粘贴下面我已经写好的示例代码

@Entry
@Component
struct Index {
  build() {
    Column(){


      Row(){


      }
      
    
    }
    .width("100%")
    .height("100%")
  }
}

第五步：点击变更，这里我们先默认暂时勾选所有位置，最后点击确认即可

4.使用实时模板

使用 Tab 键或者使用鼠标点击第一个即可

就可以快速生成一个代码结构，直接可以开始搭建页面了

当然还有很多类似这样的实时模板，就需要我们真正熟悉掌握了之后，再逐个添加了。

5.其他实时模板

再给大家推荐三个初阶比较常用的实时模板

1.console.log 打印日志

console.log("",a)

2.textOverflow 文本溢出裁切(2行)

console.log("",a)

3.Image 展示图片/图标

Image($r("app.media.startIcon"))
   .width(40)

结语

你的点赞就是我持续更新最大的动力！

#HarmonyOS #鸿蒙开发