【微信小程序】基于3.9.3基础库获取微信用户呢称的场景

da11

微信小程序-基于3.9.3基础库获取微信用户呢称的场景

场景介绍：获取用户微信呢称，获取成功后隐藏输入框，显示用户呢称，后续鉴权操作需要后端开放接口后测试，本测试场景用意只是为了获取微信用户呢称即可。

项目架构：



全局配置：app.json

{
    "pages": [
        "pages/test/test",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/index/index","text":"首页"},
            {"pagePath": "pages/test/test","text":"数据页"},
            {"pagePath": "pages/logs/logs","text":"访问时间记录"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "测试场景",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}



全局样式：app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}


全局逻辑：app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})


首页页面：index.wxml

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
      <!--
        只要输入了呢称即可，不要求获取用户头像。这里隐藏头像按钮
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        </button>
        -->
        <view class="nickname-wrapper">
          <text class="nickname-label">昵称</text>
          <input type="nickname" class="nickname-input" placeholder="请点击此处获取昵称" bind:change="onInputChange" />
        </view>
      </block>
      <block wx:elif="{{hasUserInfo}}">
      <!--
        只要输入了呢称即可，不要求获取用户头像。这里隐藏头像按钮
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        -->
        <text class="userinfo-nickname">昵称: {{userInfo.nickName}}</text>
        <text class="userinfo-nickname">高级会员</text>
      </block>
    </view>
    <view class="usermotto">
          <text class="user-motto">{{motto}}</text>
    </view>
  </view>
</scroll-view>


首页逻辑：index.js

// index.js
const defaultAvatarUrl = ''

Page({
  data: {
    motto: '欢迎使用，请先获取呢称！',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    const { nickName } = this.data.userInfo
    this.setData({
      "userInfo.avatarUrl": avatarUrl,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  onInputChange(e) {
    const nickName = e.detail.value
    const { avatarUrl } = this.data.userInfo
    this.setData({
      "userInfo.nickName": nickName,
      // hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      // 只要输入了呢称即可，不要求获取用户头像
      hasUserInfo: nickName,
      motto: '鉴权通过',
    })
    // 控制台打印获取到的用户呢称
    console.log(nickName);
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    // 疑是无效代码！！
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
})


首页配置：index.json

{
  "usingComponents": {
  }
}


首页样式：index.wxss

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
    margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}


功能演示：