哎，最近項(xiàng)目中遇到一個(gè)需求就是直接獲取微信頭像和昵稱，可是去官方查閱后發(fā)現(xiàn)原先的接口已經(jīng)不能獲取了，返回的是灰色頭像和微信用戶，后來(lái)只能采用亡羊補(bǔ)牢的方法，就是用內(nèi)置按鈕組件的開(kāi)放能力，引用了插件市場(chǎng)的代碼，地址鏈接獲取昵稱、頭像的彈窗，適用最新微信小程序 - DCloud 插件市場(chǎng)x
項(xiàng)目效果如下圖
?好的廢話不多說(shuō)上代碼
這是一鍵登錄授權(quán)頁(yè)面
<template>
<view class="container">
<!-- 頂部開(kāi)始 -->
<!-- 頂部結(jié)束 -->
<view class="main-logo-wrap">
<!-- <view class="main-logo">
<image src="../../static/detail/wodedingdan.png" mode=""></image>
</view> -->
</view>
<view class="main">
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="main-btn">用戶一鍵登陸</button>
</view>
<u-popup :show="isShow" mode="center" border-radius="20" :mask-close-able="false">
<view class="content-wrap">
<view class='content'>
<view>為了您更好的體驗(yàn),申請(qǐng)獲取以下權(quán)限</view>
<text>獲得你的公開(kāi)信息(昵稱，頭像、地區(qū)等)</text>
</view>
<button class="main-btn" open-type="getUserInfo" @click="getUserProfile">
點(diǎn)擊授權(quán)
</button>
</view>
</u-popup>
<!-- <cui-button class="item" @click="tapGetUserProfile">獲取頭像昵稱</cui-button> -->
<cui-userprofiledialog ref="userProfileDialog" paddingBottom="92rpx"></cui-userprofiledialog>
</view>
</template>
<script>
// import { mapState, mapMutations } from 'vuex';
export default {
data() {
return {
logo: '',
code: '',
isShow: false
}
},
onShow() {
// this.logo = uni.getStorageSync('logo')
},
onLoad() {
this.getcode();
},
methods: {
tapGetUserProfile() {
this.$refs["userProfileDialog"].show({
desc: "用于顯示個(gè)人資料",
avatarUrl: {
requried: true, // 是否必填
disable: false, // 是否隱藏
}
}).then(res => {
//上傳完后的頭像地址 和自己的微信昵稱
console.log(res, '結(jié)果！?。?, res.avatarUrl, res.nickName)
this.getregister(this.mobile ,this.openid,res.avatarUrl,res.nickName)
}, err => {
console.log("取消")
});
},
// 取消授權(quán) 返回上一頁(yè)
cancelLogin() {
wx.reLaunch({
url: '/pages/my/my'
})
},
getphonenumber(e) {
if (!e.detail.encryptedData) {
uni.showToast({
title: "微信登錄授權(quán)失敗",
icon: "none"
});
} else {
this.getwxtel(e)
}
},
// 獲取code
getcode() {
uni.login({
success: res => {
console.log(res.code, '當(dāng)前服務(wù)器code');
this.code = res.code
}
})
},
// 獲取用戶手機(jī)號(hào)
getwxtel(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") { // 用戶允許或去手機(jī)號(hào)
this.$Request({
url: this.$Api.getwxtel,
method: 'POST',
data: {
encryptedData: encodeURIComponent(e.detail.encryptedData),
code: this.code,
iv: e.detail.iv
},
success: (res) => {
if (res.code == 200) {
console.log(res, '1111111111111111111111111111');
uni.setStorageSync('token', res.data.token)
setTimeout(() => {
uni.switchTab({
url: '/pages/my/my'
})
}, 1000)
} else if (res.code == 100) {
this.mobile = res.mobile
this.openid = res.openid
//如果沒(méi)注冊(cè)的話直接獲取頭像根據(jù)自己需求寫(xiě)要在哪調(diào)用
this.tapGetUserProfile()
uni.setStorageSync('mobile', res.mobile)
uni.setStorageSync('openid', res.openid)
} else {
}
}
})
}
},
//注冊(cè)
getregister(mobile, openid,avatar,nickname) {
this.$Request({
url: this.$Api.getregister,
method: 'POST',
data: {
mobile: mobile,
openid: openid,
avatar:avatar,
nickname:nickname
},
success: (res) => {
if (res.code == 200) {
uni.setStorageSync('token', res.data.token)
uni.switchTab({
url: '/pages/my/my'
})
} else {
uni.showToast({
icon: 'none',
title: res.msg
})
}
}
})
},
},
}
</script>
<style lang="scss">
.u-navbar__content__title.data-v-75dad532 {
color: #fff !important;
}
.content {
padding: 30rpx 30rpx 90rpx;
font-size: 28rpx;
&-wrap {
padding: 90rpx 30rpx 60rpx;
}
}
.main {
position: fixed;
top: 50%;
left: 30rpx;
right: 30rpx;
&-logo {
width: 280rpx;
height: 280rpx;
display: inline-block;
image {
border-radius: 50%;
}
&-wrap {
margin-top: 180rpx;
text-align: center;
}
}
&-btn {
background: $bgcolor;
color: #fff;
text-align: center;
height: 80rpx;
border-radius: 30px;
margin-bottom: 30rpx;
line-height: 80rpx;
font-size: 28rpx;
}
.cancel {
background-color: #999;
color: #fff;
font-size: 28rpx;
}
}
</style>請(qǐng)去插件官網(wǎng)引入獲取昵稱、頭像的彈窗，適用最新微信小程序 - DCloud 插件市場(chǎng)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-718507.html
或者直接下載壓縮包文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-718507.html
到了這里，關(guān)于關(guān)于uniapp中微信小程序獲取最新昵稱和頭像的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
