微信小程序 - 获取用户信息的几种方式
2023-09-11 14:14:36 时间
1. 老接口(上线使用-测试用button先获取用户信息)
1 // 登录
2 wx.login({
3 success: res => {
4 // 发送 res.code 到后台换取 openId, sessionKey, unionId
5 // 也就是发送到后端,后端通过接口发送到前端,前端接收用户信息等....
6 wx.setStorageSync('code', res.code);
7 console.log(wx.getStorageSync('code'))
8
9 // 获取用户信息
10 wx.getSetting({
11 success: res => {
12 if (res.authSetting['scope.userInfo']) {
13 // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
14 wx.getUserInfo({
15 success: res => {
16 // 可以将 res 发送给后台解码出 unionId
17 this.globalData.userInfo = res.userInfo
18
19 // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
20 // 所以此处加入 callback 以防止这种情况
21 if (this.userInfoReadyCallback) {
22 this.userInfoReadyCallback(res)
23 }
24 }
25 })
26 }
27 }
28 })
29 }
30 })
2. button - 官方示例
wxml
1 <!--index.wxml-->
2 <view class="container">
3 <view class="userinfo">
4 <block wx:if="{{!hasUserInfo && canIUse}}" class='show-author'>
5 <button open-type="getUserInfo" class='show-author' bindgetuserinfo="getUserInfo">
6
7 <!--随意定制 -->
8 <view class='get-userinfo'>获取用户信息</view>
9 </button>
10 </block>
11 <block wx:else>
12 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
13 <text class="userinfo-nickname">{{userInfo.nickName}}</text>
14 </block>
15 </view>
16 </view>
wxss
1 .show-author {
2 position: absolute;
3 top: 0;
4 bottom: 0;
5 left: 0;
6 right: 0;
7 z-index: 99;
8 background: #000;
9 opacity: 0.8;
10 }
11
12 .show-author>.get-userinfo {
13 color: #fff;
14 background-color: #f00;
15 border-radius: 10rpx;
16 top: 50%;
17 margin-top: 70%;
18 }
后面的app.js和index.js均是官方示例(或者直接点击拉取Github示例,哈哈)
3. 当然是发送code到后端,我们接收用户信息就OK了
相关文章
- 如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
- 微信小程序——gulp处理文件
- 微信小程序从注册到上线系列
- 微信里面的备忘录或便签在哪?
- 实现RTSP网站微信直播方案EasyNVR(linux版)部署问题之:ERR_CONTENT_LENGTH_MISMATCH
- 微信小程序思维导图
- 获取微信小程序源码
- 微信小程序----Grid(九宫格)(flex实现九宫格布局)
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序----picker选择器(picker、省市区选择器)(MUI选择器)
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)(MUI日期时间)
- SAP BSP, Java Web Project,Android和微信小程序的初始页面设置
- hbuilder X发布微信小程序失败的解决方法
- 微信小程序踩坑:wx.openDocument(Object object)打不开文件
- 微信小程序分包后报错:[获取文件失败] 以下文件已被配置忽略打包上传,模拟器无法获取: package1/package1/pages/dailyAdmin/index.js
- 微信小程序怎样生成体验版二维码?微信小程序怎么转化为二维码?
- 微信小程序获取用户openId
- 微信小程序:获取不限制的小程序码后端Java实现
- 平院微信图书馆——中转图书查询
- 微信小程序练手实战:前端+后端(Java)
- 微信小程序开发总结(详细)
- 微信小程序自定义组件
- 【前端面试题——微信小程序】
- 微信小程序 获取用户昵称、头像