目錄

• 個人中心頁面-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>

js

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.對頁面整體布局的掌握

總結

以上是生活随笔為你收集整理的微信小程序--个人主页的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。