Shulou(Shulou.com)06/01 Report--

The knowledge points of this article "how to make WeChat Mini Programs personal Center Page" are not quite understood by most people, so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "WeChat Mini Programs personal Center Page how to make" article.

Do page analysis first.

The personal center page has two states, namely, not logged in and logged in, so different pages generated by different data drivers are required.

Click the login / exit login button to respond to reasonable logic and change the button style

My wallet button will only be displayed when you are logged in.

Page structure

{{userInfo.nickName}}

My wallet

>

{{actionText}}

Copy the code

Page data logic (the initial value of the data template in the unlogged-in state is defined in the data object)

/ / pages/my/index.js

Page ({

Data: {

/ / user information

UserInfo: {

AvatarUrl: ""

NickName: "not logged in"

}

BType: "primary", / / button type

ActionText: "Login", / / Button text prompt

Lock: false / / login button status. False means not logged in.

}

/ / Page loading

OnLoad:function () {

/ / set the navigation title of this page

Wx.setNavigationBarTitle ({

Title: 'personal Center'

})

/ / obtain local data-user information

Wx.getStorage ({

Key: 'userInfo'

/ / display the user information if you can get it, and keep the login status. You can't just do nothing.

Success: (res) = > {

Wx.hideLoading ()

This.setData ({

UserInfo: {

AvatarUrl: res.data.userInfo.avatarUrl

NickName: res.data.userInfo.nickName

}

BType: res.data.bType

ActionText: res.data.actionText

Lock: true

})

}

});

}

/ / Login or logon button click event

BindAction: function () {

This.data.lock =! this.data.lock

/ / if you are not logged in, login button action

If (this.data.lock) {

Wx.showLoading ({

Title: "logging in"

});

Wx.login ({

Success: (res) = > {

Wx.hideLoading ()

Wx.getUserInfo ({

WithCredentials: false

Success: (res) = > {

This.setData ({

UserInfo: {

AvatarUrl: res.userInfo.avatarUrl

NickName: res.userInfo.nickName

}

BType: "warn"

ActionText: "log out"

});

/ / Store user information locally

Wx.setStorage ({

Key: 'userInfo'

Data: {

UserInfo: {

AvatarUrl: res.userInfo.avatarUrl

NickName: res.userInfo.nickName

}

BType: "warn"

ActionText: "log out"

}

Success: function (res) {

Console.log ("Storage successful")

}

})

}

})

}

})

/ / if you are already logged in, exit the login button operation

} else {

Wx.showModal ({

Title: "confirm to quit?"

Content: "you will not be able to use ofo after quitting"

Success: (res) = > {

If (res.confirm) {

Console.log ("OK")

/ / remove local user information if you log out

Wx.removeStorageSync ('userInfo')

This.setData ({

UserInfo: {

AvatarUrl: ""

NickName: "not logged in"

}

BType: "primary"

ActionText: "Login"

})

} else {

Console.log ("cancel")

This.setData ({

Lock: true

})

}

}

})

}

}

/ / Jump to wallet

MovetoWallet: function () {

Wx.navigateTo ({

Url:'.. / wallet/index'

})

}

})

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.