1:首先声明：对于小白可能还是有点用 我也是入门不久，欢迎指出问题。
2:先上效果图：
3:index(我的)页面wxml：
<!--?用户信息：头像，呢称?/登录?-->
??<view?class="xx">
????<view><image?src="{{avatarUrl}}"?class="tx"></image></view>
????<view?class="mz"?>{{name}}</view>
????<view?bindtap="getUserProfile"?class="underline">登录</view>??
??</view>???
<!--?分割线?-->
??<view?class="hr"></view>
<!--?循环数组?mySet??-->
<view?wx:for="{{mySet}}"?bindtap="onMySet"?data-type="{{item.name}}">?
<!--?图标和循环myset中的文字??-->
??<view?class="vv_1">
????<image?class="image1"?src="{{item.img}}"/>
??????{{item.name}}
????<view?class="icon">></view>?
??</view>??
</view>
<!--?分割线?-->?
<view?class="hr2"></view>4:index(我的)页面js：
Page({
??/**
???*?页面的初始数据
???*/
??data:?{
????avatarUrl:"",
????name:?"",
????m:"0",
????mySet:[
???????{
?????????'name':"我的预约",
?????????'img':"../images/预约.png"
???????},
???????{
???????'name':"我的收藏",
????????'img':"../images/收藏.png"
??????},
??????{
???????'name':"个人设置",
????????'img':"../images/设置.png"
??????},
????]
??},
??/**
???*?生命周期函数--监听页面加载
???*/
??onLoad:?function?(options)?{
????
??},
????/**
???*?用户信息获取权限
???*/
??getUserProfile:?function?()?{
????if(this.data.m==0){
???
????wx.getUserProfile({
??????desc:?'信息仅作为个人展示',
??????success:?(res)?=>?{
????????console.log('获取成功',?res)
????????wx.setStorage({
??????????data:?res.userInfo,
??????????key:?'userInfo',
????????});
????????this.setData({
??????????m:1
????????})
????????this.onShow();
??????}})
????
????}else{
??????wx.showToast({
????????title:?'您已登录啦',
??????})
????}?????
????},
????/**
???*?点击我的预约等板块后进行页面跳转
???*/
??onMySet:function(e){
??if(e.currentTarget.dataset.type=="个人设置"){
????wx.navigateTo({
??????url:?'/pages/index/setting/setting',
????})
??}
??else?if(e.currentTarget.dataset.type=="我的预约"){
????wx.navigateTo({
??????url:?'/pages/index/want/want',
????})
??}
??else?(e.currentTarget.dataset.type=="我的收藏")
??{
????wx.navigateTo({
??????url:?'/pages/index/like/like',
????})
??}
},
??/**
???*?生命周期函数--监听页面显示
???*/
??onShow:?function?()?{
????var?useInfo?=?wx.getStorageSync('userInfo')
????var?that?=?this;
????that.setData({
????avatarUrl:useInfo.avatarUrl,
????name:useInfo.nickName,
??})
?}
})5: index(我的)页面wxss：
/*?pages/index/index.wxss?*/
.mz{
??font-size:50rpx;
??line-height:?200rpx;
??margin-left:?20rpx;
??color:?#FFFFFF;
}
.hr{
??height:16rpx;
??background-color:rgb(202,?202,?202);
}
.vv_1{
??line-height:?100rpx;
??background-color:?#ffffff;
??display:?flex;
}
.vv{
??background-color:?#ebebeb;
??height:?950rpx;
}
.xx{
??
??display:?flex;??
??flex-direction:row;
??background-color:#32667e;
??line-height:?400rpx;
}
.tx{
??width:?150rpx;
??height:?150rpx;
??border-radius:?40%;
??margin-left:50rpx?;
}
.underline{
??text-decoration:underline;
??font-size:?30rpx;
??color:?white;
??text-align:?center;
??line-height:?200rpx;
}
.hr2{
??height:?2rpx;
??background-color:?rgba(202,?202,?202,?0.856);
}
.icon{
??margin-left:470rpx;
??color:?rgba(202,?202,?202)?;
??
}
.image1{
??padding-top:26rpx;
??padding-right:20rpx;
??padding-left:?30rpx;
??width:?50rpx;
??height:?50rpx;
}
6:到这一步就已经可以实现登录功能了 退出功能我放到了设置里?
以下把设置页面代码放出 其他几个页面里都是没有东西的跳转 大家可以看情况增加。
7:设置setting页面wxml:
<view?class="info">
??<view?class="info_more1"><view?class="tx1">头像</view>
??<view><image?src="{{tx}}"?class="tx"/></view>
??</view>
<view?class="hr"></view>
<view?class="info_more">昵称
??<view?class="icon">{{name}}</view>
??</view>
<view?class="hr"></view>
<view?class="info_more"?>手机号
??<view?class="icon">198****5052</view>
??</view>
<view?class="hr"></view>
<view?class="info_more">生日
??<view?class="icon"><picker?class="picker"?mode="date"?value="{{date}}"end="{{endDate}}"?bindchange="bindDateChange">
??<view?class="picker-date?">
????{{currentDate}}
??</view>
</picker></view>
??</view>
<view?class="hr"></view>
<view?class="info_more"?bindtap="chooseAddress">收货地址
??<view?class="icon">>></view>
??</view>
<view?class="hr"></view>
<view?class="info_more"?bindtap="version">当前版本
??<view?class="icon">v1.0</view>
??</view>
<view?class="hr"></view>
<view?class="info_more"?bindtap="about">关于
??<view?class="icon">>></view>
??</view>
<view?class="hr"></view>
<view?class="info_more"?bindtap="houtai">后台登录入口
??<view?class="icon">>></view>
??</view>
<view?class="hr"></view>
</view>
<button?bindtap="logout">退出登录</button>8:设置setting页面js:
//?pages/index/setting/setting.js
const?util?=?require('../../../utils/util.js')
Page({
??/**
???*?页面的初始数据
???*/
??data:?{
????info:["头像","名称","收货地址","当前版本","关于"],
????tx:"",
????name:"",
????currentDate:util.formatTime(new?Date(),?'-',?false),
????phone:""
??},
??bindDateChange:?function?(e)?{
????console.log(e.detail.value)
????this.setData({
??????currentDate:e.detail.value
????})?},
??????chooseAddress()?{
????????wx.chooseAddress({
??????????success?(res)?{
????????????console.log(res.userName)
??????????}
????????})
????},
??/**
???*?生命周期函数--监听页面加载
???*/
??onLoad:?function?(options)?{
????var?useInfo?=?wx.getStorageSync('userInfo')
????var?that?=?this;
????that.setData({
????tx:useInfo.avatarUrl,
????name:useInfo.nickName,})
??},
??about(){
????wx.navigateTo({
??????url:?'/pages/index/setting/about/about',
????})
??},
??houtai(){
????wx.navigateTo({
??????url:?'',
????})
??},
??version(){
????wx.showToast({
??????title:?'当前已是最新版本~',
????})
??},
??logout:function()?{
????wx.removeStorage({
??????key:?'userInfo',
??????success?(res)?{
????????wx.showModal({
??????????title:?'提示',
??????????content:?'真的要退出了吗',
??????????cancelText:'我骗你的',
??????????confirmText:'是的没错',
??????????confirmColor:'#000000',
??????????cancelColor:'#576b95',
??????????success?(res)?{
????????????if?(res.confirm)?{
??????????????wx.reLaunch({
????????????????url:?'/pages/index/index',
??????????????})
????????????}?else?if?(res.cancel)?{
??????????????console.log('用户点击取消')
????????????}
??????????}
????????})
????????
??????}
????})
??}
})9:设置setting页面wxss:
button{
????background-color:rgb(255,?26,?26);
????border:?none;
????color:?white;
????padding:?15px?32px;
????text-align:?center;
????text-decoration:?none;?
????display:block;
????margin:60rpx?auto;
????font-size:?16px;
}
.hr{
????height:?1rpx;
????background-color:?rgb(202,?202,?202);
}
.info{
????display:?flex;
????flex-direction:?column;
????font-size:?30rpx;
????margin-left:?30rpx;
????margin-top:?10rpx;?
}
.info_more1{
????display:flex;
????justify-content:?space-between;
????padding-bottom:?20rpx;
????padding-top:?20rpx;
}
.info_more{
????display:flex;
????justify-content:?space-between;
????padding-bottom:?30rpx;
????padding-top:?30rpx;
}
.tx{
????width:?100rpx;
????height:?100rpx;
????border-radius:?50%;
????margin-right:?10rpx;
}
.icon{
????padding-right:?30rpx;
????color:?rgb(167,?164,?164);
}
.tx1{
????padding-top:?30rpx;
}10:到这里功能基本实现，需要注意的是，记得在app.json里将tarbar加入，还有其他的图片大家自己替换即可。
app.json添加：
"list": [
{
"pagePath": "pages/aa/aa",
"text": "aa"
},
{
"pagePath": "pages/index/index",
"text": "我的",
"iconPath": "./pages/images/me.png",
"selectedIconPath": "./pages/images/me_select.png"
}
]