了解代码目录结构

获取组件模板包

1. 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
2. 在主菜单中，选择“管理”，进入管理页面。
3. 在左侧导航栏中，选择“页面资产管理 > 组件模板”。
4. 在组件模板列表中，单击所需的模板模板，进入模板详情页。
   图1 预置组件模板
   

5. 在模板详情页，单击“下载”，将模板下载到本地。

认识Widget包目录结构

解压下载到本地的组件Widget包，认识组件结构。如解压EchartsWidgetTemplate组件包，其目录结构如图2所示。

图2 Widget包目录结构

为了便于描述，对于名称不固定的手册，统一采用“{widget}”来命名。

• i18n.json：组件的国际化资源文件，用于配置多语言。例如，messages-zh.json为中文，messages-en.json为英文。
• packageinfo.json：组件的元数据描述文件。
• {widget}.css：组件的样式文件，在该文件中编写组件的CSS样式。
• {widget}.editor.js：组件核心渲染文件。组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。
• {widget}.flt：组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。
• {widget}.js：组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。