仿微信个人主页——微信小程序页面设计

仿微信个人主页——微信小程序页面设计

微信小程序页面设计：在这里仿微信个人主页做一个初步的还原，非高保真！！
上效果图：
（这里设计的是未更新微信最新版8.0.0的页面）

微信原图：

先来说说我的思路：
一、首先，要想适应所有手机，使得页面下方全部为灰色底板，我们可以先把页面背景底板颜色改了，我们选用官方给的灰色#ededed。（官方颜色是可以在微信官方《小程序设计指南》里面查到的，里面包括了很多微信设计标准，大家设计的时候可以看看。链接：微信小程序设计指南）
wxss

page{/*页面背景—————统一浅灰*/
  background-color: #ededed;
}

二、将我们的页面分模块
我这里分为了：用户信息（包括头像和名称）、功能横条（6个分为1/4/1）

功能横条之间用灰色横栏隔开：

<!--间隔灰横条-->
<view class="graydivide"></view>

.graydivide {/*灰色条*/
  height: 10px;
  background-color: #ededed;
  position:relative;
  top: 0px;
}

细节：中间的4个功能之间是没有灰色横条的，但是可以看到，在上下之间是有一条不完全的灰色细线分隔开的。所以这里怎么实现呢？
还记得我们的背景是灰色的吗，所以，我们只需要在每两个中间插入一条短白线，使得我们的灰色背景显示出来成一条回细线就可以了！bingo！

图片素材可以在阿里巴巴矢量库里面下载，里面有很多官方图标可以供大家选择呦~
链接：iconfont-阿里巴巴矢量图标库

图片可以放在代码文件夹下面，和pages放在一个目录下面：
新建一个image文件夹，里面专门放图片，这样在代码中引用图片就很