三、切图与重构

直接用手机截屏然后放到Photoshop中处理。小程序做不同机型的适配很方便，提供了一个rpx的单位，官方说明如下：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

我的手机截图尺寸是 720px 1280px， 为了方便计算，直接将截图按比例调整为 750px 1333px。那么此时的单位换算就是1px = 1rpx，也就是说一个图片在Photoshop中是 80px * 80px，那么就直接写width: 80rpx;height: 80rpx;。

整理出各图标大小以及各元素之间的宽高间距等，方便在sass中使用。如下图：

按照第二步划分的页面组件，对组件进行基本的填充。然后页面内容就十分简单了。

src/pages/index.wpy：

<style type="sass">
    .body, .tab_item {
        height: 100%;
    }
</style>
<template>
    <view class="body">
        <view class="tab_item tab_message">
            <component id="message"></component>
        </view>
        <view class="tab_item tab_contact">
            <component id="contact"></component>
        </view>
        <view class="tab_item tab_discovery">
            <component id="discovery"></component>
        </view>
        <view class="tab_item tab_me">
            <component id="me"></component>
        </view>
        <component id="tab"></component>
    </view>
</template>

src/pages/chat.wpy:

<style type="sass">
    .body {
        height: 100%;
        background-color: #ededed;
    }
</style>
<template>
    <view class="body">
        <component id="chartboard"></component>
        <component id="input"></component>
    </view>
</template>

接着完成基本的重构工作：