★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app微信小程序获得用户头像与名称

 2020/12/18 14:13:25  字体:  浏览 217 我要评论


如果只是调用显示微信用户头像与用户名称,不需要其它,就用下面的代码就行。
<open-data class="l_tu" type="userAvatarUrl"></open-data>
<open-data class="l_text" type="userNickName"></open-data>




以下是可以改成不同客户端调用显示不同的信息
<template>
<view>
<view class="tx-w">
<view class="tx">
<image class="tx-img" :src="yonghuwx.avatarUrl"></image>
<view class="zx"></view>
</view>
<view class="name">{{yonghuwx.nickName}} </view>
<view class="name-qm">自然的美好的,你的</view>
</view>

</view>
</template>

<script>
export default {
data() {
return {
yonghuwx: []
}
},
onLoad(){
let that = this;
uni.login({
provider: 'weixin',
success: function(loginRes) {
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
that.yonghuwx = infoRes.userInfo
console.log(that.yonghuwx)
}
});
}
});
},
methods: {

}
}
</script>

<style>
.tx-w{margin-top:200upx;}
.tx{text-align:center;}
.tx image{width:140upx;height:140upx;border-radius:50%;}
.name{text-align:center;margin-top:20upx;}
.name-qm{text-align:center;margin-top:20upx;font-size:30upx;}
</style>









'以下是微信端登录使用
1. 首先, 微信中的wx.getUserInfo接口改了,已经不能默认弹框进行授权了,必须引导用户点击按钮自己进行授权。
2. 用户进入页面时,可以先调用uni.getUserInfo, 如果用户已授权uni.getUserInfo是可以直接获取到用户的信息的
3. 如果是第一次授权,将会进fail回调,如果进入fail回调,给用户提示去进行授权就可以了
页面加载完成时调用uni.getUserInfo


onLoad(){
   this.changeLogin();
},

methods:{
  changeLogin(){
// 授权
// 获取用户详细信息, 可以获取到说明已经授权过, 直接拿到用户信息
uni.getUserInfo({
provider: 'weixin',
//授权成功的回调
success(res) {
uni.showToast({
    title:'授权成功',
icon:'none'
})
console.info(res.data)
//that.login(res.data);//授权成功调用自己的登录方法就可以了
},
//第一次进入小程序
fail() {
uni.showToast({
title: '请点击授权进行登录',
icon: 'none'
});
}
});
  }
}


授权html代码:
<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">授权账号信息</button>



点击授权js代码:

/**
* 用户同意授权个人微信信息
* @param {Object} e 用户的信息
*/
onGotUserInfo(e) {
    console.info(e.detail)
    console.info(e.detail.userInfo);
}

相关阅读
( 2021/1/8 21:47:38 )uni-app三目运算class和style
( 2021/1/5 20:10:06 )uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
( 2021/1/5 19:50:31 )微信小程序开发中链接navigateTo与redirectTo的对比说明
( 2020/12/27 21:57:47 )使用uni-app开始小程序使用腾讯视频插件vid播放视频
( 2020/12/18 14:43:35 )微信小程序-接入广告
( 2020/12/18 14:13:25 )uni-app微信小程序获得用户头像与名称
( 2020/12/18 14:10:56 )微信公众号生成带参数的二维码asp源码下载
( 2020/12/16 22:20:58 )微信小程序转uni-app项目
共有0条关于《uni-app微信小程序获得用户头像与名称》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
微信小程序转uni-app项目
支持win7的nodejs版本
uni-app浏览历史记录功能实现
uni-app 搜索、历史记录功能简单实现
uni-app判断输入内容是否符合要求
更多>>最新添加文章
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
使用uni-app开始小程序使用腾讯视频插件vid播放视频
微信小程序-接入广告
微信公众号生成带参数的二维码asp源码下载
微信小程序转uni-app项目
下载微信小程序
更多>>随机抽取信息
非常不错的DIV+CSS做得菜单,跟JS效果一样,特别酷
asp Microsoft.XMLHTTP生成静态页延迟解决方案
CSS教程:弄懂闭合浮动元素
div+css黑色焦点图(幻灯片效果非常 不错)
一个利用radio单选选择框进行变色的网页效果
Javascript JS 限制复选框的选择个数
cookies
利用position把div放在flash上