uni.getProvider(OBJECT)
uni.login(OBJECT)
uni.getUserInfo(OBJECT)
------------2021/12/17更新----------------------------
注意:在小程序 withCredentials 为 true 时或是在 App 调用 uni.getUserInfo,要求此前有调用过 uni.login 且登录态尚未过期。微信基础库2.10.4版本对用户信息相关接口进行了调整,使用 uni.getUserInfo 获取得到的 userInfo 为匿名数据,建议使用 uni.getUserProfile 获取用户信息。
<template>
<view class="loginWrap ">
<view class="imgWrap">
<image class="logo" style="width: 100upx;height: 100upx;" src="../../static/logo.png" mode=""></image>
</view>
<form v-if="loginWay == '短信验证登录'" class="loginForm" @submit="formSubmit">
<view class="uni-form-item uni-column">
<u-input placeholder="请输入登录账号" v-model="value" type="number" clearable />
</view>
<view class="uni-form-item uni-column">
<u-input v-model="value" type="password" password-icon="true" />
<text class="forgetText">忘记密码</text>
</view>
<button form-type="submit" class="loginbtn" type="default">登录</button>
</form>
<u-form class="loginForm" v-if="loginWay == '账号密码登录'" :model="form" ref="uForm">
<view class="uni-form-item uni-column">
<u-input placeholder="请输入手机号码" type="number" v-model="form.name" />
</view>
<view class="uni-form-item uni-column">
<u-input placeholder="请输入验证码" v-model="form.name" />
<view class="wrap">
<u-toast ref="uToast"></u-toast>
<u-verification-code
:seconds="seconds"
@end="end"
@start="start"
ref="uCode"
@change="codeChange"
></u-verification-code>
<u-button type="success" @click="getCode">{{tips}}</u-button>
</view>
</view>
<button class="loginbtn" type="default">登录</button>
</u-form>
<view class="action center">
<text @click="changeLoginWay" style="color: #71B6F7;">{{loginWay}}</text>
</view>
<view class="wechatLogin center">
<text>————社交账号登录————</text>
<button class="wechatLoginBtn" open-type="getUserInfo" @getuserinfo="wechatLogin" ></button>
</view>
</view>
</template>
<script>
export default{
data(){
return{
form:{
name:''
},
value:'',
loginWay:'短信验证登录',
seconds:60,
tips:''
}
},
methods:{
//登录提交
formSubmit(){
console.log("页面跳转")
},
//微信登录
wechatLogin(){
let _that = this;
uni.getSetting({
success(res) {
console.log("授权:",res);
if (!res.authSetting['scope.userInfo']) {
//这里调用授权
console.log("当前未授权");
} else {
//用户已经授权过了
console.log("当前已授权");
//#ifdef MP-WEIXIN
uni.getProvider({
service: 'oauth',
success: function (res) {
console.log(res.provider)
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: (res2) => {
uni.getUserInfo({
provider: 'weixin',
success: (info) => {//这里请求接口
console.log("登录返回信息",res2);
console.log("获取用户信息",info);
_that.$store.commit('login',info.userInfo);
uni.redirectTo({
url: '../index/index'
});
},
fail: () => {
uni.showToast({title:"微信登录授权失败",icon:"none"});
}
})
},
fail: () => {
uni.showToast({title:"微信登录授权失败",icon:"none"});
}
})
}else{
uni.showToast({
title: '请先安装微信或升级版本',
icon:"none"
});
}
}
});
//#endif
}
}
})
},
//点击切换登录方式
changeLoginWay(){
if(this.loginWay == '短信验证登录'){
this.loginWay = '账号密码登录'
console.log("222")
}else if(this.loginWay == '账号密码登录'){
console.log("111111")
this.loginWay = '短信验证登录'
}
},
//
codeChange(text) {
// console.log("codeChange",text)
this.tips = text;
},
//点击获取验证码倒计时
getCode(){
console.log("aa")
if(this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
this.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
this.$u.toast('倒计时结束后再发送');
}
},
end() {
this.$u.toast('倒计时结束');
},
start() {
console.log("aa1111111")
this.$u.toast('倒计时开始');
}
}
}
</script>
<style lang="less">
.loginWrap{
.imgWrap{
text-align: center;
padding: 50upx;
}
.loginForm{
padding: 30upx;
.uni-form-item{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1upx solid #DCDCDC;
padding: 10upx 30upx;
margin: 20upx;
u-input{
flex: 1;
}
.forgetText{
color: #C8C7CC;
}
}
.wrap{
height: auto;
}
.loginbtn{margin: 20upx; margin-top: 60upx;background: #2CA800;color: #fff;}
}
.wechatLogin{
margin-top: 60upx;
text{
color: #CCCCCC;
}
.wechatLoginBtn{
background-image: url(../../static/img/wechat.png);
border: none;
width: 32px;
height: 32px;
&::after{
border: none;
}
}
image{
width: 54upx;
height: 54upx;
margin-top: 30upx;
}
}
}
</style>
微信登录成功页面
<template>
<view class="content-wrapp">
<view v-if="loginStatus" class="content">
<image class="logo" :src="userInfo.avatarUrl"></image>
<view class="text-area">
<text class="title">{{userInfo.nickName}}</text>
</view>
</view>
<view class="content" v-else>
<button @click="tapLoginBtn" type="default">请先登录</button>
</view>
</view>
</template>
<script>
import {mapState} from 'vuex'
export default {
data() {
return {
title: 'Hello'
}
},
computed:{
...mapState({
loginStatus:state=>state.loginStatus,
userInfo:state=>state.userInfo
})
},
onLoad() {
},
onShow(){
console.log("打印登录状态",this.loginStatus)
console.log("打印登录后的用户信息",this.userInfo)
},
methods: {
tapLoginBtn(){
uni.navigateTo({
url:'../login/index'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
202年12月17号更新
新增获取微信手机号功能
实现步骤:
1.通过uni.login获取code
3.un.checkSession()检测session_key是否过期
2.通过特定获取电话号码按钮,getPhoneNumber方法获取加了密手机号(需后端解密返回)
一定要先获取code再获取电话号码,否则可能会出现后端解密失败获取不到电话号码
<template>
<view class="login-btn">
<button v-if="type === 'phone'" type="default" class="cusomter-button" hover-class="customer-button-hover" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户快捷登录
</button>
</view>
</template>
<script>
data(){
retrun:{
code:''
}
},
onLoad(){
this.getCode();
},
methods:{
getCode(){
uni.login({
//返回的code小程序专有,用户登录凭证。开发者需要在开发者服务器后台,使用 code 换取 openid 和 session_key 等信息
provider:'weixin',
success(res){
console.log("获取微信的code",res)
this.code = res.code
},
fail(err){
resolve(false);
}
})
},
getPhoneNumber(e){
//e参数里就有对应的iv和encryptedData值
uni.checkSession({//因为先请求的code
success() {
//这里就可以做对应的请求处理拉
将后端需要的参数code ,iv ,encryptedData等参数传给后端
},
fail() {
resolve(false)
}
})
}
}
</script>
效果图: