1.项目下的app.js(小程序初始化时判断是否有token,有则跳转首页,没有则跳转登录页,页面闪烁可以加一个启动屏,单纯的放一张图片,默认是这个页面,等判断token后延迟一秒跳转到相应的页面),登录的时候获取用户信息,将其存到globalData里面,如果已经登录,也要再调一遍获取个人信息的接口,存储个人信息。
// app.js
App({
baseURL: 'http://10.7/prod-api', // 默认后端接口地址
// 小程序初始化调用
onLaunch() {
// 封装后台端口
// 获取小程序当前版本信息(链接是介绍) https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
// 自动根据版本切换接口请求地址
const {
miniProgram: {
envVersion
}
} = wx.getAccountInfoSync();
switch (envVersion) {
// 开发
case 'develop':
this.baseURL = 'http://10.7/prod-api';
break;
// 体验
case 'trial':
this.baseURL = 'https://dj.com/prod-api';
break;
// 正式
case 'release':
this.baseURL = 'https://dj.com/prod-api';
break;
default:
this.baseURL = 'https://dj.com/prod-api';
break;
}
// 如果登录过了
if(this.isLogin()){
// 获取用户信息,跳转首页
this.getInfo()
wx.switchTab({
url: '/pages/home/home',
})
}else{
// 未登录跳转登录页
wx.navigateTo({
url: '/pages/login/login',
})
}
},
// 封装请求
request(url, params = {}) {
console.log(url, params);
return new Promise((resolve, reject) => {
wx.showLoading({
title: '...加载中'
})
wx.request({
url: this.baseURL + url,
data: params.data || '',
header: {
// 'Accept': 'application/json',
'content-type': 'application/json',
'Authorization': ('Bearer ' + wx.getStorageSync('wx_token')) || ''
},
method: params.method || "GET",
timeout: 6000,
success: (result) => {
const errcode = [401, 403]
if (errcode.includes(result.data.code)) {
wx.showToast({
title: '登录过期或者未登录',
icon: 'none'
})
wx.removeStorageSync('token')
wx.redirectTo({
url: '/pages/login/login',
})
}
resolve(result)
},
fail: (res) => {
reject(res)
},
complete: (res) => {
wx.hideLoading()
},
})
})
},
// 判断是否登录过了,登录过去会存储token,登录的时候存下token
isLogin(){
return !!wx.getStorageSync('wx_token')
},
// 获取登录人系统的账户信息(不是微信账号的信息)
getInfo(){
this.request('/getInfo', {method: 'get'}).then(res=>{
if(res.data.code != '200'){
return
}
// 将用户信息挂载到globalData上面,方便拿取
this.globalData.userInfo = res.data.user
this.globalData.roles = res.data.roles
this.globalData.permissions = res.data.permissions
})
},
globalData: {
userInfo: null, // 系统用户信息(系统内部的账号,部门)
roles: [], // 用户角色
permissions: [], // 用户的权限字符
wxUserInfo: null, // 微信用户的个人信息(微信号,微信昵称等)
tabIndex: 0
}
})
2.登录页面的代码,doLogin.js, 跳转到登录页面之后,输入账号密码(可能还有图片验证码)来进行登录,此处密码进行了加密,如果只是要拿到用户的微信账号信息,可以在登录之前调用wx.getUserProfile的方法来获取用户的信息,wx.login是用于获取用户的code(如果需要使用,有效时间五分钟)
const {
request,
getInfo,
globalData
} = getApp()
import Base64 from "../../utils/base64.js";
Page({
/**
* 页面的初始数据
*/
data: {
userName: '',
password: '',
codeUrl: '',
uuid: '',
code: ''
},
// 账号
userNameInput(e) {
this.setData({
userName: e.detail.value
})
},
// 密码
pwdInput(e) {
this.setData({
password: e.detail.value
})
},
// 验证码输入
codeInput(e) {
this.setData({
code: e.detail.value
})
},
// 更新验证码
getCode() {
request('/captchaImage', {}).then((res) => {
console.log(res.data.img);
this.setData({
codeUrl: "data:image/gif;base64," + res.data.img,
uuid: res.data.uuid
})
});
},
// 登录按钮
login() {
// 判断账号和密码
let readonly = false
let message = ''
if (!this.data.userName) {
readonly = true
message = '请先输入账号'
}
if (!this.data.password) {
readonly = true
message = '请先输入密码'
}
if (!this.data.code) {
readonly = true
message = '请输入验证码'
}
if (readonly) {
wx.showToast({
title: message,
icon: 'error'
})
return
}
let base64 = new Base64()
const params = {
username: this.data.userName,
password: base64.encode(this.data.password.toString()), // 密码加密
uuid: this.data.uuid,
code: this.data.code,
}
// 看是否需要获取用户的微信个人信息(登录时调用一次)
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '用于完善信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
globalData.wxUserInfo = res.userInfo
console.log('globalData.wxUserInfo', globalData.wxUserInfo,'res', res);
this.doLogin(params)
}
})
},
// 登录方法
doLogin(params){
wx.login({
success: res => {
console.log(res);
wx.setStorageSync('code', res.code)
request('/login', {
method: 'POST',
data: params
}).then(res => {
if (res.data.code != 200) {
wx.showToast({
title: res.data.msg, // 有icon时最多七个文字,icon为none,可有两行,没有图标
icon: 'error'
})
ruturn
}
wx.switchTab({
url: '/pages/home/home',
})
wx.setStorageSync("wx_token", res.data.token)
// 调用getInfo接口将数据存放在globalData下
getInfo()
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getCode()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
3.如果是登录需要60秒倒计时可以使用tdesign插件进行开发,地址tdesign,效果图(样式可以自行调整)
代码:login.wxml
<view>
<t-image src="https://img2.baidu.com/it/u=1448293250,1259490092&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" width="100vw" height="100vh" />
<view class="content">
<view style="padding-bottom: 20rpx;">
欢迎您的加入!
</view>
<view class="containe">
<t-input prefixIcon="logo-github-filled" label="手机号" placeholder="请输入手机号" />
<t-input prefixIcon="lock-off" label="验证码" placeholder="请输入验证码">
<view slot="suffix">
<t-button theme="light" size="extra-small" variant="outline" wx:if="{{ readonly }}" bindtap="getCode"> 获取验证码 </t-button>
<view style="display: flex;" wx:if='{{ !readonly }}'>
<t-count-down size="large" format="ss" time="{{ time }}" theme="round" bind:finish='timeFinish'>
</t-count-down>
<view> 秒后重发</view>
</view>
</view>
</t-input>
</view>
</view>
<view class="footer">
<t-button theme="primary" size="medium" variant="outline" style="width: 75%">注 册</t-button>
</view>
</view>
代码:login.json
{
"usingComponents": {
"t-image": "tdesign-miniprogram/image/image",
"t-button": "tdesign-miniprogram/button/button",
"t-input": "tdesign-miniprogram/input/input",
"t-count-down": "tdesign-miniprogram/count-down/count-down"
}
}
代码:login.js
// pages/logon/logon.js
Page({
/**
* 页面的初始数据
*/
data: {
readonly: true,
time: 60000
},
// 60秒倒计时
getCode(){
// 获取验证码的接口,在成功的回调里面
this.setData({
readonly: false
})
},
// 倒计时结束触发
timeFinish(){
this.setData({
readonly: true
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})