微信开发工具获取用户头像和用户昵称，实现本地和真机调试

1、新建一个person文件夹

2、person.js中写下如下获取用户头像和用户昵称代码：

Page({data: {avatarUrl:'',//用户头像nickName:''//用户昵称},getUserProfile() {//获取用户头像和用户昵称方法wx.getUserProfile({desc: '登录',success: (res) => {this.setData({nickName: res.userInfo.nickName,avatarUrl: res.userInfo.avatarUrl})}})}
})

3、person.wxml中写下如下代码：

<view class="user_info_wrap"><view wx:if="{{avatarUrl}}" class="user_img_wrap"><image class="user_bg" src="{{avatarUrl}}"></image><view class="user_info"><image class="user_icon" src="{{avatarUrl}}"></image><view class="user_name">{{nickName}}</view></view></view><view wx:else class="user_btn"><button type="primary" plain="{{true}}" bindtap="getUserProfile">登录</button></view>
</view>

4.person.wxss中写下如下代码：

page{width: 100%;height: 100%;
}
.user_info_wrap {height: 45vh;overflow: hidden;position: relative;
}
.user_info_wrap .user_img_wrap {position: relative;
}
.user_info_wrap .user_img_wrap .user_bg {height:50vh;width: 100%;
}
.user_info_wrap .user_img_wrap .user_info {position: absolute;left: 50%;transform: translateX(-50%);top: 20%;text-align: center;
}
.user_info_wrap .user_img_wrap .user_info .user_icon {width: 150rpx;height: 150rpx;border-radius: 50%;
}
.user_info_wrap .user_img_wrap .user_info .user_name {color: #fff;margin-top: 40rpx;font-size: 40rpx;padding:0rpx;
}
.user_info_wrap .user_btn {position: absolute;left: 50%;transform: translateX(-50%);top: 40%;font-size: 38rpx;padding: 30rpx;border-radius: 10rpx;
}

5、效果如下：

6、总结，本地和真机调试都可以成功

微信开发工具获取用户头像和用户昵称，实现本地和真机调试相关推荐

解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序如何本地进行真机调试？
这次记录的是真机调试是后台是本地服务器,显示未能连接到服务器的问题. 比如图片下载到本地,视频下载到本地...等等在小程序开发时我们为了方便而不去搭建域名,在本地直接localhost就可以使用 ...
企业微信_H5应用如何本地及真机调试_host配置及代理相关
文章目录一.准备工作 1. 下载SwitchHosts 2. 创建vue项目 3. 启动项目 3. 请求验证 4. 域名访问 5. Invalid Host header 二.电脑调试 2.1. 设 ...
企业微信小程序_小程序开发工具及真机调试_host配置及代理
文章目录一.开发前准备 1. 开发文档 2. 工具安装 3. 安装插件 4. 调整编译模式 5. 选择企业 6. PC 调试前端 7. PC 调试后端二.甄姬调试前端 2.1. 预览小程序 2.2 ...
微信H5移动端真机调试--vConsole
在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊.友好的微信给我们提供了这么一个入口,使开发者可以真机调试.给微信开发者点赞.然后就可以看到你打印的内容及 ...
mui hello html5 安装,HBuilder开发App Step1——环境搭建，HelloMUI 以及真机调试(示例代码)...
No1. 必须搭建java环境只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
php 只需qq 获取用户信息,免登录只需要一个QQ号就能获取QQ头像和QQ昵称获取QQ用户信息API...
//里客云资源站,likeyunba.com //BY TANKING // header header("Content-Type:application/json"); err ...
企业微信开发总结-获取通讯录
企业微信开发总结-获取通讯录最近遇到个项目需求,需要能够获取到用户企业的通讯录,同步到我们系统中,这样就不用重复输入一批企业人员了.一开始想的很简单,实际研究下来发现企业微信比个人微信对接起来复杂多 ...

微信开发工具获取用户头像和用户昵称，实现本地和真机调试

微信开发工具获取用户头像和用户昵称，实现本地和真机调试

微信开发工具获取用户头像和用户昵称，实现本地和真机调试相关推荐

最新文章

热门文章