【微信小程序/实现】实现获取微信个人信息

一、目的：实现获取微信个人的昵称和头像
二、页面过程
三、实现过程
- （1）核心代码：
- （2）完整代码
- - 1. wxml代码
  - 2. wxss代码
  - 3. js代码

一、目的：实现获取微信个人的昵称和头像

二、页面过程

（1）初始页面如下：
希望可以点击按钮实现获取微信个人的昵称和头像

（2）点击按钮后的页面：

如果拒绝
如果允许

三、实现过程

（1）核心代码：

Page({//页面的初始数据data: {userInfo: '' //定义一个存放个人信息的全局变量},//授权登录的方法login(){//微信申请接口wx.getUserProfile({// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写desc: '必须授权才可以继续使用', //允许授权后，保存用户个人信息success:res => {//把用户信息保存到本地，（'自定义名字'，信息数据）wx.setStorageSync('localUserInfo', res.userInfo); //将个人信息赋值给相应全局变量this.setData({userInfo: res.userInfo,})},//拒绝授权后的提示fail(res){wx.showModal({title: '提示',content: '必须授权才可以继续使用'})}})}
})

（2）完整代码

1. wxml代码

<!-- pages/login/login.wxml -->
<view class="door"><view wx:if="{{userInfo}}" class="user"><image src="{{userInfo.avatarUrl}}" mode="widthFix"></image><text>{{userInfo.nickName}}</text></view><button type="primary" bindtap="login" wx:if="{{!userInfo}}">授权登录</button><button type="primary" bindtap="loginOut" wx:else>退出登录</button>
</view>

2. wxss代码

/* pages/login/login.wxss */
.door{width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;background-image: url('https://cdn.ggac.com/media/work/image/2020/03/594020fa-6c1b-11ea-aa13-0242c0a88002.jpg');background-size: 100% 100%;
}.door button{margin-bottom: 15vh;
}.door .user{display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 40vh;
}.door .user image{width: 14vh;border-radius: 50%;margin-bottom: 12rpx;
}.door .user text{border-radius: 16rpx;padding: 8rpx;background-color: gray;color: white;
}

3. js代码

// pages/login/login.js
Page({//页面的初始数据data: {userInfo: '' //定义一个存放个人信息的全局变量},//授权登录的方法login(){//微信申请接口wx.getUserProfile({// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写desc: '必须授权才可以继续使用', //允许授权后，保存用户个人信息success:res => {//把用户信息保存到本地，（'自定义名字'，信息数据）wx.setStorageSync('localUserInfo', res.userInfo); //将个人信息赋值给相应全局变量this.setData({userInfo: res.userInfo,})},//拒绝授权后的提示fail(res){wx.showModal({title: '提示',content: '必须授权才可以继续使用'})}})},//退出登录loginOut(){this.setData({userInfo: '',})wx.setStorageSync('localUserInfo', '');wx.showToast({title: '已退出登录！',})},//生命周期函数--监听页面加载onLoad: function (options) {//检测本地是否还保存着登录状态时的个人信息，可直接免登录if(wx.getStorageSync('localUserInfo')!=''){this.setData({userInfo: wx.getStorageSync('localUserInfo')})}}
})

【微信小程序/实现】实现获取微信个人信息相关推荐

微信小程序案例：获取微信访问用户的openid
在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...
联系微信ID服务器失败,微信小程序-新用户获取微信手机号登录服务端获取不到unionid情况...
需求:微信小程序进行获取手机号登录时,登录失败授权微信用户信息授权微信手机号 bindLogin: function(e) { wx.hideLoading(); console.log(e.de ...
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息
关于小程序获取微信用户信息: 1.open-type="getUserInfo"在2021年4月13日停用 2.wx.getUserInfo 在 2021年4月28日停用 3.wx ...
微信小程序-云函数-获取用户输入信息并上传到后台数据库
// pages/zhuce/zhuce.js let name=""; Page({/*** 页面的初始数据*/data: {},getName(event){name=even ...
微信小程序 java 传值_微信小程序传值获取值的实例方法
微信小程序传值以及获取值方法的详解微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要 ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
[技术博客] 微信小程序的formid获取
微信小程序的formid获取 formId的触发微信小程序可以通过收集用户的formid,获取formid给用户主动推送微信消息.获取formid有两个途径,一个是触发一次表单提交,或者触发一次支付 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
java微信小程序接口openid过期_Java微信小程序登录接口获取openid
根据官方文档,wx.login()的回调函数中,需要我们传递生成的用户登录凭证到code2accessToken的接口中小程序登录方法 code2accessToken的方法中要求传入如下参数 co ...

【微信小程序/实现】实现获取微信个人信息

【微信小程序/实现】实现获取微信个人信息

一、目的：实现获取微信个人的昵称和头像

二、页面过程

三、实现过程

（1）核心代码：

（2）完整代码

1. wxml代码

2. wxss代码

3. js代码

【微信小程序/实现】实现获取微信个人信息相关推荐

最新文章

热门文章