演示视频:
微信登录以及返回上一级刷新
====== 不废话接下来直接上代码 ======
一:微信小程序登录以及保存用户信息
1.来自【获取用户信息接口】JSON格式的原始数据
{
avatar: "https://example.com/avatar/default_avatar.png"
beans: 0
expire_time: ""
inviteCode: "NQKBXK"
level: 2
levelName: "黑卡会员"
nickname: "胡"
status: "未充值"
tel: ""
}
2.微信小程序登录,以及保存用户信息
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 检查登录状态 【再次说明放onLaunch好处:确保整个小程序的登录状态是统一的】
this.checkLogin();
},
// 检查登陆状态
checkLogin(){
const token = wx.getStorageSync('userToken')
if(token){
// 已登录,获取用户信息
this.getUserInfo();
}else{
// 未登录,执行登录流程
this.login();
}
},
// 未登录,登录流程
login(){
/*
* [此登录为]开发者服务器返回的自定义登录状态,内含登录状态的Token用于后续业务逻辑中前后端交互时识别用户身份。
*/
// 登录
wx.login({
success: res => {
console.log('最新的code:',res.code)
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if(res.code){
wx.request({
url: '用于微信登录的接口',
method:'POST',
data:{
code:res.code
},
success:res => {
console.log('【微信登陆】传来的数据:',res)
if(res.data.code == 0){
wx.setStorageSync('userToken', res.data.data)
this.getUserInfo()
}
},
fail: err => {
console.log(err)
}
})
}
}
})
},
// 已登录,获取用户信息
getUserInfo(){
const userToken = wx.getStorageSync('userToken')
// console.log('处于已登录状态')
wx.request({
url: '用于获取用户信息接口',
method:'POST',
header:{ userToken },
success: res => {
// console.log('请求【获取用户信息】成功',res.data)
if(res.data.code == 0){
// (此用户获取后实例是{},导致取值每次应为this.app.globalData.userInfo?.avatar)较为麻烦
// 在此处将{},转为[{}]这样话方便用wx:for取值
const userInfoObj = res.data.data
const userInfoArr = [userInfoObj]
this.globalData.userInfo = userInfoArr
}else{
console.log('失败或未登录')
// 先清除userToken
wx.removeStorageSync('userToken')
// 再次调用
this.login()
}
},
fail:err =>{
console.log('获取用户信息实例出错具体原因:',err)
}
})
},
globalData: {
// 此存储可在任何页面和组件中进行调用
/*
一:页面调用方式:
1.js的onLoad中获取 app实例
this.app = getApp()
2.js的onReady中页面初次加载时访问用户信息,避免渲染失效结果为空
方式一:
this.setData({
userInfo: this.app.globalData.userInfo
)}
方式二:
const userInfo = this.app.globalData.userInfo 【这样之后记得循环挨个取值】
3.在wxml页面中使用
{{app.globalData.userInfo.avatarUrl}}
二:组件调用方式:
1.在lifetimes获取并访问
ready(){
// 获取 app 实例
this.app = getApp();
// 访问 globalData 中的用户信息
const userInfo = this.app.globalData.userInfo;
}
*/
userInfo: null
}
})
二:返回上一页刷新或当前页刷新(这里以昵称为例)
1. 二级页面定义
①二级页面wxml
<!--pages/options/mianMy_personalData/mianMy_personalData.wxml-->
<view wx:for="{{userInfo}}" wx:key="index">
<input class="box_title" type="nickname" placeholder="请输入昵称" value="{{item.nickname == null ? '' : item.nickname}}" bind:change="inputNameChange"/>
</view>
②二级微信页面js 第一步:(进入页面首次加载,主要用于wx:for循环取值页面渲染)
// pages/options/mianMy_personalData/mianMy_personalData.js
Page({
/**
* 页面的初始数据
*/
data: {
// 定义从app.js中获取的用户信息
userInfo:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取app实例
this.app = getApp()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
// 获取用户信息实例
console.log('看值',this.app.globalData.userInfo)
if(this.app.globalData.userInfo){
this.setData({
userInfo: this.app.globalData.userInfo
})
}else{
// console.log('看值-不存在啊这..')
// 如果 this.app.globalData.userInfo 不存在,调用 this.app.checkLogin()更新用户数据
this.app.checkLogin();
}
},
})
③二级微信页面js 第二步:(昵称修改,注意里边的重点【this.app.getUserInfo()】附有详细解释)
// 获取用户昵称并修改
inputNameChange(e){
const userToken = wx.getStorageSync('userToken')
const nickname = e.detail.value
console.log(nickname)
if(userToken){
wx.request({
url: '用于昵称修改的接口',
method:'POST',
header:{ userToken },
data:{
nickname:nickname
},
success: res => {
if(res.data.code == 0){
wx.showToast({
title: '昵称修改成功',
icon:'success',
duration:500
})
// 更新 app.globalData.userInfo
/*
===【此步是精华,重中之重(用于上级页面同步刷新) 具体解释也在下面】===
1.在修改成功后,调用 this.app.getUserInfo() 方法更新全局即app.js中的 app.globalData.userInfo
2.同时如果在上级页面的onShow中调用this.getUserInfo()方法重新获取最新的用户信息,可确保 mainMy 页面也能及时显示最新的用户信息。
===【至此,当你在 mainMy_personalData 页面更新用户昵称后,返回 mainMy 页面时,页面上的用户昵称也会同步更新。】===
*/
this.app.getUserInfo();
}
console.log('请求成功的参数',res)
},
fail:err => {
console.log(err)
}
})
}
},
④ 完整的二级页面js
// pages/options/mianMy_personalData/mianMy_personalData.js
Page({
/**
* 页面的初始数据
*/
data: {
// 定义从app.js中获取的用户信息
userInfo:null
},
// 获取用户昵称并修改
inputNameChange(e){
const userToken = wx.getStorageSync('userToken')
const nickname = e.detail.value
console.log(nickname)
if(userToken){
wx.request({
url: '用于昵称修改的接口',
method:'POST',
header:{ userToken },
data:{
nickname:nickname
},
success: res => {
if(res.data.code == 0){
wx.showToast({
title: '昵称修改成功',
icon:'success',
duration:500
})
// 更新 app.globalData.userInfo
/*
===【此步是精华,重中之重(用于上级页面同步刷新) 具体解释也在下面】===
1.在修改成功后,调用 this.app.getUserInfo() 方法更新全局即app.js中的 app.globalData.userInfo
2.同时如果在上级页面的onShow中调用this.getUserInfo()方法重新获取最新的用户信息,可确保 mainMy 页面也能及时显示最新的用户信息。
===【至此,当你在 mainMy_personalData 页面更新用户昵称后,返回 mainMy 页面时,页面上的用户昵称也会同步更新。】===
*/
this.app.getUserInfo();
}
console.log('请求成功的参数',res)
},
fail:err => {
console.log(err)
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取app实例
this.app = getApp()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
// 获取用户信息实例
console.log('看值',this.app.globalData.userInfo)
if(this.app.globalData.userInfo){
this.setData({
userInfo: this.app.globalData.userInfo
})
}else{
// console.log('看值-不存在啊这..')
// 如果 this.app.globalData.userInfo 不存在,调用 this.app.checkLogin()更新用户数据
this.app.checkLogin();
}
},
})
2.一级页面定义 【同步更新数据堪比无感刷新】
①一级页面wxml
<!--pages/mainMy/mainMy.wxml-->
<view wx:for="{{userInfo}}" wx:key="index">
<text class="wcTextOne">{{item.nickname == null ? 'null' : item.nickname}}</text>
</view>
②一级微信页面js (对同二级页面修改后的昵称产生同步更新)
// pages/mainMy/mainMy.js
Page({
/**
* 页面的初始数据
*/
data: {
// 定义从app.js中获取的用户信息
userInfo:null
},
// 获取最新的用户信息(变更时同步更改:此代码重在确保页面能够始终获取到最新的用户信息。)
getUserInfo() {
if (this.app.globalData.userInfo) {
this.setData({
userInfo: this.app.globalData.userInfo
});
} else {
this.app.checkLogin();
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取app实例
this.app = getApp()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 解决由mainMy_personalData数据修改更新后,返回上一级页面也就是本页mainMy,数据无法同步问题
this.getUserInfo()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})