<template>
<view>
<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一鍵登錄</button>
<view>
<!-- 提示窗示例 -->
<u-popup :show="show" background-color="#fff">
<view class="infoBox">
<view class="title">邀請您補(bǔ)全個人信息</view>
<br>
<br>
<br>
<form catchsubmit="getUserName">
<view style="width: 100%;">
<view class="popup-info">
<view class="popup-info-left">頭像</view>
<view class="popup-info-right">
<button class="avatar-wrapper" open-type="chooseAvatar"
@chooseavatar="onChooseAvatar" slot="right">
<img class="avater" :src="avatarUrl" alt="用戶頭像"></button>
</view>
</view>
<br>
<br>
<view class="popup-info">
<view class="popup-info-left">昵稱</view>
<view class="popup-info-right">
<input type="nickname" class="nickName-input" @blur="userNameInput"
placeholder="請輸入昵稱" />
</view>
</view>
</view>
<view class="buttonSum">
<view class="button">
<button @click="dialogClose">取消</button>
</view>
<view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;">
<button @click="submitSure" style="color: #0081ff;" form-type="submit">確定</button>
</view>
</view>
</form>
</view>
</u-popup>
</view>
<view class="text-center margin-top-sm" @tap="back">暫不登錄</view>
</view>
</view>
</template>
<script>
import avatarUrl from "@/static/logo.png"
export default {
data() {
return {
avatarUrl: avatarUrl,
nickName: '',
token: '',
imgList: [],
show: false,
}
},
methods: {
back() {
uni.navigateBack({
delta: 1,
})
},
wxGetUserInfo(e) {
// 1、授權(quán)必須要在用戶點擊事件之后進(jìn)行
// 2、uni老的方法getUserInfo已經(jīng)拿不到用戶信息了
// uni.getUserProfile高版本的也停用了，2.21以下的版本還可以用
// #ifdef MP-WEIXIN
uni.getUserProfile({
desc: 'get_name', // 這個參數(shù)是必須的
success: user => {
console.log('用戶信息', user)
uni.setStorageSync("user_info", user.userInfo)
//由于低版本需要使用getUserProfile方法，高版本使用頭像昵稱填寫功能，所以先使用getUserProfile，如果得到的nickName是微信用戶，則說明獲取失敗，再使用頭像昵稱填寫功能獲取
if (user.userInfo.nickName == '微信用戶') {
this.show = true
} else {
uni.navigateBack({
delta: 1
})
}
}
})
// #endif
// #ifdef MP-ALIPAY
// uni.getUserInfo({
// desc: 'get_name', // 這個參數(shù)是必須的
// success: user => {
// console.log(user)
// uni.setStorageSync("user_info", user.userInfo)
// // 虛假的openid
// getApp().globalData.openId = user.ariverRpcTraceId;
// uni.navigateBack({
// delta: 1
// })
// }
// })
// #endif
},
// 點擊頭像
async onChooseAvatar(e) {
// 獲取到的圖片是臨時圖片，只能在本地訪問，不能在瀏覽器訪問，所以要把這個圖片轉(zhuǎn)成base64或者上傳七牛服務(wù)器換成網(wǎng)絡(luò)地址，再存儲起來
this.avatarUrl = e.detail.avatarUrl;
console.log(e.detail.avatarUrl, 'e.detail.avatarUrl'),
// 臨時圖片轉(zhuǎn)為base64
uni.getImageInfo({
src: this.avatarUrl,
success: function(res) {
// 獲取到圖片的臨時地址
var tempFilePath = res.path;
// 將圖片轉(zhuǎn)為base64格式
uni.getFileSystemManager().readFile({
filePath: tempFilePath,
encoding: 'base64',
success: function(res) {
var base64Img = 'data:image/png;base64,' + res.data;
let userInfo = uni.getStorageSync("user_info")
userInfo.avatarUrl = base64Img
uni.setStorageSync("user_info", userInfo)
}
});
}
});
},
// 點擊昵稱
userNameInput(e) {
console.log(e.detail);
this.nickName = e.detail.value
let userInfo = uni.getStorageSync("user_info")
userInfo.nickName = e.detail.value
uni.setStorageSync("user_info", userInfo)
console.log('點昵稱', this.nickName, e.detail.value, uni.getStorageSync("user_info"));
},
getUserName(e) {
console.log('提交getUserName', e);
},
submitSure(e) {
console.log('確定submitSure', e);
},
dialogClose(e) {
console.log('dialogClose取消', e);
this.show = false
}
},
onLoad() {
// this.show = true
},
}
</script>
<style lang="scss" scoped>
.cu-btn {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.infoBox {
width: 80vw;
height: 180px;
position: relative;
.title {
font-size: 18px;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
font-weight: 500;
}
.popup-info {
width: 100%;
height: 40px;
display: flex;
justify-content: space-around;
line-height: 40px;
.popup-info-left {
text-align: center;
width: 50%;
}
.popup-info-right {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
button::after {
border: none;
}
.nickName-input {
display: inline-block;
width: 100%;
top: -5px;
}
.avatar-wrapper {
border: none !important;
width: 40px;
height: 40px;
padding: 0 !important;
background: none;
.avater {
width: 40px;
height: 40px;
}
}
}
}
.buttonSum {
width: 100%;
display: flex;
justify-content: space-around;
position: absolute;
bottom: 0;
.button {
width: 50%;
border-top: 1px solid #e2e1e1;
}
button {
width: 50%;
background-color: #ffffff;
font-size: 16px;
outline: none;
}
button::after {
border: none;
border-radius: 0;
}
}
}
.u-popup__wrapper {
border-radius: 10px;
}
</style>
</style>?效果
?
?參考的這個
?微信小程序頭像昵稱填寫能力-CSDN博客
因為之前用的getUserProfile，有一天發(fā)現(xiàn)它獲取到的頭像是灰色，昵稱是微信用戶，一看官網(wǎng)說是不用了，低版本的還能用，高版本的要用頭像昵稱填寫來實現(xiàn)。
如下是我的小程序登錄頁面代碼：
邏輯：當(dāng)小程序判斷到?jīng)]有登陸時把用戶彈到登錄頁面，引導(dǎo)用戶登錄，用戶點擊一鍵登錄后彈出彈框引導(dǎo)用戶填寫昵稱和頭像，將信息存儲起來，方便在其他地方使用。
注意：
1、頭像獲取到的是臨時地址，需要處理，才能在瀏覽器展示，我采用的是將其轉(zhuǎn)化為base64的方式，具體請看：onChooseAvatar文章來源：http://www.zghlxwxcb.cn/news/detail-805127.html
2、昵稱獲取需要使用button的form-type="submit"屬性，觸發(fā)form提交來收集昵稱
?文章來源地址http://www.zghlxwxcb.cn/news/detail-805127.html
<template>
<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一鍵登錄</button>
<view>
<!-- 提示窗示例 -->
<uni-popup ref="alertDialog" background-color="#fff">
<view class="infoBox">
<view class="title">邀請您補(bǔ)全個人信息</view>
<br>
<br>
<br>
<form catchsubmit="getUserName">
<view style="width: 100%;">
<view class="popup-info">
<view class="popup-info-left">頭像</view>
<view class="popup-info-right">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
<img class="avater" :src="avatarUrl" alt="用戶頭像"></button>
</view>
</view>
<br>
<br>
<view class="popup-info">
<view class="popup-info-left">昵稱</view>
<view class="popup-info-right">
<input type="nickname" class="nickName-input" @blur="userNameInput" placeholder="請輸入昵稱" />
</view>
</view>
</view>
<view class="buttonSum">
<view class="button">
<button @click="dialogClose">取消</button>
</view>
<view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;">
<button @click="submitSure" style="color: #0081ff;" form-type="submit">確定</button>
</view>
</view>
</form>
</view>
</uni-popup>
</view>
<view class="text-center margin-top-sm" @tap="back">暫不登錄</view>
</view>
</template>
<script src="path/to/canvas/library.js"></script>
<script>
import qiniuUploader from '../../util/qiniuUploader.js'
import {
RequestConstant
} from '../../util/constant.js'
export default {
data() {
return {
avatarUrl: '../../static/icon-avatar.png',
nickName: '',
token: '',
imgList: []
}
},
methods: {
back() {
uni.navigateBack({
delta: 1,
})
},
wxGetUserInfo(e) {
// 1、授權(quán)必須要在用戶點擊事件之后進(jìn)行
// 2、uni老的方法getUserInfo已經(jīng)拿不到用戶信息了
// uni.getUserProfile高版本的也停用了，2.21以下的版本還可以用
// #ifdef MP-WEIXIN
uni.getUserProfile({
desc: 'get_name', // 這個參數(shù)是必須的
success: user => {
console.log('用戶信息', user)
uni.setStorageSync("user_info", user.userInfo)
//由于低版本需要使用getUserProfile方法，高版本使用頭像昵稱填寫功能，所以先使用getUserProfile，如果得到的nickName是微信用戶，則說明獲取失敗，再使用頭像昵稱填寫功能獲取
if (user.userInfo.nickName == '微信用戶') {
this.$refs.alertDialog.open()
} else {
uni.navigateBack({
delta: 1
})
}
}
})
// #endif
// #ifdef MP-ALIPAY
uni.getUserInfo({
desc: 'get_name', // 這個參數(shù)是必須的
success: user => {
console.log(user)
uni.setStorageSync("user_info", user.userInfo)
// 虛假的openid
getApp().globalData.openId = user.ariverRpcTraceId;
uni.navigateBack({
delta: 1
})
}
})
// #endif
},
// 打開彈框
dialogToggle() {
this.$refs.alertDialog.open()
},
// 點擊頭像
async onChooseAvatar(e) {
// 獲取到的圖片是臨時圖片，只能在本地訪問，不能在瀏覽器訪問，所以要把這個圖片轉(zhuǎn)成base64或者上傳七牛服務(wù)器換成網(wǎng)絡(luò)地址，再存儲起來
this.avatarUrl = e.detail.avatarUrl;
console.log(e.detail.avatarUrl,'e.detail.avatarUrl'),
// 臨時圖片轉(zhuǎn)為base64
uni.getImageInfo({
src: this.avatarUrl,
success: function(res) {
// 獲取到圖片的臨時地址
var tempFilePath = res.path;
// 將圖片轉(zhuǎn)為base64格式
uni.getFileSystemManager().readFile({
filePath: tempFilePath,
encoding: 'base64',
success: function(res) {
var base64Img = 'data:image/png;base64,' + res.data;
let userInfo = uni.getStorageSync("user_info")
userInfo.avatarUrl = base64Img
uni.setStorageSync("user_info", userInfo)
}
});
}
});
},
// 點擊昵稱
userNameInput(e) {
console.log(e.detail);
this.nickName = e.detail.value
let userInfo = uni.getStorageSync("user_info")
userInfo.nickName = e.detail.value
uni.setStorageSync("user_info", userInfo)
console.log('點昵稱', this.nickName, e.detail.value, uni.getStorageSync("user_info"));
},
getUserName(e) {
console.log('提交getUserName', e);
},
submitSure(e) {
console.log('確定submitSure', e);
uni.navigateBack({
delta: 1
})
},
dialogClose(e) {
console.log('dialogClose取消', e);
this.$refs.alertDialog.close()
}
},
onLoad() {},
}
</script>
<style lang="less" scoped>
.cu-btn {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.infoBox {
width: 80vw;
height: 180px;
position: relative;
.title {
font-size: 18px;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
font-weight: 500;
}
.popup-info {
width: 100%;
height: 40px;
display: flex;
justify-content: space-around;
line-height: 40px;
.popup-info-left {
text-align: center;
width: 50%;
}
.popup-info-right {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
button::after {
border: none;
}
.nickName-input {
display: inline-block;
width: 100%;
top: -5px;
}
.avatar-wrapper {
border: none !important;
width: 40px;
height: 40px;
padding: 0 !important;
background: none;
.avater {
width: 40px;
height: 40px;
}
}
}
}
.buttonSum {
width: 100%;
display: flex;
justify-content: space-around;
position: absolute;
bottom: 0;
.button {
width: 50%;
border-top: 1px solid #e2e1e1;
}
button {
width: 50%;
background-color: #ffffff;
font-size: 16px;
outline: none;
}
button::after {
border: none;
border-radius: 0;
}
}
}
.uni-popup__wrapper {
border-radius: 10px;
}
</style>
</style>到了這里，關(guān)于使用的uview 微信高版本 頭像昵稱填寫能力的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
