介绍
首先讲讲小程序的登录注册，一般登录首先需要获取code code的有效期是十五分钟左右，前端通过接口获取到code之后传给后端，然后后端会根据code来判断是否有该用户，并且后台可以携带code发送请求，获取到用户 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)
首先获取手机号需要企业认证，个人注册的小程序是无法认证的，其次进行小程序认证 要花三百左右，附上图：
然后前端获取的电话并不是真的电话，是一段密钥，需要将密钥传给后端，后端再发个请求给微信才能获取到用户真正的电话，然后就完成了该功能
头像与用户名
接下来获取头像是线上地址，一般需要把头像上传到后台，附上一般接口实例：文章来源：https://www.toymoban.com/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)
}
})
}代码展示
下面我附上所有代码：文章来源地址https://www.toymoban.com/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开发小程序之获取用户基本信息与手机号方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
