介紹
首先講講小程序的登錄注冊，一般登錄首先需要獲取code code的有效期是十五分鐘左右，前端通過接口獲取到code之后傳給后端，然后后端會根據code來判斷是否有該用戶，并且后臺可以攜帶code發(fā)送請求，獲取到用戶?openid，ession_key等，沒有該用戶就進行注冊
uni.login({
provider: 'weixin',
success: async (res) => {
let reslut = await get('/lgb/user/login', {
code: res.code
})
},
fail: err => {
console.log('login fail:', err)
}
})
手機號?
獲取頭像與用戶名簡單，但是獲取電話就需要認證啥的了，讓我慢慢道來
附上官方文檔地址：手機號快速驗證 | 微信開放文檔 (qq.com)
首先獲取手機號需要企業(yè)認證，個人注冊的小程序是無法認證的，其次進行小程序認證 要花三百左右，附上圖：
然后前端獲取的電話并不是真的電話，是一段密鑰，需要將密鑰傳給后端，后端再發(fā)個請求給微信才能獲取到用戶真正的電話，然后就完成了該功能
頭像與用戶名
接下來獲取頭像是線上地址，一般需要把頭像上傳到后臺，附上一般接口實例：文章來源：http://www.zghlxwxcb.cn/news/detail-598970.html
upImg(file) {
let _this = this
uni.uploadFile({
url: 'http://xxxxxx:xxxx/lgb/upload/upload', // 上傳的 URL 地址
filePath: file, // 要上傳的圖片本地路徑
name: 'file', // 上傳圖片時使用的字段名
header: { // 自定義請求頭
'Content-Type': 'multipart/form-data'
},
formData: {
'fileType': 'images',
'dirName': 'cert'
},
success: function(uploadRes) {
let result = JSON.parse(uploadRes.data)
localStorage.set('imgUrl', result.data.fileUrl)
console.log(this.imgUrl)
},
fail: function(err) {
console.log('upload failed:', err)
}
})
}代碼展示
下面我附上所有代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-598970.html
<template>
<view class="container">
<!-- 標題 -->
<view class="title">
<text>獲取昵稱頭像</text>
<text>未選擇頭像則為默認頭像</text>
</view>
<!-- 選擇頭像 -->
<view class="choose-avatar-row">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<text>點擊選擇頭像</text>
</view>
<!-- 選擇昵稱 -->
<view class="choose-nickname-row">
<text>昵稱</text>
<input v-model="nickName" @input="inputName" type="nickname" placeholder="請輸入昵稱" />
</view>
<!-- 選擇電話 -->
<view class="choose-nickname-row" style="border: 0;">
<button class="avatar-wrapper" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
style="width: 100%;">
<text style="width: 100%;">點擊授權獲取手機號</text>
</button>
</view>
<view v-if="isPhone" style="text-align: center;">
<text>已獲取手機號</text>
</view>
<!-- 按鈕 -->
<view class="login-row">
<button @click="submit">登錄</button>
</view>
</view>
</template>
<script>
import {
get,
post
} from '@/utils/request.js'
import localStorage from '@/utils/localStorage.js'
export default {
data() {
return {
avatarUrl: '',
nickName: '',
PhoneCode: '',
imgUrl: '',
isPhone:false
}
},
mounted() {
uni.showToast({
title: '未登錄請先注冊',
icon: 'none'
})
},
methods: {
getPhoneNumber(e) {
this.PhoneCode = e.detail.code
console.log(e.detail.code)
this.isPhone = true
},
onChooseAvatar(e) {
this.avatarUrl = e.detail.avatarUrl
this.upImg(this.avatarUrl)
},
inputName(e) {
this.nickName = e.detail.value
},
upImg(file) {
let _this = this
uni.uploadFile({
url: 'http://xxxxxx:xxxx/lgb/upload/upload', // 上傳的 URL 地址
filePath: file, // 要上傳的圖片本地路徑
name: 'file', // 上傳圖片時使用的字段名
header: { // 自定義請求頭
'Content-Type': 'multipart/form-data'
},
formData: {
'fileType': 'images',
'dirName': 'cert'
},
success: function(uploadRes) {
let result = JSON.parse(uploadRes.data)
localStorage.set('imgUrl', result.data.fileUrl)
console.log(this.imgUrl)
},
fail: function(err) {
console.log('upload failed:', err)
}
})
},
async submit() {
if( !this.nickName || !this.PhoneCode || !localStorage.get('imgUrl')){
uni.showToast({
title: '請將數據填寫完整',
icon: 'none'
})
return
}
let result = await post('/lgb/user/register', {
openId: localStorage.get('openid'),
job: 0,
name: this.nickName,
code: this.PhoneCode,
avatar: localStorage.get('imgUrl')
}, {});
setTimeout(() => {
uni.showToast({
title: '注冊成功',
icon: 'none'
})
}, 800)
}
}
}
</script>
<style lang="scss">
view {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
padding: 0 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.title {
width: 100%;
height: 12%;
font-size: 20px;
font-weight: bold;
padding-top: 20px;
text:nth-child(2) {
display: block;
font-size: 14px;
font-weight: normal;
margin-top: 5px;
}
}
.choose-avatar-row,
.choose-nickname-row {
width: 100%;
height: 9%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 2px;
font-size: 14px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
.avatar-wrapper {
width: 40px;
height: 40px;
margin: 0;
padding: 0;
margin-right: 10px;
.avatar {
width: 100%;
height: 100%;
}
}
}
.choose-nickname-row {
border-top: none;
text {
width: 45px;
margin-right: 10px;
}
}
.login-row {
width: 100%;
height: 30%;
padding-top: 20px;
display: flex;
button {
font-size: 14px;
width: 30%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-color: transparent;
color: #07c160;
}
.inactive {
color: #ccc;
}
}
}
</style>有用的話點個小紅心把~~?
到了這里，關于uniapp開發(fā)小程序之獲取用戶基本信息與手機號方式的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
