更新时间：2023-02-09 GMT+08:00
总体开发思路
渲染模板预览视图所需的数据保存在pages字段中。调用智能信息模板查询API接口获取pages字段，经多个前端组件开发后，即可渲染出适配于自用平台的预览视图。总体开发流程如图1所示。
关键阶段介绍
- 调用查询模板API，获取pages字段。
调用智能信息查询模板API，获取pages字段，具体调用方式请参见如何调用API和智能信息查询模板API。
- 自定义app-preview父组件。
app-preview父组件是一个包容所有子组件的容器，在app-preview父组件中定义一个类名为previews的div作为模板容器。
- 编写父组件重要JavaScript逻辑。
pages字段是字符串类型的参数，需先转换成JSON对象，便于后续传参。
- 缩放比例计算，确保模板显示比例正常，详情请参见outerWidth和pages[0].style。
- 控制组件的大小和位置，详情请参见pages[0].content。
- 编写父组件的HTML和CSS。
在app-preview父组件中，定义一个类名为previews的div作为模板容器。再定义一个div容器，用来容纳遍历content数组获取的每个item对象。具体代码请参见父组件代码示例。
- 自定义不同类型的子组件。
- 编写子组件的HTML、CSS、JavaScirpt。
子组件代码示例提供了各类型子组件的HTML、CSS和JavaScript代码段供参考，开发时请以实际使用框架和组件库为准。
- 判断各子组件类型是否显示。
遍历page[0].content获取item，根据item.type组件类型判断该子组件是否显示于目标可视界面中。如判断显示，则将item传入对应组件；如判断隐藏，则不传入。
- 拼接显示的子组件形成预览视图。
