三、切圖與重構(gòu)

直接用手機(jī)截屏然后放到Photoshop中處理。小程序做不同機(jī)型的適配很方便，提供了一個rpx的單位，官方說明如下：

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

我的手機(jī)截圖尺寸是 720px 1280px， 為了方便計算，直接將截圖按比例調(diào)整為 750px 1333px。那么此時的單位換算就是1px = 1rpx，也就是說一個圖片在Photoshop中是 80px * 80px，那么就直接寫width: 80rpx;height: 80rpx;。

整理出各圖標(biāo)大小以及各元素之間的寬高間距等，方便在sass中使用。如下圖：

按照第二步劃分的頁面組件，對組件進(jìn)行基本的填充。然后頁面內(nèi)容就十分簡單了。

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>

接著完成基本的重構(gòu)工作：