微信小程序获取用户信息的API又有变动了

文章目录

• 小程序项目
  
• 
  
  
  
  • app.json
    
  • app.wxss
    
  • app.js
    
  • pages/index/index.wml
    
  • pages/index/index.wxss
    
  • pages/index/index.js
    
    
  
• 获取用户信息
  
• 
  
  
  
  • 组件button的open-type、bindgetuserinfo属性
    
  • 
    
    
    
    • pages/index/index.wxml
      
    • pages/index/index.js
      
       
    
  • wx.getUserInfo()
    
  • 
    
    
    
    • pages/index/index.wxml
      
    • pages/index/index.js
      
       
    
  • wx.getUserProfile()
    
  • 
    
    
    
    • pages/index/index.wxml
      
    • pages/index/index.js
      
      
    
    
  
• 相关链接
  

小程序项目

项目代码涉及的主要文件有：

• app.json
  
• app.wxss
  
• app.js
  
• pages/index/index.wxml
  
• pages/index/index.wxss
  
• pages/index/index.js
  

app.json

1. {
2.   "pages": [
3.     "pages/index/index"
4.   ],
5.   "window": {
6.     "navigationBarBackgroundColor": "#FFA500",
7.     "navigationBarTitleText": "首页",
8.     "navigationBarTextStyle": "white"
9.   },
10.   "style": "v2",
11.   "sitemapLocation": "sitemap.json"
12. }

复制代码

app.wxss

1. page{
2.   height: 100%;
3. }

复制代码

app.js

1. App({})

复制代码

pages/index/index.wml

1. <view class="container">
2.   <view class="userInfo">
3.     <image src="/static/images/aito.jpg" class="avatar"></image>
4.     <view class="nickname">{{nickname}}</view>
5.   </view>
6.   <view class="btnBox">
7.     <text class="btn">hello world</text>
8.   </view>
9. </view>

复制代码

pages/index/index.wxss

1. .container{
2.   display: flex;
3.   flex-direction: column;
4.   align-items: center;
5.   background:lightgoldenrodyellow;
6.   padding: 100rpx;
7.   height: 100%;
8. }
9. .userInfo{
10.   padding: 20rpx 0;
11.   text-align: center;
12. }
13. .avatar{
14.   width: 128rpx;
15.   height: 128rpx;
16.   border-radius: 50%;
17. }
18. .nickname{
19.   color: gray;
20. }
21. .btnBox{
22.   margin: 64rpx;
23. }
24. .btn{
25.   height: 80rpx;
26.   line-height: 80rpx;
27.   padding: 10rpx 20rpx;
28.   border-radius: 4rpx;
29.   text-align: center;
30.   border: 1rpx solid #333;
31.   font-size: 26rpx;
32. }

复制代码

pages/index/index.js

1. Page({
2.   data:{
3.     nickname:"问界M5"
4.   }
5. })

复制代码

获取用户信息

微信小程序获取用户信息，有如下3种方式：

• 使用组件button的open-type、bindgetuserinfo属性：获取用户信息，获取的是匿名数据。
  
• 使用API：wx.getUserInfo()，获取的也是匿名数据。
  
• 使用API：wx.getUserProfile()，可以获取用户头像、昵称、性别及地区信息，但腾讯的一纸公告告诉我们，2022年10月25日24时后，wx.getUserProfile获取用户头像将统一返回灰色头像，昵称将统一返回“微信用户”。
  

组件button的open-type、bindgetuserinfo属性

代码变更涉及的文件有：

• pages/index/index.wxml
  
• pages/index/index.js
  

pages/index/index.wxml

1. <view class="container">
2.   <view class="userInfo">
3.     <image src="/static/images/aito.jpg" class="avatar"></image>
4.     <view class="nickname">{{nickname}}</view>
5.   </view>
6.   <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
7.   <view class="btnBox">
8.     <text class="btn">hello world</text>
9.   </view>
10. </view>

复制代码

pages/index/index.js

1. Page({
2.   data:{
3.     nickname:"问界M5"
4.   },
5.   handleGetUserInfo(res){
6.     console.log(res);
7.     console.log(res.detail.userInfo)
8.   }
9. })

复制代码

wx.getUserInfo()

代码变更涉及的文件有：

• pages/index/index.wxml
  
• pages/index/index.js
  

pages/index/index.wxml

1. <view class="container">
2.   <view class="userInfo">
3.     <image src="/static/images/aito.jpg" class="avatar"></image>
4.     <view class="nickname">{{nickname}}</view>
5.   </view>
6.   <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
7.   <view class="btnBox">
8.     <text class="btn">hello world</text>
9.   </view>
10. </view>

复制代码

pages/index/index.js

1. Page({
2.   data:{
3.     nickname:"问界M5"
4.   },
5.   handleTap(){
6.     wx.getUserInfo({
7.       success:(res)=>{
8.         console.log(res);
9.         console.log(res.userInfo)
10.       }
11.     })
12.   }
13. })

复制代码

wx.getUserProfile()

代码变更涉及的文件有：

• pages/index/index.wxml
  
• pages/index/index.js
  

pages/index/index.wxml

1. <view class="container">
2.   <view class="userInfo">
3.     <image src="/static/images/aito.jpg" class="avatar"></image>
4.     <view class="nickname">{{nickname}}</view>
5.   </view>
6.   <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
7.   <view class="btnBox">
8.     <text class="btn">hello world</text>
9.   </view>
10. </view>

复制代码

pages/index/index.js

1. Page({
2.   data:{
3.     nickname:"问界M5"
4.   },
5.   handleTap(){
6.     wx.getUserProfile({
7.       desc:"获取用户信息",
8.       success:(res)=>{
9.         console.log(res);
10.       }
11.     })
12.   }
13. })

复制代码

相关链接

新建微信小程序项目
微信小程序的数据绑定
微信小程序的事件绑定
生命周期函数、路由跳转

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！