# 总体开发思路
渲染模板预览视图所需的数据保存在pages字段中。调用智能信息模板查询API接口获取pages字段，经多个前端组件开发后，即可渲染出适配于自用平台的预览视图。总体开发流程如[图1]所示。
图1将模板数据渲染成预览视图的开发流程   
![](https://support.huaweicloud.com/devg-koomessage/zh-cn_image_0000001473201117.png)
#### 关键阶段介绍
1. 调用查询模板API，获取pages字段。 调用智能信息查询模板API，获取pages字段，具体调用方式请参见[如何调用API](https://support.huaweicloud.com/api-koomessage/um023.html)和[智能信息查询模板API](https://support.huaweicloud.com/api-koomessage/ListAIMTemplates.html)。
   
2. 自定义app-preview父组件。 app-preview父组件是一个包容所有子组件的容器，在app-preview父组件中定义一个类名为previews的div作为模板容器。
   
3. 编写父组件重要JavaScript逻辑。
   ![](https://support.huaweicloud.com/devg-koomessage/public_sys-resources/note_3.0-zh-cn.png)
   pages字段是字符串类型的参数，需先转换成JSON对象，便于后续传参。
   - 缩放比例计算，确保模板显示比例正常，详情请参见[outerWidth](https://support.huaweicloud.com/devg-koomessage/dg003_1.html#dg003_1__section11212434161011)和[pages\[0\].style](https://support.huaweicloud.com/devg-koomessage/dg003_1.html#dg003_1__section6880191001117)。
   
   - 控制组件的大小和位置，详情请参见[pages\[0\].content](https://support.huaweicloud.com/devg-koomessage/dg003_1.html#dg003_1__section17421114181219)。
    
4. 编写父组件的HTML和CSS。 在app-preview父组件中，定义一个类名为previews的div作为模板容器。再定义一个div容器，用来容纳遍历content数组获取的每个item对象。具体代码请参见[父组件代码示例](https://support.huaweicloud.com/devg-koomessage/dg003_2.html)。
   
5. 自定义不同类型的子组件。 提供多种类型的子组件，如文本组件、图片组件、按钮组件等，可按需调用。
   
6. 编写子组件的HTML、CSS、JavaScirpt。 [子组件代码示例](https://support.huaweicloud.com/devg-koomessage/dg004_3.html)提供了各类型子组件的HTML、CSS和JavaScript代码段供参考，开发时请以实际使用框架和组件库为准。
   
7. 判断各子组件类型是否显示。 遍历page\[0\].content获取item，根据item.type组件类型判断该子组件是否显示于目标可视界面中。如判断显示，则将item传入对应组件；如判断隐藏，则不传入。
   
8. 拼接显示的子组件形成预览视图。 判断显示的多个子组件拼接成预览视图，最终呈现在前端的预览视图即是包含了多个子组件的app-preview父组件。