2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法-Toy模板网

这篇具有很好参考价值的文章主要介绍了2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大家好，下面是我身为小白分享给小白哈，
不懂就问相互学习共同进步！
亲测自用原生代码，感谢大神指点赐教鼓励勿喷；

只需9个一键复制粘贴步骤一气呵成；
先来本文最终主要实现效果：

获取微信小程序用户头像昵称的填写能力和方法原生写法

一：先捋一捋思路逻辑：
1：获取之前有个环节是wx.checkSession先自动判断缓存里
有没用户之前的信息session_key有没过期，
没有或者过期就执行下一步；

2：用获取用户返回的code,
然后配合服务器后端wx.request获取返回用户openid,（后端写法可以关注找我要）；

3：返回有了openid即用户唯一标识可以定义全局和存缓存后续更新用户相关信息用

4：编辑个人中心页面和跳转用户信息获取授权页

二：开码：
1.先在小程序文件包目录中新建image文件夹，
然后将下面的图片命名为avatarUrl作为默认头像放进/image文件夹中初始化备用，
图片链接：https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0
2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法

2.在app.js页中一键复制下面代码粘贴：

App({
  data: {
  },
  userInfo:{
    nickName:'',
    avatarUrl:''
  },
  globalData:{
    openid:''
  },
  onLaunch: function () {
    let userInfo = wx.getStorageSync('userInfo');
      if (!userInfo){
        wx.setStorage({
          key:'userInfo',
            data:{avatarUrl:'/image/avatarUrl.png'
            }
        })
      }
  wx.checkSession({
    fail () {
      wx.login({
        success: (res) => {
        const {code} = res.code
        wx.setStorageSync('code', res.code)
          console.log("获取并缓存code:", res.code)
            if (res) { 
              wx.request({
                url: '你的服务器API地址',
                method: 'POST',
                data: { code: res.code },
                header:{'content-Type': 'application/x-www-form-urlencoded;charset=utf-8',},
                  success:res=> {              
                    console.log("后端:openid:", res.data) 
                    let openid = res.data
                    const app = getApp()
                    getApp().globalData.openid = openid                                        
                    console.log('缓存openid:',app.globalData.openid)           
                    wx.setStorageSync('openid', res.data)                                             
                  }
              })
            } else {
              console.log('登录失败！' + res.errMsg)
            }
        }
      })
        console.log("session_key 已经失效，重新登陆获取流程")
      }
  })
 }
})

3.在page页面里新建文件夹mine再对着mine文件夹新建page，定义名字就写mine后会自动生成四个文件
有了mine.js页面并在里边一键复制粘贴进去下面代码：

const app = getApp()
Page({
  data: {
    userInfo:{
      nickName:'',
      avatarUrl:''
    }
  },
  onShow() {                   
            this.setData({ 
              nickName:wx.getStorageSync('nickName'), 
              userInfo:wx.getStorageSync('userInfo'),
              mobile:wx.getStorageSync('mobile')
             })        
  }, 
})

4：在mine.wxml页面一键复制粘贴进去下面代码：

    <button bind:chooseavatar="onChooseAvatar">
      <navigator url="/pages/login/login" open-type="navigate">
        <image class="avatar" src="{{userInfo.avatarUrl}}"> </image>
      </navigator>
    </button>
    <view wx:if="{{!nickName}}" class="login-text">点击授权登录</view>
    <block wx:else>
      <view class="login-text">{{nickName}}</view>
    </block>

5：在mine.wxss页面一键复制粘贴进去下面代码：

.avatar {
  width: 160rpx;
	height: 160rpx;
  border: 1rpx solid #ffffff;
  border-radius: 50%;
  margin-top: 1rpx;
}
.txan[plain] {
  border: none;
  border-color: transparent;
}
.login-text {
	font-size: 35rpx;
	display: flex;
	align-items: center;
	/*垂直居中 */
	justify-content: center;
  }

6.page页面里新建文件夹login(再对着login文件夹右键新建page,定义名字就写login后会自动生成四个文件)，
然后一键复制粘贴进去下面代码到login.js页:

const app = getApp();
Page({
  data: {
    userInfo:{
      avatarUrl:''
    }
  },
  onShow() {
    this.setData({ 
      userInfo:wx.getStorageSync('userInfo'),
    }) 
  },
                
onChooseAvatar: function (res) {

  const { userInfo } = res.detail.avatarUrl
  this.setData({userInfo:res.detail})
    app.userInfo.avatarUrl = res.detail.avatarUrl
    wx.setStorageSync('userInfo', res.detail)
    console.log( "缓存头像临时Url:",wx.getStorageSync('userInfo'))
    var filePath = getApp().userInfo.avatarUrl
    console.log('头像路径filePath:',filePath)
    var fileName = Math.random().toString(36).substr(2);
    console.log('头像图片文件名fileName:',fileName)            
},
  bindKeyInput: function (e) { 
},

fromsubmit (e) {
  const nickName = e.detail.value;
  this.setData({nickName: e.detail.value,})
  console.log("nickName:",nickName)
  wx.setStorageSync('nickName', e.detail.value)
  console.log( "名字有了放缓存:",wx.getStorageSync('nickName'))
},

setBtnTap() {
      const {userInfo} = this.data
      if([userInfo.avatarUrl] == '/image/avatarUrl.png') {
        wx.showToast({
          title: '头像不能为空',
          icon: 'none'
        })
      return
      }
      const {nickName} = this.data
      if(!nickName) {
        wx.showToast({
          title: '昵称不能为空',
          icon: 'none'
        })
      return
      }   
       wx.navigateBack({
       url: 'B?id=1'
      })
  },
})

7:一键复制粘贴进去下面代码到login.wxml页:

  <button class="avatar-wrapper bg-gradual-blue shadow-blur"
  open-type="chooseAvatar" bindchooseavatar="onChooseAvatar" style="width: 268rpx; height: 233rpx; display: block; box-sizing: border-box; left: 0rpx; top: -3rpx; position: relative">
  <image class="avatar" src="{{userInfo.avatarUrl}}" style="position: relative; left: 0rpx; top: 17rpx"> </image>
  <text class="position" style="width: 176rpx; height: 47rpx; display: flex; box-sizing: border-box">同步头像</text>
  </button>
  
  <view>
  <form bindsubmit="fromsubmit"> 
  <input style="width: 486rpx; height: 64rpx; display: block; box-sizing: border-box" type="nickname" 
  name="nickName"
  class="nickname-input" 
  placeholder="点击使用微信昵称" 
  bindinput="fromsubmit"
  bindKeyInput="bindKeyInput"
  input value="{{nickName}}"

  /></form>
  </view>
  
 
  <button class="bc lg user-confirm-btn user-confirm-btn--{{canSaveUser?'enabled':'disabled'}}" 
  form-type="submit"
  catchtap="setBtnTap"
  type="primary">保存</button>

8:一键复制粘贴进去下面代码到login.wxss页:

.avatar-wrapper {
  width: 10rpx;
  height: 250rpx;
  margin-top: 0rpx;
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  margin-top: 30rpx;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border: 1rpx solid #ffffff;
  border-radius: 50%;
}

.nickname-input {
  margin-bottom: 72rpx;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  font-size: 38rpx;
  font-weight: 400;
  color: #6164f8;
  text-align: center;
  /* 实线边框solid */
  border-style: solid;
  /* 圆角弧度radius */
  border-radius: 25px;
  /* 边框大小设置 */
  border-width: 1px;
  /* 输入框长度设置 */
  width: 220px;
}

9.app.json页全选粘贴下面这段：

{
    "pages": [
        "pages/mine/mine",
        "pages/index/index",
        "pages/login/login"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

OK , 搞定！

点击编译测试一下吧！
点击头像进去获取一下头像和昵称，
用户openid的话要对接好后端配合才能获取，要需要的朋友评论留言一下，
样式想弄漂亮就要慢慢去美化啦！多多赐教共同进步哈！
希望能点个关注支持一下，陆续会发其它文章资源出来保持交流相互学习！文章来源地址https://www.toymoban.com/news/detail-482383.html

到了这里，关于2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！