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

微信小程序页面设计：在这里仿微信个人主页做一个初步的还原，非高保真！！
上效果图：
（这里设计的是未更新微信最新版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文件夹，里面专门放图片，这样在代码中引用图片就很方便了：
wxml:

<image class="icon-picture" src="/image/图片名称.png"></image>

这里获取用户头像用的是微信小程序里面的字段获取：
在open-data里面用type="userAvatarUrl"就可以获取用户头像
同样的，微信名用的type="userNickName"获取。

<!--用户头像和昵称-->
<view class="userInformation"><view class="userInfomation-avatar"><open-data type="userAvatarUrl" ></open-data></view><view class="userInformation-nickname"><open-data type="userNickName"></open-data></view>
</view>

代码汇总：
wxml

<!--用户头像和昵称-->
<view class="userInformation"><view class="userInfomation-avatar"><open-data type="userAvatarUrl" ></open-data></view><view class="userInformation-nickname"><open-data type="userNickName"></open-data></view>
</view>
<!--间隔灰横条-->
<view class="graydivide"></view>
<!--支付-->
<view class='function'><view style="width:100%"><view class="functioninformation"><!--左边图片&文字--><view class="left-icon"><!--图片--><image class="icon-picture" src="/image/微信支付.png"></image></view><view class="text">支付</view><!--文字--><view class="right-icon"><!--图片--><image class="icon-picture" src="/image/箭头.png"></image></view></view></view>
</view>
<!--间隔灰横条-->
<view class="graydivide"></view>
<!--收藏-->
<view class='function'><view style="width:100%"><view class="functioninformation"><!--左边图片&文字--><view class="left-icon"><!--图片--><image class="icon-picture" src="/image/收藏.png"></image></view><view class="text">收藏</view><!--文字--><view class="right-icon"><!--图片--><image class="icon-picture" src="/image/箭头.png"></image></view></view></view>
</view>
<!--间隔白横线-->
<view class="whitedivide"></view>
<!--朋友圈-->
<view class='function'><view style="width:100%"><view class="functioninformation"><!--左边图片&文字--><view class="left-icon"><!--图片--><image class="icon-picture" src="/image/图 片.png"></image></view><view class="text">朋友圈</view><!--文字--><view class="right-icon"><!--图片--><image class="icon-picture" src="/image/箭头.png"></image></view></view></view>
</view>
<!--间隔白横线-->
<view class="whitedivide"></view>
<!--卡包-->
<view class='function'><view style="width:100%"><view class="functioninformation"><!--左边图片&文字--><view class="left-icon"><!--图片--><image class="icon-picture" src="/image/卡包.png"></image></view><view class="text">卡包</view><!--文字--><view class="right-icon"><!--图片--><image class="icon-picture" src="/image/箭头.png"></image></view></view></view>
</view>
<!--间隔白横线-->
<view class="whitedivide"></view>
<!--表情-->
<view class='function'><view style="width:100%"><view class="functioninformation"><!--左边图片&文字--><view class="left-icon"><!--图片--><image class="icon-picture" src="/image/表情.png"></image></view><view class="text">表情</view><!--文字--><view class="right-icon"><!--图片--><image class="icon-picture" src="/image/箭头.png"></image></view></view></view>
</view>
<!--间隔灰横条-->
<view class="graydivide"></view>
<!--设置-->
<view class='function'><view style="width:100%"><view class="functioninformation"><!--左边图片&文字--><view class="left-icon"><!--图片--><image class="icon-picture" src="/image/设置.png"></image></view><view class="text">设置</view><!--文字--><view class="right-icon"><!--图片--><image class="icon-picture" src="/image/箭头.png"></image></view></view></view>
</view>

wxss

page{/*页面背景—————统一浅灰*/background-color: #ededed;
}
.userInformation {/*头像&微信名称*/display: flex;background-color: #ffffff;
}
.userInfomation-avatar {/*头像*/ background-color: #ffffff;margin: 0 auto;  display: flex;justify-content: center;overflow: hidden;width: 160rpx;height: 160rpx;margin: 20rpx;margin-top: 30rpx;margin-left: 40rpx;border-color: #ffffff;
}.userInformation-nickname {/*昵称*/color: #000000;font-size: 22px;font-weight: bold;width: 320rpx;height: 120px;line-height: 120px;
}.whitedivide {/*白色分割线*/height: 1px;background-color: #ffffff;width: 56px;position:relative;top: 0px;
}.graydivide {/*灰色分割条*/height: 10px;background-color: #ededed;position:relative;top: 0px;
}.function {width: 100%;background-color: #ffffff;margin-top: 0rpx;overflow: hidden;display: flex;/**/
}.functioninformation {/*左边动作图标&文字说明*/display: flex;
}.left-icon {display: flex;margin: 14px;
}.icon-picture {/*图标*/display: flex;width: 28px;height: 28px;
}.text {/*文字*/font-size: 17px;font-style: normal;font-weight: normal;width: 68px;position: relative;left: 0px;display: flex;flex-direction: column;justify-content: center;color: #000000;
}.right-icon {/*右边图片*/display: flex;margin: 14px;position: absolute;right: 14px;
}

仿微信个人主页——微信小程序页面设计相关推荐

微信第三方平台小程序平台设计
今天是2023年1月15日,距离2023春节倒计时7天.在此,我分享一下个人对于微信第三方平台小程序的理解以及搭建一个微信小程序及云端服务的一些个人经验,作为交流. 首先,一个第三方平台小程序要定位是 ...
【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现摘要本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
【小程序页面设计模板】小程序设计模板平台分享
小程序页面设计模板是小程序制作的好工具,特别是对于没有太多代码基础的企业.下面我分享一个小程序设计模板平台,超60个行业的小程序页面设计模板免费使用,页面内容丰富样式多样的小程序设计模板. 小程序设计 ...
如何做小程序页面设计模板？
如何制作小程序页面设计模板?微信小程序页面的设计理念.颜色.布局等都要精心安排,但大多数想做小程序的卖家都是新手,不懂设计知识.那么小程序页面设计模板怎么做呢? 一.应用优质材料当小程序页面设计模板 ...
别再纠结页面设计！挑选小程序页面设计模板就对了
小程序页面设计模板可以是一个非常棒的选择,特别是如果你想要快速创建一个优秀的小程序. 以下是一些关于如何选择小程序页面设计模板的建议: 确定你的需求:在开始挑选小程序页面设计模板之前,你需要明确你的需 ...
小程序页面设计模板都有哪些推荐
作为一个设计师学会设计一款小程序也是很加分的事情今天我就给大家分享一些免费的小程序页面设计模板快递物流小程序页面作者:elainegao QQ 小程序页面库作者:elainegaoQQ 小程序 ...
《微信小程序商城界面设计实战》--学习笔记作业
一.学习笔记 1.注释:wxml文档注释: css文档注释:/** **/ js文档注释:单行注释以"//"开头:多行注释以"/"开头,以"/&quo ...
微信小程序界面从右边滑出_微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...
网页+微信小程序UI设计及前端开发（第二周）
日期工作内容 2020年8月12日网页前端架构,素材查找,小程序前端架构 2020年8月13日网页.小程序页面完善,提交网页与小程序前端文件文章目录一.网页 (一)页头 (1)logo及导航 ...

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

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

仿微信个人主页——微信小程序页面设计相关推荐

最新文章

热门文章