小程序vue2和vue3获取微信头像和微信昵称的方法

Vue2中uViewUI实现选择头像与修改昵称功能的代码示例,

最新推荐文章于 2024-11-25 10:30:59 发布

原创最新推荐文章于 2024-11-25 10:30:59 发布 · 1.9k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信 #javascript #前端

文章介绍了如何在Vue2应用中使用uViewUI组件实现弹窗选择头像功能，包括通过`chooseAvatar`事件触发上传头像到服务器，以及处理上传成功后的用户资料更新。同时，文章还展示了如何在Vue3中更新昵称的步骤。

vue2

通过使用"uview-ui": "^1.8.8"版本弹窗更改，open-type="chooseAvatar"一定要写

<u-popup v-model="updateProfilePop" mode="center" border-radius="10" width="80%">
           <view class="pop">
               <view class="pop__title">基本信息</view>
               <view class="pop__bd">
                   <view class="cell-group u-p-b-30">
                       <button class="cell link" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
                           <view class="title">头像</view>
                           <view class="value">
                               <u-avatar size="60" :src="vuex_user.avatar"></u-avatar>
                           </view>
                       </button>
                       <view class="cell link" @click="openPop('updateNicknamePop')">
                           <view class="title">昵称</view>
                           <view class="value">{{ vuex_user.nickName }}</view>
                       </view>
                   </view>
               </view>
           </view>
       </u-popup>

更改头像的方法，先上传到服务器，获取在服务器的路径，之后获取到更新头像，再更新用户个人资料存到vuex

   chooseAvatar(e) {
               const avatarUrl = e.detail.avatarUrl;
               uni.uploadFile({
                   //请求的url接口地址
                   url: this.$http._config.url + '/common/upload',
                   fileType: 'image', //图片类型
                   filePath: avatarUrl, //哪张图片
                   name: 'file', //对应接口的文件名
                   success: (res) => {
                       //成功的回调
                       const fileName = JSON.parse(res.data).fileName;
                       let image = this.$http._config.url + fileName
                       this.$http.PUT('/system/user/updateUserAvatorNew', {
                           userId: uni.getStorageSync('vuex_user').userId,
                           avatar: image
                       }).then(res => {
                           uni.showToast({
                               title: '上传成功'
                           })
                           this.$http.GET('/system/user/profile').then(data => {
                               this.$u.vuex('vuex_user', data.data);
                           })
                       }).catch(res => {})
                   },
                   fail: (err) => {
                       //失败的回调
                       // console.log(err)
                   }
               })
           },

获取昵称type="nickname"

<u-popup v-model="updateNicknamePop" mode="center" border-radius="10" width="80%">
           <view class="pop">
               <view class="pop__title">修改昵称</view>
               <view class="pop__bd">
                   <view class="u-p-40">
                       <view class="u-m-b-30">
                           <input class="nicknameInput" type="nickname" v-model="nickname" @blur="changeNickname"
                               placeholder="请输入新的昵称" />
                       </view>
                       <u-button type="success" @click="submitNicknameForm">确认修改</u-button>
                   </view>

               </view>
           </view>
       </u-popup>

   changeNickname(e) {
               this.nickName = e.detail.value;
               // this.$set(this, 'personName', e.detail.value);
           },

submitNicknameForm() {
               console.log(this.nickName)
               if (this.nickName.length < 1) {
                   uni.showToast({
                       title: '请输入新昵称',
                       icon: 'none'
                   })
                   return;
               }
               this.$http.PUT('/system/user/updateUserNew', {
                   nickName: this.nickName,
                   userId: uni.getStorageSync('vuex_user').userId,
               }).then((res => {
                   this.$u.toast(res.msg);
                   this.$http.GET('/system/user/profile').then(data => {
                       this.$u.vuex('vuex_user', data.data);
                       this.updateNicknamePop = false;
                   })
               }))
           }

vue3

  const onChooseavatar = (e) => {
       console.log(e.detail);
       const avatarUrl = e.detail.avatarUrl;
       uni.uploadFile({
           //请求的url接口地址
           url: apiUrl.url + '/common/upload',
           fileType: 'image', //图片类型
           filePath: avatarUrl, //哪张图片
           name: 'file', //对应接口的文件名
           header: {
               'Authorization': 'Bearer ' + uni.getStorageSync('token')
           },
           success: (res) => {

....
           },
           fail: (err) => {
               //失败的回调
               console.log(err)
           }
       })
   }
</script>