精华内容
下载资源
问答
  • 小程序获取头像昵称

    千次阅读 2019-05-07 17:56:33
    小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备和应用技能。 参考文档:...

    小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备和应用技能。

    参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

    以下是原公告:

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。

    开发者可使用以下方式获取或展示用户信息:

    一、小程序

    1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

    详情参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

    2、使用 open-data 展示用户基本信息。

    详情参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

    新的方法的使用

    wxml:

    <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" >授权登录</button>
    

    js:

    Page({
      data: {},
      bindGetUserInfo: function(e) {
        var that = this;
        //此处授权得到userInfo
        console.log(e.detail.userInfo);
        //接下来写业务代码
    
        //最后,记得返回刚才的页面
        wx.navigateBack({
          delta: 1
        })
      }
    })
    

    效果如图所示:控制台之中打印出昵称,微信头像等个人信息。

    再来一波demo示范一下

    wxml:

    <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
    

    js:

    var pageObject = {
      data: {
      
      },
      
      onGotUserInfo: function (e) {
        console.log(e.detail.errMsg)
        console.log(e.detail.userInfo)
        console.log(e.detail.rawData)
      },
    }
    
    Page(pageObject)
    

    效果如下:控制台之中打印出昵称,微信头像等个人信息。

    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1
    欢迎关注【编程微刊】,回复“领取资源”,500G编程学习资源干货免费送。 

    展开全文
  • 主要介绍了微信小程序如何获取用户头像昵称,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • ]) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function (res) { // console.log(res.userInfo) that.info(res.userInfo) } }) } } }) }, // 处理获取的头像信息 info: ...

    1


    <view class='my_head'>      <!-- <image class='my_head_img' src='/image/head.png'></image> -->      <image class='my_head_img' src='{{user_img}}'></image>    </view>    <view class='my_head_name'>      {{user_name}}    </view>复制代码

    2


    Page({
      /**   * 页面的初始数据   */  data: {    canIUse: wx.canIUse('button.open-type.getUserInfo'),    'user_name': "",    'user_img': "",  },
      /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    var that = this;    // 查看是否授权    wx.getSetting({      success: function(res) {        if (res.authSetting['scope.userInfo']) {          // 已经授权,可以直接调用 getUserInfo 获取头像昵称          wx.getUserInfo({            success: function(res) {              // console.log(res.userInfo)              that.info(res.userInfo)            }          })        }      }    })  },
      // 处理获取的头像信息  info: function (res) {    console.log(res)    this.setData({      user_name: res.nickName,      user_img: res.avatarUrl,    })  },})复制代码


    展开全文
  • 微信小程序-获取用户昵称头像信息

    getUserInfo.js

    Page({
      data: {
        userInfo: {},
        hasUserInfo: false,
        canIUseGetUserProfile: false,
      },
      onLoad() {
        if (wx.getUserProfile) {
          this.setData({
            canIUseGetUserProfile: true
          })
        }
      },
      getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
      
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
          success: (res) => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
            console.log(res.userInfo)
          }
        })
    
      },
      getUserInfo(e) {
    
        // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
        console.log(e.detail.userInfo)
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true,
         
        })
      
        
      },
    })
    

    getUserInfo.wxml

    <view class="container">
      <view class="userinfo">
        <block wx:if="{{!hasUserInfo}}">
          <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
          <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称1 </button>
        </block>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
    </view>
    

    getUserInfo以后不弹窗用getUserProfile替代

    贴上小程序官方文档

    wx.getUserProfile(Object object) | 微信开放文档

    展开全文
  • 智慧同城v4 微信小程序新接口获取用户信息 4月20后无法获取头像昵称等,直接替换前端小程序pages\mainPages\login 里面的文件
  • 微信小程序获取用户头像昵称

    千次阅读 2019-12-12 09:05:23
    获取头像昵称~

    博客概要

         针对使用微信小程序时获取用户头像、昵称的三种方法,做一个简单分享~

    1.wx.getUserInfo接口

         传统效果是会出现“授权弹窗”,需要用户手动确认。目前,此接口已有调整,使用该接口将不再出现授权弹窗,请使用方法2(如下)引导用户主动进行授权操作

    示例场景:

    1. 用户未授权,调用该接口将直接报错
    2. 用户已授权,可使用该接口正常获取用户信息

    2.button触发

         不出现“授权弹窗”,但需要button做引导,来得会没有弹窗突兀…

    示例代码:

    <!--wxml-->
    	<block wx:if="{{hasUserInfo === true}}">
    		<image src="{{userInfo.avatarUrl}}"></image>
    		<text>{{userInfo.nickName}}</text>
    	</block>
    	<button 
    		open-type="getUserInfo" 
    		bindgetuserinfo="getUserInfo"
    	>
    		授权登录
    	</button>
    
    //js
    Page({
      data: {
        hasUserInfo: false
      },
      getUserInfo(info) {
        const userInfo = info.detail.userInfo
        this.setData({
          userInfo,
          hasUserInfo: true
        })
      },
    })
    

    运行结果:

         样式自行填充= =

    元素说明:

    属性说明
    open-type微信开放能力
    bindgetuserinfo用户点击该按钮时,会返回获取到的用户信息
    回调的detail数据与wx.getUserInfo返回的一致
    open-type="getUserInfo"时有效

    open-type合法值

    说明
    getUserInfo获取用户信息
    可以从bindgetuserinfo回调中获取到用户信息
    contact打开客服会话
    如果用户在会话中点击消息卡片后返回小程序
    可以从 bindcontact 回调中获得具体信息
    share触发用户转发
    getPhoneNumber获取用户手机号
    可以从bindgetphonenumber回调中获取到用户信息
    launchApp打开APP,可以通过app-parameter属性设定向APP传的参数
    openSetting打开授权设置页
    feedback打开“意见反馈”页面
    用户可提交反馈内容并上传日志
    开发者可以登录小程序管理后台后
    进入左侧菜单“客服反馈”页面获取到反馈内容

    3.open-data标签

         使用open-data可以不用用户授直接获取,用于展示微信开放的用户数据,所以如果你仅仅只是想展示用户信息的话,就,用它!用它!用它!= =毕竟代码少…

    示例代码:

    <!--wxml-->
    	<!-- 获取头像 -->
    	<open-data type="userAvatarUrl"></open-data>
    	<!-- 获取昵称 -->
    	<open-data type="userNickName" lang="zh_CN"></open-data>
    

    元素说明:

    属性说明
    type开放数据类型
    lang当type="user"时生效,以哪种语言展示userInfo

    type合法值

    说明
    userNickName用户昵称
    userAvatarUrl用户头像
    userGender用户性别
    userCity用户所在城市
    userProvince用户所在省份
    userCountry用户所在国家
    userLanguage用户的语言
    groupName拉取群名称

    lang合法值

    说明
    en英文
    zh_CN简体中文
    zh_TW繁体中文

    总结

         具体场景需要具体考虑使用不同的方法,以上仅分享了基础的获取途径,涉及openid、用户信息API等进一步有需要的…自个儿研究去= =prprpr

    展开全文
  • 微信小程序 获取用户昵称头像

    千次阅读 2020-07-29 14:54:04
    前段时间微信小程序获取用户昵称头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下,首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....
  • 微信小程序一键获取用户头像昵称等基本信息微信小程序一键获取用户头像昵称等基本信息需求描述功能实现1.操作流程2.目录结构3.关键代码4.效果演示 微信小程序一键获取用户头像昵称等基本信息 系统:Win10 ...
  • 主要介绍了Thinkphp5微信小程序获取用户信息接口的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 微信小程序系列一:获取头像昵称

    千次阅读 2018-08-16 14:47:03
    wx.getUserInfo(OBJECT)该方法经过官方改版后已不支持主动调用,要获取头像昵称等用户信息,需要用户主动授权。现在获取用户头像昵称等信息的方法如下: 1.通过button触发  &lt;button open-type="...
  • 如果只需要展示用户头像和昵称,不获取头像地址和昵称字符串的话。可以直接用<open-data /> <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-...
  • 通过点击获取头像昵称按钮获取用户信息 2.页面创建 1.全局三个文件,分别是app.js app.json app.wxss(名称不可更改) 2.创建Pages目录文件(作用是用来放各个页面的) 3.创建页面{给页面起名字,并且创建4个...
  • //判断是否授权过登录 wx.getSetting({ //成功 success: function (res) { //判断是否是获取昵称 头像的权限 ...小程序获取登录用户的昵称头像 html <button class="wxBtn" style="background-image:url({
  • 小程序授权获取头像昵称登录 <view class="page_wrap"> <view class="logo"> <image src="../../images/logo.png"></image> </view> <view class="button"> <button ...
  • 前段时间微信小程序获取用户昵称头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下 首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....
  • 获取用户信息(头像昵称获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。 没有授权不能直接调用 wx.getUserProfile...
  • 登录获取用户头像昵称 代码 app.js App({ globalData: { userInfo: null }, onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx....
  • 微信小程序实现登录获取头像昵称

    千次阅读 2020-04-21 00:17:39
    微信小程序获取用户头像昵称 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作...
  • 主要介绍了微信小程序wx.getUserInfo授权获取用户信息(头像昵称)的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 2、根据用户授权获取微信头像昵称等信息 <AtButton circle type='secondary' onClick={() => this.handleGetUserProfile()}>微信快捷注册</AtButton> // 通过getUserProfile获取微信用户信息 ...
  • 小程序获取用户头像昵称

    千次阅读 2019-05-11 08:14:33
      这个获取让我纠结好一阵,小程序官方模板里面是点击一个button事件然后用户授权登录后获取的,我想要的效果是没有那个button获取。   后来查到一个方法: wxml代码: <!-- 获取用户的姓名和头像 --> &...
  • <open-data type="userAvatarUrl"></open-data> //头像 <open-data type="userNickName"></open-data> //昵称 open-data文档
  • 新版本微信小程序通过getUserInfo获取到用户的头像是灰色,昵称显示为微信用户,这是微信版本更新了,现在需要用getUserProfile来获取用户的头像昵称,并且只能页面产生点击事件(例如 button 上 bindtap 的回调中...
  • 现在很多小程序因为要收集用户信息多种让用户授权才能拿到用户信息,手机号不多说,必须要用户触发允许才可以,用户的基本信息咱们就可以直接拿来去显示。 利用open-data 上图即可,可以看着用。 ...
  • 建议利用getUserProfile来获取头像昵称,需要绑定点击事件 wxml <view class="userInfo" bindtap="getUserProfile"> <view class="avatarInfo"> <image class="avatar" src="{{avatarUrl}}">&...
  • 获取头像昵称 {{userInfo.nickName}} {{motto}} //index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasU...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,770
精华内容 2,308
关键字:

小程序获取头像昵称