微信小程序短信登录
虽然微信有自动获取手机号,但是依然还是有一些公司使用短信登录
并没有全部取消
wxml
<view>
<view class='content'>
<view class='phone-box'>
<text class='phone'>手机号</text>
<input bindinput="phone" type='number' bindinput='phone' placeholder="请输入手机号" maxlength='11' class='number' />
</view>
<view class='phone-box'>
<text class='phone'>验证码</text>
<input bindinput="code" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' />
<view bindtap='yanLoveBtn' class='getNum' bindtap="sendCode">发送验证码</view>
</view>
<button bindtap="login" type="primary" class='login'>绑定</button>
</view>
</view>
wxss
.content {
width: 100%;
height: auto;
padding: 0 50rpx;
box-sizing: border-box;
}
.phone-box {
width: 100%;
height: 89rpx;
border-bottom: 1rpx solid #efefef;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.phone {
color: #333;
margin-right: 60rpx;
font-size: 28rpx;
}
.number {
color: #333;
font-size: 28rpx;
width: 200rpx;
}
.getNum {
width:210rpx;
height:48rpx;
background:rgba(248, 112, 57, 1);
border-radius:8rpx;
font-size:28rpx;
font-family:PingFang-SC-Medium;
color:rgba(255, 255, 255, 1);
line-height:48rpx;
margin-right:36rpx;
text-align:center;
}
.submit {
width: 480rpx;
height: 80rpx;
background: rgba(248, 112, 57, 1);
border-radius: 8rpx;
margin-top: 80rpx;
color: #fff;
font-size: 32rpx;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
phone:[],
code:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let token = wx.getStorageSync('token')
if(token){
wx.switchTab({
url: '/pages/index/index',
})
}
},
phone(e){
let phone = e.detail.value
this.setData({
phone:phone
})
},
sendCode(){
let phone = this.data.phone
if(phone==''){
wx.showToast({
title: '请输入手机号',
icon:'error'
})
return
}
wx.request({
url: 'http://www.vocalconcert.com/api/phone',
method:"POST",
data:{phone},
success:res=>{
console.log(res)
}
})
},
code(e){
let code = e.detail.value
this.setData({
code:code
})
},
login(){
let code = this.data.code
let phone = this.data.phone
if(phone==''){
wx.showToast({
title: '请输入手机号',
icon:'error'
})
return
}
if(code==''){
wx.showToast({
title: '请输入验证码',
icon:'error'
})
return
}
wx.request({
url: 'http://www.vocalconcert.com/api/login',
method:"POST",
data:{phone:phone,code:code},
success:res=>{
wx.setStorageSync('token', res.data.data)
if(res.data.code==3000){
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}