微信小程序个人中心页怎么制作

这篇“微信小程序个人中心页怎么制作”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序个人中心页怎么制作”文章吧。

先进行页面分析

• 个人中心页有两种状态，即未登录和已登录，所以要求不同数据驱动产生的不同页面

• 点击登录/退出登录按钮需要响应合理逻辑，并改变按钮样式

• 只有登录状态下才会显示我的钱包按钮

页面结构

1. <!--pages/my/index.wxml-->

2. <view class="container">

3.     <view class="user-info">

4.     <!-- 用户未登录就没有头像-->

5.     <block wx:if="{{userInfo.avatarUrl != ''}}">

6.         <image src="{{userInfo.avatarUrl}}"></image>

7.     </block>

8.         <text>{{userInfo.nickName}}</text>

9.     </view>

10.     <!-- 用户未登录就没有钱包按钮-->

11.     <block wx:if="{{userInfo.avatarUrl != ''}}">

12.     <view class="my-wallet tapbar" bindtap="movetoWallet">

13.         <text>我的钱包</text>

14.         <text>></text>

15.     </view>

16.     </block>

17.     <button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>

18. </view>

复制代码

指令wx:if="boolean"：
当boolean为true，被它（block）包裹的元素将会显示，否则不现实，这样可以处理在未登录状态下不显示头像和钱包按钮

页面样式

2. .user-info{

3.         background-color: #fff;

4.         padding-top: 60rpx;

5. }

6. .user-info image{

7.         display: block;

8.         width: 180rpx;

9.         height: 180rpx;

10.         border-radius: 50%;

11.         margin: 0 auto 40rpx;

12.         box-shadow: 0 0 20rpx rgba(0,0,0,.2)

13. }

14. .user-info text{

15.         display: block;

16.         text-align: center;

17.         padding: 30rpx 0;

18.         margin-bottom: 30rpx;

19. }

20. .btn-login{

21.         position: absolute;

22.         bottom: 60rpx;

23.         width: 90%;

24.         left: 50%;

25.         margin-left: -45%;

26. }

27. .gray{

28.         background-color: #ccc;

29. }

复制代码

页面数据逻辑（未登录状态下的数据模板初始值定义在data对象里）

1. // pages/my/index.js

2. Page({

3.   data:{

4.     // 用户信息

5.     userInfo: {

6.       avatarUrl: "",

7.       nickName: "未登录"

8.     },

9.     bType: "primary", // 按钮类型

10.     actionText: "登录", // 按钮文字提示

11.     lock: false //登录按钮状态，false表示未登录

12.   },

13. // 页面加载

14.   onLoad:function(){

15.     // 设置本页导航标题

16.     wx.setNavigationBarTitle({

17.       title: '个人中心'

18.     })

19.     // 获取本地数据-用户信息

20.     wx.getStorage({

21.       key: 'userInfo',

22.       // 能获取到则显示用户信息，并保持登录状态，不能就什么也不做

23.       success: (res) => {

24.         wx.hideLoading();

25.         this.setData({

26.           userInfo: {

27.             avatarUrl: res.data.userInfo.avatarUrl,

28.             nickName: res.data.userInfo.nickName

29.           },

30.           bType: res.data.bType,

31.           actionText: res.data.actionText,

32.           lock: true

33.         })

34.       }

35.     });

36.   },

37. // 登录或退出登录按钮点击事件

38.   bindAction: function(){

39.     this.data.lock = !this.data.lock

40.     // 如果没有登录，登录按钮操作

41.     if(this.data.lock){

42.       wx.showLoading({

43.         title: "正在登录"

44.       });

45.       wx.login({

46.         success: (res) => {

47.           wx.hideLoading();

48.           wx.getUserInfo({

49.             withCredentials: false,

50.             success: (res) => {

51.               this.setData({

52.                 userInfo: {

53.                   avatarUrl: res.userInfo.avatarUrl,

54.                   nickName: res.userInfo.nickName

55.                 },

56.                 bType: "warn",

57.                 actionText: "退出登录"

58.               });

59.               // 存储用户信息到本地

60.               wx.setStorage({

61.                 key: 'userInfo',

62.                 data: {

63.                   userInfo: {

64.                     avatarUrl: res.userInfo.avatarUrl,

65.                     nickName: res.userInfo.nickName

66.                   },

67.                   bType: "warn",

68.                   actionText: "退出登录"

69.                 },

70.                 success: function(res){

71.                   console.log("存储成功")

72.                 }

73.               })

74.             }     

75.           })

76.         }

77.       })

78.     // 如果已经登录，退出登录按钮操作     

79.     }else{

80.       wx.showModal({

81.         title: "确认退出?",

82.         content: "退出后将不能使用ofo",

83.         success: (res) => {

84.           if(res.confirm){

85.             console.log("确定")

86.             // 退出登录则移除本地用户信息

87.             wx.removeStorageSync('userInfo')

88.             this.setData({

89.               userInfo: {

90.                 avatarUrl: "",

91.                 nickName: "未登录"

92.               },

93.               bType: "primary",

94.               actionText: "登录"

95.             })

96.           }else {

97.             console.log("cancel")

98.             this.setData({

99.               lock: true

100.             })

101.           }

102.         }

103.       })

104.     }   

105.   },

106. // 跳转至钱包

107.   movetoWallet: function(){

108.     wx.navigateTo({

109.       url: '../wallet/index'

110.     })

111.   }

112. })

复制代码

使用wx.login({})api来进行登录，使用wx.getUserInfo({})API来获取用户信息
我们将用户信息使用wx.setStorage({})API和wx.getStorage({})这两个API来设置和获取本地存储，用于模拟维护用户登录状态。真实情况下需要使用session

以上就是关于“微信小程序个人中心页怎么制作”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。