前端微信小程序新版本实现获取头像和昵称

<template><view class="tianjiatouxiangnicheng"><view class="tianjiatouxiangnicheng_top"><!-- 2.0.19支持autoBack，默认为false --><uni-nav-bar left-icon="left" title="添加头像昵称" :statusBar="true" :border="false" @clickLeft="backBtn"color="white" backgroundColor="#D72C22" /></view>       <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><u--image width="116rpx" height="116rpx" :src="data:image"></u--image></button>       <form @submit="formSubmit"><view class="row"><view class="text1">昵称：</view><input type="nickname" v-model="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" /></view><button type="primary" class="denglubtn" form-type="submit">登录</button></form></view>
</template>

<script>export default {async onLoad(options) {//获取手机号的codethis.code = options.code;console.log(this.code);},data() {return {gerenxinxilist: [],image: "https://cdn.uviewui.com/uview/album/6.jpg",avatarUrl: "",nickname: "",openid: "",code: ''};},methods: {backBtn() {uni.navigateBack({delta: 0});},onChooseAvatar(e) {console.log(e);let that = this;console.log(e.detail.avatarUrl);var url=e.detail.avatarUrl?e.detail.avatarUrl:"https://cdn.uviewui.com/uview/album/6.jpg"wx.uploadFile({/* // 拿到临时图片路径后上传到服务器，服务器将返回一个公网地址，届时在任意角落都将能访问到这张图片 */filePath: url, //临时文件路径url: "xxxxx",name: 'file',/* //非常重要！！！！是后台访问二进制数据的关键 该 file 是对应接口，所需要传递的参数 */timeout: 5000,header: {'content-type': 'multipart/form-data',}, // header 值success: res => {that.image = ''let obj = JSON.parse(res.data)if (obj.code == 1) {let imgPath = JSON.parse(res.data).data.fullurl //将二进制转换成字符串类型console.log(imgPath);that.image = imgPath} else {this.image="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",uni.showToast({icon: 'none',title: '自定义头像请在手机端选择图片！'});}},fail: e => {this.$toast('上传失败')}})},formSubmit(e) {const URL = "XXXXX"this.nickname = e.detail.value.nicknameconsole.log(this.image);if (this.nickname == '') {uni.showToast({title: '请输入昵称',icon: 'error'})return} else if (this.image == '') {uni.showToast({title: '请选择头像',icon: 'error'})return} else {// #ifdef MP-WEIXINvar that = this;console.log("微信授权登录被点击");wx.login({//成功放回success: (res) => {console.log(res);let code = res.codewx.request({url: URL + `/get_secret`,success(res1) {let secret = res1.data.datauni.setStorageSync('secret', res1.data.data,);wx.request({//登录接口url: URL + `/oauth_user`,data: {avatar: that.image,nickname: that.nickname,jscode: code,code:that.code},success: (res) => {uni.setStorageSync('token', res.data.data.token,);},fail(err) {console.log('err', err);},complete(cp) {console.log(cp);}})},})}})// #endif}},}}
</script>

<style lang="scss">.tianjiatouxiangnicheng {.avatar-wrapper {// text-align: center;width: 116rpx;height: 116rpx;padding-left: 0;padding-right: 0;margin: 0 auto;margin-top: 198rpx;margin-bottom: 90rpx;image {width: 116rpx;height: 116rpx;}}.row {display: flex;justify-content: start;margin: 30rpx;align-items: center;border-bottom: #f5f5f5 4rpx solid;border-top: #f5f5f5 4rpx solid;.weui-input {// background-color: #f5f5f5;height: 112rpx;}}.denglubtn {margin-top: 90rpx;margin-left: 34rpx;width: 684rpx;height: 88rpx;background: #D62D24;border-radius: 120rpx 120rpx 120rpx 120rpx;opacity: 1;text-align: center;font-size: 32rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 88rpx;}}
</style>

对于新版本的使用可能会存在PC端的不兼容问题，有的PC端掉不起 onChooseAvatar这个方法，所以给用户一个默认头像，对于PC端自定义头像也会有图片大小要求

前端微信小程序新版本实现获取头像和昵称相关推荐

微信小程序最新快速获取头像和昵称方式
小程序现在升级了之前的getUserInfo无法拿到用户的头像和昵称,需要单独获取设置最近项目里面在整改今天贡献上代码代码里面头像设置 <!-- #ifdef MP-WEIXIN --&g ...
微信小程序实现登录获取头像昵称
微信小程序如何来获取用户头像昵称大家一定对下面这个图不陌生吧,我们在进入小程序之前,都会遇见类似这样的情况,那么这个是怎么用微信开发者工具实现的呢? 要求 1.首先,我们打开微信开发者工具,新建一个 ...
微信小程序最新调用用户头像以及昵称
众所周知:微信小程序开发是面对"公告"编程,小程序的api更新迭代之快,让人叫苦不堪,,, 最近开发小程序项目时,获取用户头像和昵称的方式发生了很大的改变: 它居然绑定到一个 bu ...
微信小程序授权登录获取用户名和昵称
微信授权官方文档登录流程时序: 这里我是用微信开发者工具写的前端 login.wxml代码: <view class="userinfo"><block wx: ...
微信小程序单纯展示用户头像、昵称、性别，不通过后台接口获取
open-data 用于展示微信开放的数据. 使用方法 <open-data type="groupName" open-gid="xxxxxx"> ...
uniapp微信小程序新版本获取用户的头像和昵称，手机号
新版本微信小程序通过getUserInfo获取到用户的头像是灰色,昵称显示为微信用户,这是微信版本更新了,现在需要用getUserProfile来获取用户的头像和昵称,并且只能页面产生点击事件(例如 ...
微信小程序通过数据绑定获取用户名和头像
微信小程序通过数据绑定获取用户名和密码 1.获取用户名和头像 <view>数据绑定</view> <view>数据:{{message}}</view> ...
微信小程序中如何获取用户手机号授权登录
随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务.而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一.因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录. 步骤一 ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...

前端微信小程序新版本实现获取头像和昵称

前端微信小程序新版本实现获取头像和昵称相关推荐

最新文章

热门文章