IT评测·应用市场-qidao123.com技术社区

标题: 微信小程序获取用户信息的API又有变动了 [打印本页]
作者: 梦见你的名字    时间: 2022-6-24 22:11
标题: 微信小程序获取用户信息的API又有变动了
文章目录



小程序项目

项目代码涉及的主要文件有：
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属性

代码变更涉及的文件有：

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

  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

  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. })
复制代码
相关链接

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

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



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4