# 了解代码目录结构
当系统预置的组件无法满足用户需求时，用户可自定义组件并上传到华为云Astro大屏应用中使用。华为云Astro大屏应用为您预置了一些组件模板（Widget包），您可以基于组件模板开发自定义组件。
#### 获取组件模板包
1. 参考[登录华为云Astro大屏应用界面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6008.html)中操作，登录华为云Astro大屏应用界面。
2. 在主菜单中，选择"管理"，进入管理页面。
3. 在左侧导航栏中，选择"页面资产管理 \> 组件模板"。
4. 在组件模板列表中，单击所需的模板，进入模板详情页。 
   图1预置组件模板   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002152880956.png "点击放大")
   
   
5. 在模板详情页，单击"下载"，将模板下载到本地。
 
#### 认识Widget包目录结构
解压下载到本地的组件Widget包，认识组件结构。如解压EchartsWidgetTemplate组件包，其目录结构如[图2]所示。
图2Widget包目录结构   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158305745.png "点击放大")
![](https://support.huaweicloud.com/usermanual-astrocanvas/public_sys-resources/notice_3.0-zh-cn.png)
为了便于描述，对于名称不固定的手册，统一采用"{widget}"来命名。
- [i18n.json](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_7123.html)：组件的国际化资源文件，用于配置多语言。例如，messages-zh.json为中文，messages-en.json为英文。
- [packageinfo.json](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_7124.html)：组件的元数据描述文件。
- *[{widget}.css](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_7125.html)*：组件的样式文件，在该文件中编写组件的CSS样式。
- *[{widget}.editor.js](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_7126.html)*：组件核心渲染文件，负责组件编辑状态时需要渲染的界面和逻辑。
- *[{widget}.flt](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_7131.html)*：组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。
- *[{widget}.js](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_7181.html)*：组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。