【微信小程序】黑马优购--08个人中心页面

最新推荐文章于 2024-11-21 20:29:26 发布

西西歪歪西歪

最新推荐文章于 2024-11-21 20:29:26 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

本文链接：https://blog.youkuaiyun.com/weixin_58214412/article/details/122147029

本文介绍了微信小程序中个人中心页面的实现，包括登录获取用户信息、背景展示、历史足迹、我的订单、收货地址管理和商品收藏数量的显示。通过在WXML和JS文件中编写相关代码来完成页面功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

10.个人页面

10.1登录获取用户信息

首先在page下新建登录页面login，在login.wxml中设置一个button按钮并绑定点击事件

<!--pages/login/login.wxml-->
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">登录</button>

在login.js中

// pages/login/login.js
Page({

  handleGetUserInfo(e){
    // console.log(e);
    const {userInfo}=e.detail;
    wx.setStorageSync('userinfo', userInfo);
    wx.navigateBack({
      delta: 1,
    })
  }
})

在个人中心页面通过导航标签跳转到登录页面获取用户信息

<!--pages/user/user.wxml-->
<navigator url="/pages/login/login">登录</navigator>

10.2背景展示

<!--pages/user/user.wxml-->
<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_ico