地图圈系统——微信小程序(10)
一、用户个人信息页面
微信小程序获取用户信息后,为把获取到的用户信息显示出来,写了用户信息页面,但是这不是微信,所以无法更改用户信息,只能够看到自己的信息。
二、项目代码
information.wxml代码如下:
<!--pages/my/xinxi/xiugai/xiugai.wxml-->
<navBar
title-text="个人信息"
back-icon="../../src/images/back@3x.png"
background="#f2f2f2"
bindback="back"/>
<form >
<view class="cu-form-group margin-top">
<view class="title">昵称</view>
<text>{{userInfo.nickName}}</text>
</view>
<view class="cu-form-group">
<view class="title">性别</view>
<text wx:if="{{userInfo.gender>1}}">女</text>
<text wx:if="{{userInfo.gender<2}}">男</text>
</view>
<view class="cu-form-group">
<view class="title">国家</view>
<text>{{userInfo.country}}</text>
</view>
<view class="cu-form-group">
<view class="title">省份</view>
<text>{{userInfo.province}}</text>
</view>
<view class="cu-form-group">
<view class="title">城市</view>
<text>{{userInfo.city}}</text>
</view>
<view class="cu-form-group">
<view class="title">头像</view>
<image class="aaa" src="{{userInfo.avatarUrl}}"></image>
</view>
<view class="padding">
<button class="cu-btn block bg-blue margin-tb-sm lg" bindtap="leave">退出登录</button>
</view>
</form>
information.js文件代码如下:
// pages/imformation/information.js
Page({
/**
* 页面的初始数据
*/
data: {
userInfo:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var value = wx.getStorageSync("firstuser")
console.log(value)
this.setData({
userInfo:value
})
},
leave(){
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
try {
wx.removeStorageSync('firstuser')
} catch (e) {
console.log("没有啊")
}
wx.showModal({
title: '退出登录',
content: '确定要退出登录?',
showCancel: true,//是否显示取消按钮
cancelText: "否",//默认是“取消”
confirmText: "是",//默认是“确定”
success: function(res){
if (res.cancel) {
//点击取消,默认隐藏弹框
} else{
prevPage.onLoad()
wx.showToast({
title: "退出登录",
duration: 1000,
icon: "sucess",
make: true
})
setTimeout(() => {
wx.switchTab({
url: '/pages/my/my',
})
}, 1000);
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
三、效果展示
点击个人信息按钮:
点击退出登录按钮:
点击是:
可见回到了未登录的状态。