精华内容
下载资源
问答
  • 主要介绍了微信小程序如何获取用户头像和昵称,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 小程序获取用户头像

    千次阅读 2020-05-30 22:18:38
    小程序获取用户头像 参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html open-data 用于获取用户各种信息 open-data属性 open-data基本用法 获取用户头像 <open-data ...

    小程序获取用户头像

    参考文档:
    https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
    open-data 用于获取用户各种信息

    open-data属性

    在这里插入图片描述
    在这里插入图片描述

    open-data基本用法

    获取用户头像
      <open-data type="userAvatarUrl"></open-data>
      获取用户昵称
      <open-data type="userNickName"></open-data>
      拉取群名称
    <open-data type="groupName" open-gid="xxxxxx"></open-data>
    用户性别以哪种语言展示
    <open-data type="userGender" lang="zh_CN"></open-data>
    
    展开全文
  • 获取头像昵称 {{userInfo.nickName}} {{motto}} //index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasU...

    获取头像昵称 {{userInfo.nickName}}{{motto}} //index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo //获取openid wx.login({ success: function (res) { console.log(res.code) //发送请求获取openid wx.request({ url: '你的域名/openid.php?code=code', //接口地址 data: { code: res.code }, header: { 'content-type': 'application/json' //默认值 }, success: function (res) { //返回openid console.log(res.data.openid) //向数据库注册用户,验证用户 var that = this; wx.request({ url: '你的域名/server.php?nickname=' + e.detail.userInfo.nickName + '&avatarUrl=' + e.detail.userInfo.avatarUrl + '&openid=' + res.data.openid, data: { }, header: { 'content-type': 'application/json' }, success: function (res) { //打印用户信息 console.log(res.data) } }) } }) } }) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true, }) } }) <?php //声明CODE,获取小程序传过来的CODE $code = $_GET["code"]; //配置appid $appid = "你的小程序APPID"; //配置appscret $secret = "你的小程序APPSRCRET"; //api接口 $api = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code"; //获取GET请求 function httpGet($url){ $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; } //发送 $str = httpGet($api); echo $str; ?> <?php header("Content-type:text/html;charset=utf8"); $nickname = $_GET["nickname"]; $avatarUrl = $_GET["avatarUrl"]; $openid = $_GET["openid"]; $con = mysql_connect("数据库地址","数据库账号","数据库密码"); mysql_select_db("数据库名", $con); mysql_query("INSERT INTO 表名 (nickname, avatarUrl, openid) VALUES ('$nickname', '$avatarUrl', '$openid')"); echo "注册成功!"; mysql_close($con); ?>

    展开全文
  • 智慧同城v4 微信小程序新接口获取用户信息 4月20后无法获取头像昵称等,直接替换前端小程序pages\mainPages\login 里面的文件
  • 主要介绍了微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序获取用户头像和昵称 (不用用户授权) 1.wxml <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data> 但是很多时候我们需要将头像作成圆形...

    微信小程序获取用户头像和昵称 (不用用户授权)

    1.wxml

    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userNickName"></open-data>
    

    在这里插入图片描述

    但是很多时候我们需要将头像作成圆形的 open-data 是不能作成圆角的 我们来外层套一个view来覆盖作成圆形

    我们来处理一下

    1.wxml

      <view class="headView">
        <open-data class="icon" mode="aspectFit" type="userAvatarUrl"></open-data>
        <view class='icon'></view>
      </view>
    

    2.wxss

    .headView {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50rpx;
      height: 300rpx;
      width: 750rpx;
      position: relative
    }
    
    /**
    *open-data 的头像做不了圆角
    *这里是覆盖一个镂空的view在上面 镂空view的边界做成与周围背景颜色一样 做了伪圆角
    **/
    .headView .icon {
      position: absolute;
      height: 200rpx;
      width: 200rpx;
      border-radius: 50%;
      border: 50rpx solid #F5F5F5;
    }
    

    在这里插入图片描述
    这样就可以了

    希望此文章能帮助到你

    展开全文
  • 以前 wx.getUserInfo 会弹出一个给用户的弹窗,需要用户授权, 现在需要一个点击事件来触发 wx.getUserInfo wx.getUserInfo({ success:function(res){ console.log(res); var avatarUrl = 'userInfo.avatarUrl'; ...

    以前 wx.getUserInfo 会弹出一个给用户的弹窗,需要用户授权,
    现在需要一个点击事件来触发 wx.getUserInfo

    wx.getUserInfo({
          success:function(res){
            console.log(res);
            var avatarUrl = 'userInfo.avatarUrl';
            var nickName = 'userInfo.nickName';
            this.setData({
              [avatarUrl]: res.userInfo.avatarUrl,
              [nickName]:res.userInfo.nickName,
            })
          }
        })
    

    1.只展示用户头像昵称 不做后台数据库用
    Open-data标签 可以不用用户授权直接获得头像和昵称

    <open-data type="userAvatarUrl"></open-data>    //获取用户头像直接显示在小程序中
    <open-data type="userNickName" lang="zh_CN"></open-data>    //获取用户昵称直接显示在小程序中
    
    

    2.点击 获取用户头像昵称数据

    <view>
      <button open-type='getUserInfo' lang="zh_CN" bindgetuserinfo="onGotUserInfo">用户</button>
      <text class="txtname">{{username}}</text>
      <image class="tximg" mode="widthFix" src="{{userimg}}" />
    </view>
    
    
      data: {
        username: '',
        userimg: ''
      },
      // 获取用户头像昵称城市等信息
      onGotUserInfo: function (e) {
        console.log(e);
        this.setData({
          username: e.detail.userInfo.nickName,
          userimg: e.detail.userInfo.avatarUrl
        })
      },
    
    
    展开全文
  • <open-data type="userAvatarUrl"></open-data> 小程序提供的组件,可以自己获取用户头像并显示出来:效果图如下:
  • 做一款小程序,如果需要判断用户,当然要获取一些基本信息,例如头像,昵称,openid。所以本次案例就直接上代码了。小程序前端index.wxml 获取头像昵称 {{userInfo.nickName}}{{motto}}index.js//index.js//获取应用...
  • 微信小程序获取用户openid源码(前后端).rar
  • 2、根据userInfo.avatarUrl获取用户头像图片的 URL,这个url在小程序里展示可以,但是不能保存图片。 3、通过wx.getImageInfo()方法获取图片信息 4、通过wx.uploadFile()方法上传图片到服务器 //获取图片信息 ...
  • wxml文件: wxss文件: .header { border-radius: 50%; overflow: hidden; width:200rpx; height: 200rpx; position: relative; background: pink;... }, 它可以自动获取用户的昵称和头像,并设置为圆形
  • 小程序获取用户头像和昵称

    千次阅读 2019-05-11 08:14:33
      这个获取让我纠结好一阵,小程序官方模板里面是点击一个button事件然后用户授权登录后获取...-- 获取用户的姓名和头像 --> <view> <image class="userhead" src='{{userInfo.avatarUrl}}'>&l...
  • 获取头像昵称{{userInfo.nickName}}{{motto}}//获取应用实例constapp=getApp()Page({data:{motto:'HelloWorld',userInfo:{},hasUserInfo:false,canIUse:wx.canIUse('button.open-type.getUserInfo')},onLoad:functio...
  • {{userInfo.nickName}}授权js代码实现:获取用户信息操作,并赋值给数组。exportdefault{data(){return{userInfo:[]}},onLoad(){this.changeLogin();},methods:{changeLogin(){//授权//获取用户详细信息,可以...
  • 微信小程序获取用户头像、昵称

    千次阅读 2019-12-12 09:05:23
    获取头像、昵称~
  • 微信小程序一键获取用户头像、昵称等基本信息微信小程序一键获取用户头像、昵称等基本信息需求描述功能实现1.操作流程2.目录结构3.关键代码4.效果演示 微信小程序一键获取用户头像、昵称等基本信息 系统:Win10 ...
  • 微信小程序获取用户头像和昵称

    万次阅读 2018-01-27 20:51:00
    代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var app = getApp Page({ /** * 页面的初始数据 */ ... //用户个人信息 ... avatarUrl:"",//用户头像 nickNa
  • 微信小程序-获取用户昵称和头像信息
  • 一、利用标签显示头像和用户名(用于展示微信开放的数据)此方法不需要用户授权即可获取的到,但是由于是在标签中的,所以js是无法获取到值的。用于简单的显示。userGender为获取性别,lang的“zh_CN”为中文显示,...
  • 使用getUserProfile接口获取用户信息 通过点击按钮触发事件,让用户在弹窗授权。 <u-button @click="getUserInfo">获取头像</u-button> 调用getUserProfile获取nickName和avatarUrl。 async ...
  • 小程序登录获取用户头像和昵称

    千次阅读 2020-06-18 19:12:16
    获取用户信息 这个是点击登录按钮获取用户信息 <image src="{{userInfo.avatarUrl}}"></image> <view wx:if="{{userInfo.openid}}"> {{userInfo.nickName}} </view> <button wx:...
  • 获取用户信息(头像和昵称) 获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。 没有授权不能直接调用 wx.getUserProfile...
  • 主要介绍了Thinkphp5微信小程序获取用户信息接口的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 主要介绍了微信小程序实现获取用户信息并存入数据库操作,涉及微信小程序wx.request后台数据交互及php数据存储相关操作技巧,需要的朋友可以参考下
  • 小程序获取用户头像等用户信息

    千次阅读 2018-02-01 17:34:33
    点击打开链接
  • 微信小程序 获取用户昵称、头像

    千次阅读 2020-07-29 14:54:04
    前段时间微信小程序获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下,首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,096
精华内容 6,838
关键字:

小程序获取用户头像

友情链接: piris.rar