个人中心页面-user
- - 页面效果
- - 1. 效果图：
  - 2.页面wxml的布局逻辑
  - 3.页面wxss的设置
- * 业务逻辑
- - 1. 获取登录信息
  - 2. 加载收藏信息
  - 3. 查询订单状态
- + 关键技术
- - 1.css属性filter的使⽤
  - 2.获取用户的信息
  - 3.对页面整体布局的掌握

个人中心页面-user

- 页面效果

1. 效果图：

2.页面wxml的布局逻辑

（1）代码：

<!-- 获取个人信息主页 -->
<view class="user_info_wrap">
<view wx:if="{{userinfo.avatarUrl}}" class="user_img_wrap">
<image class="user_bg" src="{{userinfo.avatarUrl}}" ></image>
<view class="user_info"><image class="user_icon" src="{{userinfo.avatarUrl}}"></image><view class="user_name">{{userinfo.nickName}}</view>
</view>
</view>
<view wx:else class="user_btn">
<navigator url="/pages/login/index" >登录</navigator>
</view>
</view><view class="user_content"><view class="user_main"><!-- 历史足迹 --><view class="history_wrap"><navigator><view class="his_num">0</view><view class="his_name">收藏的店铺</view></navigator><navigator url="/pages/collect/index"><view class="his_num">{{collectNums}}</view><view class="his_name">收藏的商品</view></navigator><navigator><view class="his_num">0</view><view class="his_name">关注的商品</view></navigator><navigator><view class="his_num">0</view><view class="his_name">我的足迹</view></navigator></view><!-- 我的订单 --><view class="orders_wrap"><view class="orders_title">我的订单</view><view class="order_content"><navigator url="/pages/order/index?type=1"><view class="iconfont icon-ding_dan"></view><view class="order_name">全部订单</view></navigator><navigator url="/pages/order/index?type=2"><view class="iconfont icon-fukuantongzhi"></view><view class="order_name">待付款</view></navigator><navigator url="/pages/order/index?type=3"><view class="iconfont icon-receipt-address"></view><view class="order_name">待收货</view></navigator><navigator><view class="iconfont icon-tuihuotuikuan_dianpu"></view><view class="order_name">退款/退货</view></navigator></view></view><!-- 收货地址管理 --><view class="address_wrap">收货地址管理</view><!-- 应用信息相关 --><view class="app_info_wrap"><view class="app_info_item app_info_contact"><text>联系客服</text><text>400-618-4000</text></view><navigator url="/pages/feedback/index" class="app_info_item">意见反馈</navigator><view class="app_info_item">关于我们</view></view><!-- 推荐 --><view class="recommend_wrap">把应用推荐给其他人</view></view>
</view>

3.页面wxss的设置

（1）代码：

page {background-color: #edece8;
}
.user_info_wrap {height: 45vh;overflow: hidden;background-color: var(--themeColor);position: relative;
}
.user_info_wrap .user_img_wrap {position: relative;
}
.user_info_wrap .user_img_wrap .user_bg {height: 50vh;filter: blur(10rpx);
}
.user_info_wrap .user_img_wrap .user_info {position: absolute;left: 50%;transform: translateX(-50%);top: 20%;text-align: center;
}
.user_info_wrap .user_img_wrap .user_info .user_icon {width: 150rpx;height: 150rpx;border-radius: 50%;
}
.user_info_wrap .user_img_wrap .user_info .user_name {color: #fff;margin-top: 40rpx;
}
.user_info_wrap .user_btn {position: absolute;left: 50%;transform: translateX(-50%);top: 40%;border: 1rpx solid greenyellow;color: greenyellow;font-size: 38rpx;padding: 30rpx;border-radius: 10rpx;
}
.user_content {position: relative;
}
.user_content .user_main {padding-bottom: 100rpx;color: #666;position: absolute;width: 90%;left: 50%;transform: translateX(-50%);top: -40rpx;
}
.user_content .user_main .history_wrap {background-color: #fff;display: flex;
}
.user_content .user_main .history_wrap navigator {flex: 1;text-align: center;padding: 10rpx 0;
}
.user_content .user_main .history_wrap navigator .his_num {color: var(--themeColor);
}
.user_content .user_main .orders_wrap {background-color: #fff;margin-top: 30rpx;
}
.user_content .user_main .orders_wrap .orders_title {padding: 20rpx;border-bottom: 1rpx solid #ccc;
}
.user_content .user_main .orders_wrap .order_content {display: flex;
}
.user_content .user_main .orders_wrap .order_content navigator {padding: 15rpx 0;flex: 1;text-align: center;
}
.user_content .user_main .orders_wrap .order_content navigator .iconfont {color: var(--themeColor);font-size: 40rpx;
}
.user_content .user_main .address_wrap {margin-top: 30rpx;background-color: #fff;padding: 20rpx ;
}
.user_content .user_main .app_info_wrap {margin-top: 30rpx;background-color: #fff;
}
.user_content .user_main .app_info_wrap .app_info_item {padding: 20rpx ;border-bottom: 1rpx solid #ccc;
}
.user_content .user_main .app_info_wrap .app_info_contact {display: flex;justify-content: space-between;
}
.user_content .user_main .recommend_wrap {margin-top: 30rpx;background-color: #fff;padding: 20rpx ;
}

* 业务逻辑

1. 获取登录信息

（1）Userinfo：获取用户信息
（2）avatarUrl：用户头像
（3）nickName：用户昵称
（4）zh_CN：简体中文
（5）注意：这里是获取两次用户头像，因为背景也用的到头像

<view class="user_info_wrap">
<view wx:if="{{userinfo.avatarUrl}}" class="user_img_wrap">
<image class="user_bg" src="{{userinfo.avatarUrl}}" ></image>//背景
<view class="user_info"><image class="user_icon" src="{{userinfo.avatarUrl}}"></image>//头像<view class="user_name">{{userinfo.nickName}}</view>
</view>
</view>

（6）样式的设置：

.user_info_wrap {height: 45vh;overflow: hidden;background-color: var(--themeColor);position: relative;.user_img_wrap {position: relative;.user_bg {height: 50vh;// 高斯模糊filter: blur(10rpx);}.user_info {position: absolute;left: 50%;transform: translateX(-50%);top: 20%;text-align: center;.user_icon{width: 150rpx;height: 150rpx;border-radius: 50%;}.user_name{color: #fff;margin-top: 40rpx;// font-size: 40rpx;}}}.user_btn{position: absolute;left: 50%;transform: translateX(-50%);top: 40%;border: 1rpx solid greenyellow;color: greenyellow;font-size: 38rpx;padding: 30rpx;border-radius: 10rpx;}
}

2. 加载收藏信息

（1）收藏的商品数量

      <navigator url="/pages/collect/index"><view class="his_num">{{collectNums}}</view><view class="his_name">收藏的商品</view></navigator>

Page({data: {userinfo:{},
// 被收藏的商品的数量
collectNums:0},
onShow(){const userinfo=wx.getStorageSync("userinfo");const collect=wx.getStorageSync("collect")||[];this.setData({userinfo,collectNums:collect.length});
}
})

3. 查询订单状态

+ 关键技术

1.css属性filter的使⽤

意思也就是：高斯模糊

2.获取用户的信息

3.对页面整体布局的掌握

微信小程序--个人主页的制作相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
微信小程序-H5-uniapp css制作上下跳动的柱状图——频谱
当前端开发一些H5或者微信小程序页面的时候,总会遇到一些奇怪的设计,他的音乐关闭按钮不用转圈的音符,那只要加入旋转动画+切换音符图片即可. 那么当要制作一些上下跳动的柱状图(频谱)的话我们需要怎么做呢 ...
福州微信小程序服务器托管,福州微信小程序怎么搭建制作？
小程序火了,在微信平台每天都会上线很多新小程序,福州越来越多的商家都加入制作小程序,但对于很多不会编程的小白来说,如果自己开发一个微信小程序呢?其实,方法也很简单,知道借助一些专业平台,10分钟也让你 ...
微信小程序-python结合制作的《请假小程序》
目录引言 3 系统结构 3 2.1. 系统流程 3 2.2. 系统主要框架 4 2.2.1. Flask 4 2.2.2. SQLAlchemy 5 2.3. 系统功能 6 2.3.1. 登录功能 ...
微信小程序---表格的制作并展示云数据库中的数据
微信小程序并没有表格组件,可能是官方考虑到,在前端开发中,表格的嵌套性太多,用DIV代码会比较简洁就没有实现吧.没有现成的组件可以使用,针对这个问题,目前有两种解决方案: 1)内嵌 h5页面,(毕竟 ...

微信小程序--个人主页的制作

目录

个人中心页面-user

- 页面效果

1. 效果图：

2.页面wxml的布局逻辑

3.页面wxss的设置

* 业务逻辑

1. 获取登录信息

2. 加载收藏信息

3. 查询订单状态

+ 关键技术

1.css属性filter的使⽤

2.获取用户的信息

3.对页面整体布局的掌握

微信小程序--个人主页的制作相关推荐

最新文章

热门文章