微信小程序授权登录界面
原先用的 wx.getUserInfo(Object object) ，现已改革
现用的 wx.getUserProfile(Object object)，获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。
1 login.js页面
const app = getApp() //获取应用实例 Page({
data: {
userInfo: {
}, hasUserInfo: false, canIUseGetUserProfile: false, }, onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true }) } }, goto:function(){
wx.switchTab({
url:'../pages/index/index' }) }, getUserProfile(e) {
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => {
this.setData({
userInfo: res.userInfo, hasUserInfo: true, }) }, }) }, bindGetUserProfile: function (e) {
if (e.detail.userProfile) {
//用户按了允许授权按钮 var that = this; // 获取到用户的信息了，打印到控制台上看下 console.log("用户的信息如下："); console.log(e.detail.userProfile); //授权成功后,通过改变 hasUserInfo 的值，让实现页面显示出来，把授权页面隐藏起来 that.setData({
hasUserInfo: false }); } else {
//用户按了拒绝按钮 wx.showModal({
title: '警告', content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!', showCancel: false, confirmText: '返回授权', success: function (res) {
// 用户没有授权成功，不需要改变 hasUserInfo 的值 if (res.confirm) {
console.log('用户点击了“返回授权”'); } } }); } }}) 2 login.wxml
<view class="content"> <block wx:if="{
{!hasUserInfo}}"> <view class="header"> <image src='../image/wx_login.png'></image> </view> <button wx:if="{
{canIUseGetUserProfile}}" bindtap="getUserProfile"> 申请获取以下权限</button> <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> </block> <block wx:else> <image class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{
{userInfo.nickName}}</text> <button class='btn' bindtap="goto" >登录成功 点击跳转</button> </block> </view> 3 login.wxss
.header {
margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx; } .header image {
width: 200rpx; height: 200rpx; } .content {
margin-left: 50rpx; margin-bottom: 90rpx; } .content text {
display: block; color: #9d9d9d; margin-top: 40rpx; } .bottom {
border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; } .bottom1{
border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; } .btn {
padding: 0 60rpx; margin: 90rpx 0 90rpx 50rpx; background-color: #19be6b; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; white-space: nowrap; font-size: 16px; top: 10%; left: 20%; position: relative; text-decoration: none; height: 44px; line-height: 44px; box-shadow: inset 0 0 0 1px #19be6b; background: #fff !important; color: #19be6b !important; display: inline-block; border-radius: 10rpx; } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230488.html原文链接：https://javaforall.net
