微信登录所需
获取wx用户信息
// 在uni 官网提示 获取用户信息方法有很多 列:uni.getUserInfo() / uni.getUserProfile()
// 然后 除去 uni.getUserProfile() 方法 其他的方法 调用返回的 在未调用 uni.login()登录方法之前
// 返回的全是匿名数据 (微信基础库2.10.4版本对用户信息相关接口进行了调整)
// 既然说到是登录我们肯定 是第一次所以我们采用 uni.getUserProfile()
uni.getUserProfile({
desc: "用于完善用户信息", //必填,声明获取用户个人信息后的用途
success: (result) => {
console.log( result)
// result 详细参数
//https://uniapp.dcloud.io/api/plugins/login.html#getuserprofile
}
})
ps:之前在研究的时候 看到很多朋友说 uni.getUserProfile() 方法调用了没有反应
再次说明一下 uni.getUserProfile() 无法在页面加载生命周期中调用
在一个view 标签 中添加一个简单的 点击事件即可( @click=“login”)
调用uni.login 获取用户临时code 返回给后台
// 用户登录凭证。开发者需要在开发者服务器后台,使用 code 换取 openid 和 session_key 等信息
uni.login({
success(res) {
if (res.errMsg === 'login:ok') {
onLogin(result.rawData, res.code).then((res) => { // onLogin 自我封装请求
if (res.code == 200) {
// 获取 后台接口返回的数据请求
}
})
}
}
})
说不多说直接上代码
<view class="Login_btm" @click="login">
微信授权登录
</view>
import {
onLogin
} from '@/pages/api/login.js'
export default {
data(){
return {
falg:true,// 设置 防重复点击key
}
},
methods:{
// 小程序登录方法
login(){
let that = this
if(that.falg){
that.falg =! that.falg//防重复点击
uni.getUserProfile({
desc: "用于完善用户信息", //必填,声明获取用户个人信息后的用途,不超过30个字符
success: (result) => {
uni.login({
success(res) {
if (res.errMsg === 'login:ok') {
onLogin(result.rawData, res.code).then((res) => {
if (res.code == 200) {
const data = {
xxx:xxx.xxx.xx
}
uni.setStorage({
key: 'token_key_name',
data: data
})
// 调用接口成功 获取 token 将数据缓存
}
})
}
}
})
},
})
}
}
}
}