微信小程序开发之——用户登录-获取用户信息(5)，意外收获字节跳动内部资料

2024-04-28 10:04:21

{{userInfo.nickName}}

{{userInfo.city}}

{{userInfo.gender0?“未知”:userInfo.gender1?“男”:“女”}}

说明：

open-type=“getUserInfo”：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息（小程序插件中不能使用）

3.2 样式文件(pages/user/user.wxss)

.container{

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

.userinfo{

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar{

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname{

color:#f00;

}

3.3 逻辑文件(pages/user/user.js)

const app = getApp();

Page({

/**

页面的初始数据

*/

data: {

userInfo: {},

hasUserInfo: false

},

getUserInfo: function (e) {

console.log(e.detail.userInfo)

if (e.detail.userIn
fo) {

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

}

},

})

3.4 效果图

输出信息说明

| 取值 | 说明 |

| :-: | :-: |

| avatarUrl | 用户头像的URL地址 |

| nickName | 用户昵称 |

| gender | 用户的性别，0表示未知，1表示男，2表示女 |

| country | 用户所在的国家 |

| provice | 用户所在的省份 |

| city | 用户所在的城市 |

四登录获取用户信息优化

4.1 问题

需要在pages/user/user.wxml中点击按钮才能获取用户信息
小程序启动时应用授权后，保存用户信息
指定页面的onLoad函数，调用app.js中保存的用户信息

4.2 app.js 授权时保存用户数据

App({

onLaunch() {

wx.getSetting({

success: res => {

if (res.authSetting[‘scope.userInfo’]) {

//执行到此处表示用户已经授权，可以直接获取到用户信息

wx.getUserInfo({

success: res => {

console.log(res.userInfo);

this.globalData.userInfo = res.userInfo

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

}

})

}

}

})

},

globalData: {

userInfo: null,

token: null //保存token

},

})

4.3 pages/user/user.js中onLoad中获取用户授权

onLoad: function (options) {

if (app.globalData.userInfo) {

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

} else {

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true
onLoad中获取用户授权

onLoad: function (options) {

if (app.globalData.userInfo) {

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

} else {

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

微信小程序开发之——用户登录-获取用户信息(5)，意外收获字节跳动内部资料相关推荐

微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序通过web-view网页授权获取用户公众号OpenID
小程序中实现网页授权获取微信公众号OpenID 1.准备工作 2.应用场景说明 3.实现步骤结语 1.准备工作第一步: 通过该地址https://mp.weixin.qq.com/debug/cg ...
微信小程序又双叕改获取用户头像昵称的规则了，微信小程序如何去最新获取头像昵称
就最近在写微信小程序项目的时候,发现微信又双叕更改获取用户头像昵称的规则了,我连wx.getUserProfile都还没用上,一直还停留在wx.getUserInfo的阶段,结果告诉我,又改规则了,一 ...
在微信小程序中，如果自动获取用户所在的省市地区？
可以通过微信小程序提供的API获取用户所在的省市地区信息.具体步骤如下: 在小程序中需要获取用户地理位置时,需要先在app.json中配置"permission"字段,并开启用户授 ...
微信小程序开发之如何哪获取微信小程序的APP ID
微信小程序的开发工具,在新建项目的时候,默认提示填写APP ID,如果不填写AppID 也是可以本地测试和开发的,但是无法通过手机调试,只能在开发工具里查看如果需要真机调试微信小程序,需要安装微信6 ...
微信小程序开发之从相册获取图片使用相机拍照本地图片上传
今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml  <button st ...
微信小程序基础 - 19 （登录后用户头像的更新）
上传更新头像的业务流程: 1.客户端点击头像选择头像图片 wx.chooseImage() 2.将头像图片上传到服务器, 并且获取访问该头像图片的网络路径. 3.将该网络路径, 与当前用户绑定在一起存 ...
微信小程序：如何通过授权获取用户绑定手机号
工具:微信开发者工具.thinkphp3.2框架整理逻辑调用接口wx.login()获取登录凭证(code) 通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥 ...
微信小程序开发（八）获取手机ip地址
// succ.wxml <view>手机IP:{{motto.query}}</view>// succ.js var app = getApp() Page({data: ...

最新文章

热门文章