授权登录
<!--pages/login/index.wxml-->
<view>
<view class="container">
<view class="wechatapp">
<!-- <image class="header" src="/images/wechatapp.png"></image> -->
<view class="header">
<open-data class="" type="userAvatarUrl"></open-data>
</view>
</view>
<view class="auth-title">申请获取以下权限</view>
<view class="auth-subtitle">获得你的公开信息(昵称、头像等)</view>
<button wx:if="{{canIUseGetUserProfile}}" class="login-btn" lang="zh_CN" catchtap="GetUserInfo">授权登录</button>
<button wx:else class="login-btn" openType="getUserInfo" lang="zh_CN"
bindgetuserinfo="bindGetUserInfo">授权登录</button>
<button class="login-btn" bindtap="backUrl">取消授权</button>
</view>
</view>
/* pages/login/index.wxss */
.page {
background: #fff;
font-size: 32rpx;
}
.container {
padding: 0 60rpx;
}
.wechatapp {
padding: 80rpx 0 48rpx;
border-bottom: 1rpx solid #e3e3e3;
margin-bottom: 72rpx;
text-align: center;
}
.wechatapp .header {
width: 190rpx;
height: 190rpx;
border: 2px solid #fff;
margin: 0rpx auto 0;
border-radius: 50%;
overflow: hidden;
box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
}
.auth-title {
color: #585858;
font-size: 40rpx;
margin-bottom: 40rpx;
}
.auth-subtitle {
color: #888;
margin-bottom: 88rpx;
}
.login-btn {
border: none;
/* height: 88rpx;
line-height: 88rpx; */
background: #04be01;
color: #fff;
font-size: 11pt;
border-radius: 999rpx;
width: 45%;
margin: 20rpx 0;
}
.login-btn::after {
display: none;
}
.login-btn.button-hover {
box-shadow: inset 0 5rpx 30rpx rgba(0, 0, 0, 0.15);
}
// pages/login/index.js
const app = getApp()
import {
request
} from '../../request/index.js'
Page({
/**
* 页面的初始数据
*/
data: {
canIUseGetUserProfile: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options)
if (wx.getUserProfile) {
console.log(11)
this.setData({
canIUseGetUserProfile: true
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 授权
*/
bindGetUserInfo(e) {
console.log(e.detail.userInfo)
app.globalData.userInfo = e.detail.userInfo
if (e.detail.userInfo) {
// 获取openid
app.globalData.hasLogin = true;
app.globalData.userInfo = e.detail.userInfo
let userinfo = e.detail.userInfo
wx.login({
success(res) {
if (res.code) {
console.log(res)
let code = res.code;
//发起网络请求
request({
url: app.globalData.base_url + '?m=Index&a=is_login',
data: {
code: code
}
}).then((res) => {
var res = JSON.parse(res.data);
console.log(res);
userinfo.openid = res.openid
wx.setStorageSync("userinfo", userinfo);
// 存储用户信息到服务器
request({
url: app.globalData.base_url + '?m=Index&a=userinfo_save',
data: {
nickname: userinfo.nickName,
avatarurl: userinfo.avatarUrl,
country: userinfo.country,
province: userinfo.province,
city: userinfo.city,
gender: userinfo.gender,
openid: userinfo.openid,
code: code,
inviteid: app.globalData.inviteId
}
}).then((res) => {
// console.log(res);
app.globalData.userInfo.member_id = res.data.member_id;
userinfo.member_id = res.data.member_id
wx.setStorageSync("userinfo", userinfo);
// 授权成功跳转首页
wx.navigateTo({
url: '/pages/index/index',
})
})
});
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
} else {
wx.showModal({
title: '授权提示',
content: '小程序需要您的微信授权才能使用哦~ '
})
}
},
// 授权
GetUserInfo(e) {
wx.getUserProfile({
desc: '正在获取', //不写不弹提示框
success: function (res) {
console.log('获取成功: ', res)
// 获取openid
app.globalData.hasLogin = true;
app.globalData.userInfo = res.userInfo
let userinfo = res.userInfo
wx.login({
success(res) {
if (res.code) {
console.log(res)
let code = res.code;
//发起网络请求
request({
url: app.globalData.base_url + '?m=Index&a=is_login',
data: {
code: code
}
}).then((res) => {
var res = JSON.parse(res.data);
// console.log(res);
userinfo.openid = res.openid
wx.setStorageSync("userinfo", userinfo);
app.globalData.userinfo = userinfo;
// 存储用户信息到服务器
request({
url: app.globalData.base_url + '?m=Index&a=userinfo_save',
data: {
nickname: userinfo.nickName,
avatarurl: userinfo.avatarUrl,
country: userinfo.country,
province: userinfo.province,
city: userinfo.city,
gender: userinfo.gender,
openid: userinfo.openid,
code: code,
inviteid: app.globalData.inviteId
}
}).then((res) => {
app.globalData.userInfo.member_id = res.data.member_id;
userinfo.member_id = res.data.member_id
wx.setStorageSync("userinfo", userinfo);
// 授权成功跳转首页
wx.navigateTo({
url: '/pages/index/index',
})
})
});
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
},
fail: function (err) {
// console.log("获取失败: ",err)
wx.showModal({
title: '授权提示',
content: '小程序需要您的微信授权才能使用哦~'
})
}
})
},
backUrl() {
wx.navigateTo({
url: '/pages/index/index',
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流!
2. 如有无法查看或链接失效,麻烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。 所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。