微信小程序获取头像昵称 保存头像到服务器

这篇具有很好参考价值的文章主要介绍了微信小程序获取头像昵称 保存头像到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信官方推荐的替代做法:

头像昵称填写 | 微信开放文档 (qq.com)

 wxml

<button class="avatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

js

// pages/my/my.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        avatarUrl: defaultAvatarUrl,
    },
    onChooseAvatar(e) {
        const {
            avatarUrl
        } = e.detail
        this.setData({
            avatarUrl,
        })
        //  将头像上传到服务器
        wx.uploadFile({
            filePath: avatarUrl,
            header: {'content-type': 'multipart/form-data'},
            name: 'avatarImg',
            url: 'xxxxxxx', //服务器端接收图片的路径
            success: function (res) {
                console.log(res); //发送成功回调
            },
            fail: function (res) {
                console.log(res); //发送失败回调,可以在这里了解失败原因
            }
        })
    },
    onLoad: function (n) {

    },
    onShow: function () {
        wx.login({
            success(res) {
                if (res.code) {
                    //发起网络请求
                    console.log('登录' + res.code)
                } else {
                    console.log('登录失败!' + res.errMsg)
                }
            }
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
})

wxss文章来源地址https://www.toymoban.com/news/detail-572933.html

.avatar{
    width: 80px;
    height: 80px;
    padding:0;
    background: none;
}
.avatar image{
    width: 80px;
    height: 80px;
    border-radius: 100px;
}
.weui-input{
    width: 90%;
    height: 60px;
    margin:20px auto;
    background: #eee;
    border-radius: 5px;
    padding-left: 15px;
}

到了这里,关于微信小程序获取头像昵称 保存头像到服务器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 修复微信小程序不能获取头像和昵称的bug,微信小程序新版头像昵称API使用

    大厂程序员都是有KPI绩效考核的,所以他们不能闲着,每天要想着怎么优化程序代码、怎么满足奇葩用户的需求,所以苦逼了我们这些小公司程序员,微信一个小小的API接口改动,可能就让一个小公司因此损失惨重,甚至直接面临倒闭。鹅厂可不管你这些小公司的死活,毕竟

    2024年02月11日
    浏览(51)
  • 微信小程序获取用户头像昵称

    微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码、搜索等方式进入小程序并使用。在小程序中,获取用户昵称和头像是非常常见的需求,因为这些信息可以用来个性化展示内容,提高用户体验。以下是获取用户头像昵称的传统方法: 在小程序中,可以通

    2024年02月07日
    浏览(48)
  • 关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式

    小程序用户头像昵称获取规则调整公告:小程序用户头像昵称获取规则调整公告 | 微信开放社区   点击登录按钮,先去检查用户授权信息,会弹出用户授权弹窗(首次),用户点击同意授权之后,调用 wx.login 方法获取登录凭证(code),把code传给后端写的登录接口进行解析登

    2024年02月05日
    浏览(47)
  • 微信小程序最新获取头像昵称方式

      前言 版本历史变迁 一、获取头像的正确姿势 二、获取昵称的正确姿势 总结 产品需要获取微信用户的昵称和头像。 这这还不简单,so easy! 通过 wx.getUserProfile 或者  wx.getUserInfo  就可以获取到。 但是获取的昵称是”微信用户“获取的头像是灰色的头像。 如果你也是上面这

    2024年02月13日
    浏览(29)
  • 微信小程序如何获取用户头像昵称

        微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息,按照官方推荐会显示用户在微信的头像和昵称,本文介绍一下实现方案.最终实现效果:修改头像会默认显示微信头像,修改昵称时会默认显示

    2024年02月11日
    浏览(51)
  • 微信小程序获取用户信息(getUserProfile接口回收后)——通过头像昵称填写获取用户头像和昵称

    背景:最近在用uniapp写微信小程序授权登录的时候,发现项目在微信开发者工具中调试是正常的,但是在真机运行时,返回的用户数据中昵称变成了微信用户,头像变成了默认的灰底头像。接着去百度了一下发现出现这个问题的原因是getUserProfile接口被回收了,微信小程序基

    2024年02月11日
    浏览(48)
  • 关于微信小程序获取头像和昵称

    不知道为什么微信一直对开发者获取:微信头像+微信昵称。一直抱以限制态度,关于接口调用方法,也是一直在修改! open-type=“getUserInfo” 在2021年4月13日停用 wx.getUserInfo 在2021年4月28日停用 wx.getUserProfile 在2022年11月8日停用 但是如果你在接口 停用前 发布的,还可以正常使

    2023年04月08日
    浏览(39)
  • 微信小程序:获取用户信息(昵称和头像)

    微信小程序获取用户信息的接口几经变更,建议直接使用方式四: wx.getUserProfile 获取 组件功能调整为优化用户体验,平台将于2022年2月21日24时起回收通过展示个人信息的能力。 如有使用该技术服务,请开发者及时对小程序进行调整,避免影响服务流程。查看详情: https://de

    2023年04月08日
    浏览(39)
  • 微信小程序如何获取微信昵称和头像

    之前是使用open-data获取微信昵称和头像,但是更新之后,小程序不再支持使用该方法 现在需要用 wx.getUserProfile 这个API获取用户信息。页面产生点击事件(如  button  上  bindtap  的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回  userInfo 。该接口用于替换

    2024年02月11日
    浏览(33)
  • uniapp 微信小程序 获取用户头像和昵称

    自2022年10月25日后,小程序  wx.getUserProfile 接口  被收回,通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。如需获取用户头像昵称,可以手动获取,具体步骤👉「头像昵称填写能力」  ✍GitHub完整代码地址👉: https://github.com/c

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包