3.2.2 页面制作过程
观察个人微站运行效果，如图3-18所示，可以发现页面分为上下两部分。上部分显示一个图片，并在图片上显示文字和图片。下部分显示有背景色的五行两列的表格。
页面制作就是在页面上添加组件，组件需要被放置到合适的位置，并设置其属性。按照表3-1列出的上部分组件属性设置说明，制作上部分页面。表3-1中的添加组件是指要添加的组件，父组件是指组件要添加到的位置，属性设置是指本案例中组件属性应该设置的值。
表3-1 上部分组件属性说明
|
添加组件 |
父组件 |
属性设置 |
|
视图组件 |
页面组件 |
定位方式=相对定位 |
|
图片组件 |
视图组件 |
在图片地址中上传背景图bg.jpg，并使用该图片 高=350px 宽=100% 预定义图片模式=aspectFill |
|
视图组件1 |
视图组件 |
宽=100% 文字对齐方式=居中对齐 定位方式=绝对定位 距离顶部=190px |
|
文本组件 |
视图组件1 |
文本=软件工程 字体=楷体 大小=20px 样式=粗体 颜色=白色 |
|
行列组件 |
视图组件 |
宽=100% 定位方式=绝对定位 距离顶部=290px |
|
列 |
行列组件 |
添加两列形成5列 设置每列文字对齐方式=居中对齐 |
|
图片组件 |
列 |
在图片地址中上传图片q.png，并使用该图片 高=30px 宽=90% 预定义图片模式=scaleToFill |
|
文本组件 |
列 |
文本=信息 字体=楷体 颜色=白色 |
按照表3-2列出的下部分组件属性设置说明，制作下部分页面。
表3-2 下部分组件属性说明
|
添加组件 |
父组件 |
属性设置 |
|
视图组件 |
页面组件 |
背景颜色=深紫色 边框样式=实线 边框宽度=10px 边框颜色=浅紫色 |
|
行列组件 |
视图组件 |
共添加5个行列组件 |
|
列 |
行列组件 |
删除一列形成两列 |
|
文本组件 |
列 |
文本=毕业院校：麻省理工 字体大小=12px 颜色=白色 |
制作好后，可以先进行浏览器预览。预览显示不正确时，应该检查组件属性设置情况。预览正确后，可以发布到测试环境、导入微信开发者工具、在手机微信中运行。