# 编写app-preview组件的JavaScript逻辑
您可通过编写app-preview组件的重要js逻辑来设置原模板在预览界面的缩放比例、大小和位置，相关参数及用途如[表1]所示。
 表1js逻辑参数及用途 
| 参数名                                                   | 用途               |
|:---|:---|
| [outerWidth]         | 控制模板在预览视图中的缩放尺寸。 |
| [pages\[0\].style]    | 设置模板显示的缩放比例值。    |
| [pages\[0\].content] | 控制父组件的大小和位置。     |
   
 #### outerWidth
outerWidth参数用于控制模板在预览视图中的缩放尺寸，该参数应和包裹模板的div盒子在宽度上保持一致。假设盒子宽度为230px，则app-preview父组件的outerWidth字段值也应为230px。您可根据模板的实际展示需求自行决定outerWidth值，判断是否传入。
```
<div >      
//  将pages传入app-preview自定义组件，使用pages字段接收     
<app-preview [pages]="pages" [outerWidth]="230"></app-preview> 
</div>
```
 #### pages\[0\].style
在app-preview父组件中，用outerWidth除以pages\[0\].style.width得到一个缩放比例scale，然后将scale值赋给pages\[0\].style，以确保模板的整体显示比例正常。
```
let scale = outerWidth / parseInt(pages[0].style.width, 10); 
pages[0].style.transform = `scale(${scale})`
```
 #### pages\[0\].content
在app-preview父组件中，遍历content数组，为数组里每个item的style样式属性增加left、top、width、height属性，对应item.x、item.y、item.w、item.h，最后统一加上单位px，以控制每个子组件的大小和定位位置。
```
for (let item of pages[0].content) {     
item.style = {       
...item.style,       
left: joinPX(item.x),       
top: joinPX(item.y),       
width: joinPX(item.w),       
height: joinPX(item.h)    
 };   
}   
joinPX(data) {    
return data + 'px';  
 }
```
![](https://support.huaweicloud.com/devg-koomessage/public_sys-resources/note_3.0-zh-cn.png)
目前在pages的数据对象中，除pages\[0\].style和pages\[0\].content外的参数暂未使用。