The content of this article is about the development of WeChat mini program mall using WeChat authorization and implementing the page code of the personal center. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.
See the effect
Development plan
1. Implement WeChat authorization and obtain user information
2. Personal center Page layout
1. Implement WeChat authorization and obtain user information
mine.js
onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }
2. Implement WeChat authorization and obtain user information
mine. wxml
{{userInfo.nickName}} 我的订单 查看全部订单 {{item.name}} 优惠券 我的收藏 收货地址 售后记录 我的评价 在线客服
mine.wxss
.userinfo { display: flex; flex-direction: column; align-items: center; background: #f0145a; width: 100%; height: 300rpx; } .userinfo-btn{ margin-top: 50rpx; background: none !important; color: #fff !important; font-size: 40rpx; } .account-bg { width: 100%; height: 150rpx; } .userinfo-avatar { width: 108rpx; height: 108rpx; margin: 40rpx; border-radius: 50%; } .userinfo-nickname { color: #fff; } /* 订单 */ .order { display: flex; flex-direction: row; align-items: center; width: 100%; height: 90rpx; } .myorder-text { font-size: 34rpx; color: gray; margin: 20rpx; width: 40%; } .myorderlook-text { font-size: 32rpx; color: gray; position: relative; right: 20rpx; width: 60%; text-align: right; } .next-image { width: 20rpx; height: 25rpx; position: relative; right: 10rpx; } .navs { display: flex; } .nav-item { width: 25%; display: flex; align-items: center; flex-direction: column; padding: 20rpx; } .nav-item .nav-image { width: 55rpx; height: 55rpx; margin: 5rpx; } .nav-item text { margin-top: 20rpx; font-size: 28rpx; color: gray; } /* 列表 */ .person-list { display: flex; flex-direction: column; align-items: left; } .list-item { display: flex; flex-direction: row; align-items: center; height: 80rpx; } .item-image { width: 40rpx; height: 40rpx; margin: 20rpx; } .item-text { color: gray; font-size: 30rpx; margin-left: 20rpx; } .person-line { width: 80%; height: 2rpx; background: lightgray; margin-left: 90rpx; }
mine.js
var app = getApp() Page({ data: { userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), orderItems: [ { typeId: 0, name: '待付款', url: 'bill', imageurl: '../../images/person/personal_pay.png', }, { typeId: 1, name: '待收货', url: 'bill', imageurl: '../../images/person/personal_receipt.png', }, { typeId: 2, name: '待评价', url: 'bill', imageurl: '../../images/person/personal_comment.png' }, { typeId: 3, name: '退换/售后', url: 'bill', imageurl: '../../images/person/personal_service.png' } ], }, //事件处理函数 toOrder: function () { wx.navigateTo({ url: '../order/order' }) } }
mine.json
{ "navigationBarTitleText": "个人中心"}
Related recommendations:
The above is the detailed content of WeChat mini program mall development uses WeChat authorization and implements the page code of the personal center. For more information, please follow other related articles on the PHP Chinese website!