introduce
First, let’s talk about the login and registration of the applet. Generally, the login first needs to obtain the code. The validity period of the code is about 15 minutes. After the front-end obtains the code through the interface, it is passed to the back-end. The background can carry the code to send the request, get the user openid, session_key, etc., and register without the user
uni.login({
provider: 'weixin',
success: async (res) => {
let reslut = await get('/lgb/user/login', {
code: res.code
})
},
fail: err => {
console.log('login fail:', err)
}
})
Phone number
Obtaining the profile picture and user name is simple, but obtaining the phone requires authentication or something, let me take it slowly
Attach the official document address: mobile phone number quick verification | WeChat open document (qq.com)
First of all, obtaining a mobile phone number requires enterprise certification . Personally registered mini-programs cannot be certified. Secondly, it will cost about 300 yuan for mini-program certification . Attached is the picture:
Then the phone number obtained by the front end is not a real phone number, but a key. The key needs to be passed to the back end, and the back end sends a request to WeChat to get the user's real phone number, and then the function is completed.
Avatar and Username
The next step to get the avatar is the online address. Generally, you need to upload the avatar to the background, and attach a general interface example:
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)
}
})
}code display
Below I attach all the code:
<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>