平台判断
https://www.cnblogs.com/stumpx/p/13289154.html
获取不到cloudID需要开启云开发
https://www.jianshu.com/p/e0dd142cc612
uniCould
https://uniapp.dcloud.io/uniCloud/README
数据缓存
https://uniapp.dcloud.io/api/storage/storage?id=clearstorage
第三方服务登录
https://uniapp.dcloud.io/api/plugins/login
获取电话号码
https://developers.weixin.qq.com/community/develop/article/doc/0006a8ec7ac860c94bf90a34f5d813
登录页
<template>
<view class="box">
<view class="login" v-if="!isLogin" @click="login">
登录
</view>
<view v-else class="xx">
<image class="img" :src="avatarUrl" mode="aspectFit" @click="exit"></image>
<view>
{{nickName}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLogin:false,
avatarUrl:'',
nickName:'',
cloudID:''
}
},
onLoad() {
//#ifdef MP-WEIXIN
// 判断如果能获取到用户id,就表示已经登录
if(uni.getStorageSync("cloudID")){
// 把通过缓存的key获取值赋给data中数据在页面显示
this.nickName=uni.getStorageSync("nickName")
this.avatarUrl=uni.getStorageSync("avatarUrl")
// 登录状态改为登录
this.isLogin=true
}
//#endif
//#ifdef H5
// 判断是否已经登录
if(uni.getStorageSync('loginId')){
// 把通过缓存的key获取值赋给data中数据在页面显示
this.nickName=uni.getStorageSync("nickName")
this.avatarUrl=uni.getStorageSync("avatarUrl")
// 登录状态改为登录
this.isLogin=true
}
// 监听全局自定义事件,并将传递的数据通过e接收赋值显示到页面
uni.$on('loginData',(e)=>{
let {nickName,avatarUrl,isLogin,loginId}=e
this.isLogin=isLogin
this.avatarUrl=avatarUrl
this.nickName=nickName
// 缓存信息,刷新后不丢失
uni.setStorageSync('loginId',loginId)
uni.setStorageSync('avatarUrl',avatarUrl)
uni.setStorageSync('nickName',nickName)
})
//#endif
},
methods: {
// 登录方法
login(){
// 如果是微信小程序平台则走里面的内容
//#ifdef MP-WEIXIN
// 获取用户信息
uni.getUserProfile({
desc:'获取用户登录信息',
success:(e)=>{
let {cloudID,userInfo:{avatarUrl,nickName}}=e
console.log(e)
// 把获取的用户信息存储在本地缓存中指定的key中,同步接口
uni.setStorageSync('cloudID',cloudID)
uni.setStorageSync('avatarUrl',avatarUrl)
uni.setStorageSync('nickName',nickName)
// 把获取到的用户信息赋给data中数据并在页面中显示
this.nickName=nickName
this.cloudID=cloudID
this.avatarUrl=avatarUrl
this.isLogin=true
}
})
//#endif
// 如果是h5平台则走这里的内容
//#ifdef H5
uni.navigateTo({
url:'../login/login'
})
//#endif
},
exit(){
uni.clearStorageSync()
this.clear()
},
// 清空数据的方法
clear(){
this.isLogin=false
this.avatarUrl=''
this.nickName=''
}
}
}
</script>
H5登录页面,登录成功后跳回上个页面
<template>
<view class="box">
<view class="login">
<text class="label">账号:</text>
<input class="txt" type="text" v-model="loginId" />
</view>
<view class="login">
<text class="label">密码:</text>
<input class="txt" type="password" v-model="loginPwd" />
</view>
<view class="btn" @click="login">
登录
</view>
</view>
</template>
<script>
export default {
data() {
return {
loginId: '',
loginPwd: ''
}
},
methods: {
login() {
if (this.loginId == 'admin' && this.loginPwd == '123456') {
// 注册全局自定义事件
uni.$emit('loginData', {
//登录成功后唯一id
loginId:'admin',
nickName: 'Rainbow',
avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/HKw2OxI8wXYxm5zjyESYJFZQUXzOia0eH5xQqJVlHsGVsUwyVq59tkzMwoianAh6icEvHvx2IqmsktyNQaibZe0Ihw/132',
isLogin: true
})
// 登录成功后返回前一个页面
uni.navigateBack()
} else {
uni.$msg('账号或密码错误')
}
}
}}
</script>