微信小程序個人中心頁怎么制作

這篇“微信小程序個人中心頁怎么制作”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序個人中心頁怎么制作”文章吧。

先進行頁面分析

• 個人中心頁有兩種狀態，即未登錄和已登錄，所以要求不同數據驅動產生的不同頁面

• 點擊登錄/退出登錄按鈕需要響應合理邏輯，并改變按鈕樣式

• 只有登錄狀態下才會顯示我的錢包按鈕

頁面結構

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）包裹的元素將會顯示，否則不現實，這樣可以處理在未登錄狀態下不顯示頭像和錢包按鈕

頁面樣式

1. /* pages/my/index.wxss */

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

以上就是關于“微信小程序個人中心頁怎么制作”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。