1.插件市场导入uni-id公用模块
插件市场 uni-id ： https://ext.dcloud.net.cn/plugin?id=2116
导入成功后在dcloud控制台可以看到相应的公共模块
在项目云文件夹下自动生成common目录与uni-id公共模块
修改config.json文件并上传公共模块，这里是重点。
详细说明见官方文档：链接
2.云函数配置
新建云函数，并上传部署
最后要管理公共模块依赖，这里也是重点。
（如果没有关联公共模块，运行小程序时会报错：Cannot find module ‘uni-id’）
3.前端代码
<template>
<view class="center">
<view class="logo" @click="goLogin" :hover-class=" !login ? 'logo-hover' : '' " >
<image class="logo-img" :src="login ? uInfo.avatarUrl : avatarUrl"></image>
<view class="logo-title">
<text class="uer-name">Hi，{
{
login ? uInfo.nickName : '您未登录'}}</text>
<text class="go-login navigat-arrow" v-if="!login"></text>
</view>
</view>
<button open-type="getUserInfo" @getuserinfo="goLogin" withCredentials="true" v-if="!getSet">
授权获取用户昵称、头像
</button>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon"></text>
<text class="list-text" @click="exitLogin">退出登录</text>
<text class="navigat-arrow"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
getSet:true,
login: false,
avatarUrl: "../../static/tou.png", //未登录图标
uInfo: {
}
}
},
onLoad() {
wx.getSetting({
success:(res)=> {
if (res.authSetting['scope.userInfo']) {
// 已经授权获取用户信息
//console.log('已经授权')
this.getSet = true
let avatarUrl = uni.getStorageSync('avatarUrl')
let nickName = uni.getStorageSync('nickName')
let openid = uni.getStorageSync('openid')
if (openid != null && openid != "" && openid != undefined) {
this.login = true
this.uInfo = {
'avatarUrl': avatarUrl ,
'nickName': nickName
}
}
} else {
//console.log('未授权')
this.getSet = false
}
}
})
},
methods: {
//用户登录
goLogin() {
if (!this.login) {
uni.login({
provider: 'weixin',
success: (res) => {
let code = res.code //微信临时登录凭证
//调用云函数获取openid
uniCloud.callFunction({
name: 'login', //云函数名称
data: {
code
},
success: (res) => {
//从云端返回的信息，包括openid
console.log(res.result.openid)
uni.setStorageSync('openid', res.result.openid)
this.login = true
},
fail: (err) => {
console.log('调用云函数失败：', err)
}
})
// 获取用户头像、昵称等信息
uni.getUserInfo({
provider:'weixin',
success:(infoRes) => {
console.log(infoRes)
uni.setStorageSync('nickName', infoRes.userInfo.nickName)
uni.setStorageSync('avatarUrl', infoRes.userInfo.avatarUrl)
this.uInfo = {
'avatarUrl': infoRes.userInfo.avatarUrl,
'nickName': infoRes.userInfo.nickName
}
},
fail: (err) => {
console.log('获取用户信息失败',err)
}
})
},
fail: (err) => {
console.log('login失败：', err)
}
})
}
},
//退出登录
exitLogin() {
this.login = false
uni.removeStorageSync('avatarUrl') //删除缓存
uni.removeStorageSync('nickName')
uni.removeStorageSync('openid')
uni.showToast({
title:"账号已退出!",
icon:"success"
})
}
}
}
</script>
<style>
@font-face {
font-family: texticons;
font-weight: normal;
font-style: normal;
src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
}
page,
view {
display: flex;
}
page {
background-color: #f8f8f8;
}
.center {
flex-direction: column;
}
.logo {
width: 750upx;
height: 240upx;
padding: 20upx;
box-sizing: border-box;
background-color: #55aaff;
flex-direction: row;
align-items: center;
}
.logo-hover {
opacity: 0.8;
}
.logo-img {
width: 150upx;
height: 150upx;
border-radius: 150upx;
}
.logo-title {
height: 150upx;
flex: 1;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-left: 20upx;
}
.uer-name {
height: 60upx;
line-height: 60upx;
font-size: 38upx;
color: #FFFFFF;
}
.go-login.navigat-arrow {
font-size: 38upx;
color: #FFFFFF;
}
.login-title {
height: 150upx;
align-items: self-start;
justify-content: center;
flex-direction: column;
margin-left: 20upx;
}
.center-list {
background-color: #FFFFFF;
margin-top: 20upx;
width: 750upx;
flex-direction: column;
}
.center-list-item {
height: 90upx;
width: 750upx;
box-sizing: border-box;
flex-direction: row;
padding: 0upx 20upx;
}
.border-bottom {
border-bottom-width: 1upx;
border-color: #c8c7cc;
border-bottom-style: solid;
}
.list-icon {
width: 40upx;
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #55aaff;
text-align: center;
font-family: texticons;
margin-right: 20upx;
}
.list-text {
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
flex: 1;
text-align: left;
}
.navigat-arrow {
height: 90upx;
width: 40upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
text-align: right;
font-family: texticons;
}
</style>
成功拿到登录信息
云数据库自动生成数据表 uni-id-users
以下是用uniapp与阿里云开发的相册小程序，主要功能是手机壁纸的上传分享。
由于微信获取用户信息接口的变更，登录代码修改如下：
<template>
<view class="center">
<view class="logo" @click="goLogin" :hover-class=" !login ? 'logo-hover' : '' " >
<image class="logo-img" :src="login ? uInfo.avatarUrl : avatarUrl"></image>
<view class="logo-title">
<text class="uer-name">Hi，{
{
login ? uInfo.nickName : '您未登录'}}</text>
<text class="go-login navigat-arrow" v-if="!login"></text>
</view>
</view>
<view class="center-list">
<view class="center-list-item border-bottom" @click="goUpImages">
<text class="list-icon"></text>
<text class="list-text">上传壁纸</text>
<text class="navigat-arrow"></text>
</view>
<view class="center-list-item" @click="goMyWork">
<text class="list-icon"></text>
<text class="list-text">我的作品</text>
<text class="navigat-arrow"></text>
</view>
</view>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon"></text>
<text class="list-text" @click="goBaiduAi">传图识物</text>
<text class="navigat-arrow"></text>
</view>
</view>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon"></text>
<text class="list-text" @click="gophonLogin">垃圾分类</text>
<text class="navigat-arrow"></text>
</view>
</view>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon"></text>
<text class="list-text" @click="exitLogin">退出登录</text>
<text class="navigat-arrow"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
login: false,
avatarUrl: "../../static/tou.png", //未登录图标
uInfo: {
}
}
},
onLoad() {
let avatarUrl = uni.getStorageSync('avatarUrl')
let nickName = uni.getStorageSync('nickName')
let openid = uni.getStorageSync('openid')
if (openid != null && openid != "" && openid != undefined) {
this.login = true
this.uInfo = {
'avatarUrl': avatarUrl ,
'nickName': nickName
}
}
},
methods: {
//用户登录
goLogin() {
if (!this.login) {
// 获取用户头像、昵称等信息
uni.getUserProfile({
desc:'微信登录',
success:(infoRes) => {
console.log(infoRes)
uni.setStorageSync('nickName', infoRes.userInfo.nickName)
uni.setStorageSync('avatarUrl', infoRes.userInfo.avatarUrl)
this.uInfo = {
'avatarUrl': infoRes.userInfo.avatarUrl,
'nickName': infoRes.userInfo.nickName
}
this.login = true
},
fail: (err) => {
console.log('获取用户信息失败',err)
this.login = false
}
});
// 获取openid
uni.login({
provider: 'weixin',
success: (res) => {
let code = res.code //微信临时登录凭证
//调用云函数获取openid
uniCloud.callFunction({
name: 'getOpenID', //云函数名称
data: {
code
},
success: (res) => {
//从云端返回的信息，包括openid
console.log('openid:',res.result.openid)
uni.setStorageSync('openid', res.result.openid)
},
fail: (err) => {
console.log('调用云函数失败：', err)
}
})
},
fail: (err) => {
console.log('login失败：', err)
}
})
}
},
//退出登录
exitLogin() {
this.login = false
uni.removeStorageSync('avatarUrl') //删除缓存
uni.removeStorageSync('nickName')
uni.removeStorageSync('openid')
uni.showToast({
title:"账号已退出!",
icon:"success"
})
},
goUpImages() {
if(this.login) {
uni.navigateTo({
//跳转到指定页面
url: "../upImages/upImages",
})
} else {
uni.showToast({
title:"请先登录",
icon:"loading"
})
}
},
goMyWork() {
if(this.login) {
uni.navigateTo({
//跳转到指定页面
url: "../myWork/myWork",
})
} else {
uni.showToast({
title:"请先登录",
icon:"loading"
})
}
}
}
}
</script>
<style>
@font-face {
font-family: texticons;
font-weight: normal;
font-style: normal;
src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
}
page,
view {
display: flex;
}
page {
background-color: #f8f8f8;
}
.center {
flex-direction: column;
}
.logo {
width: 750upx;
height: 240upx;
padding: 20upx;
box-sizing: border-box;
background-color: #55aaff;
flex-direction: row;
align-items: center;
}
.logo-hover {
opacity: 0.8;
}
.logo-img {
width: 150upx;
height: 150upx;
border-radius: 150upx;
}
.logo-title {
height: 150upx;
flex: 1;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-left: 20upx;
}
.uer-name {
height: 60upx;
line-height: 60upx;
font-size: 38upx;
color: #FFFFFF;
}
.go-login.navigat-arrow {
font-size: 38upx;
color: #FFFFFF;
}
.login-title {
height: 150upx;
align-items: self-start;
justify-content: center;
flex-direction: column;
margin-left: 20upx;
}
.center-list {
background-color: #FFFFFF;
margin-top: 20upx;
width: 750upx;
flex-direction: column;
}
.center-list-item {
height: 90upx;
width: 750upx;
box-sizing: border-box;
flex-direction: row;
padding: 0upx 20upx;
}
.border-bottom {
border-bottom-width: 1upx;
border-color: #c8c7cc;
border-bottom-style: solid;
}
.list-icon {
width: 40upx;
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #55aaff;
text-align: center;
font-family: texticons;
margin-right: 20upx;
}
.list-text {
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
flex: 1;
text-align: left;
}
.navigat-arrow {
height: 90upx;
width: 40upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
text-align: right;
font-family: texticons;
}
</style>
