微信小程序回收wx.getUserProfile和wx.getUserInfo后使用“头像昵称填写”获取用户的头像和昵称

这里以uni的语法为例，小程序的自己根据api进行语法调整

<template>
    <view class="user">
        <form  @submit="getUser">
            <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image :src="defaultAvatarUrl" alt="" mode="aspectFit"></image>
            </button>
            <input type="nickname" placeholder="请输入昵称" name="nickname" id="nickname">

            <button form-type="submit">确认</button>
        </form>
    </view>
</template>

这里还会出现另一个问题，type="nickname" 通过@blur无法获取到用户昵称，这里通过表单解决了

js：

<script>

    export default {
        data() {
            return {

                //微信默认灰色头像的图片地址（未获取用户头像前默认采用灰色头像）

                defaultAvatarUrl:"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
                
            }
        },
        
        methods: {
            
            onChooseAvatar(e){//用户使用了微信头像会触发这个函数

                //将拿到的用户微信头像地址保存到页面的data
                this.defaultAvatarUrl=e.detail.avatarUrl

            },
    
            getUser(e){

               //点击确认按钮后触发表单的事件，在表单事件中通过event对象获取到用户昵称
                console.log(e.detail.value.nickname);
               
            }
        }
    }
</script>

能看懂的小朋友就到此结束了。但是有一个非常需要注意的地方就是微信开发者工具的调试基础库版本问题，如果当前版本不支持的话可以切换一下，换到低一点的版本或者高一点的版本

（开发者工具==>详情==>本地设置==>调试基础库），我将原本的2.30.2改为2.25.4测试成功的

当然除此之外另一个方式也能获取到

methods: {
            
           .........省略........
    
            getUser(e){    
          
                //方法二

                uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
                    .select("#nickname")  
                    .fields({  
                        properties: ["value"],  
                    })  
                    .exec((res) => {  
                        
                        const nickName = res?.[0]?.value  
                        console.log(res);
                        console.log('昵称', nickName)  
                    })
            }
        }

尝试失败的方式进行了一下记录：

1. 这里需要注意的是，我进行了其他尝试，比如没有使用表单获取用户昵称，在input框上使用了@blur,如下：

 <input type="nickname" placeholder="请输入昵称" name="nickname" id="nickname" @blur="getNickName">

最后发现，在通过Input输入框本身触发的事件最终都无法获取成功

2. 尝试了v-model去绑定data中的nickname，希望获取用户昵称的时候nickname中的值也随之变化，在提交的时候去通过this.nickname获取，依然无法成功

3. 还尝试了通过event对象的e.currentTarget.value 属性去获取节点的value值，也没有成功