引言：

尚硅谷视频中的登录拥挤问题，导致无法登录，所以，我去gitee上从新找了个别人搞好点网易云的api接口【也是比较出名的那个，不想用不行啊，我也试过很多方法都不行】

接口详解网址：网易云音乐 NodeJS 版 API (binaryify.github.io)

查找接口网址：NeteaseCloudMusicApi

 然后选一个，用git clone，剩下的轻车熟路了，但是你需要有git，然后连接上gitee，或者你去github找一样

关键来了：

别杠哈！我试过手机号密码登录，手机号验证码登录，都没有用，邮箱我账号没有绑定就不用了，最后发现只有二维码登录才行，可能你会觉得二维码登录在小程序奇奇怪怪的，但是没有办法，现在只能这样了。

做了二维码登录及其页面效果和js，我还保留着手机号登录的页面样式和js，用swiper组件包裹着，ui样式，尚硅谷的太丑了，我修改了一下

以下是完整代码，可以copy下来，或者去我主页下载-资源包 login 部分

login.wxml

<swiper class="container"><swiper-item><view class="title"><text>当前为二维码登录</text><text>从右向左滑后，可进行手机号和密码登录</text></view><view class="qrLogin"><image src="{{qrDefault}}" mode="" class="qrImg" /><view class="qrStatus">二维码状态：<text>{{qrStatus}}</text></view><button type="primary" bind:tap="handleQr">获取二维码</button></view></swiper-item><swiper-item><view class="title"><text>当前为手机号和密码登录</text><text>从左向右滑后，可进行二维码登录</text></view><form class="input-content" catchsubmit="handleSubmit"><view class="input-item"><input type="number" id="number" bindfocus="handleFocus" bindblur="handleBlur" maxlength="11" name="number" /><label class="tit" for="number" style="{{tit1}}">请输入手机号</label></view><view class="input-item"><input type="text" password="true" id="password" bindfocus="handleFocus" bindblur="handleBlur" maxlength="16" name="password" /><label class="tit" for="password" style="{{tit2}}">请输入密码</label></view><button class="confirm-btn" form-type="submit">登 录</button></form><view class="forget-section">忘记密码?</view><view class="register-section">还没有账号?<text>马上注册</text></view></swiper-item></swiper>

 login.wxss

/* pages/login/login.wxss */
.container {height: 100vh;color: #333333;
}.container swiper-item {box-sizing: border-box;padding: 0 5%;
}/*  */
.qrLogin {display: flex;flex-direction: column;align-items: center;
}.qrLogin image {width: 500rpx;height: 500rpx;border: 1rpx solid #979797;border-radius: 20rpx;
}.qrLogin .qrStatus {margin: 10rpx 0 60rpx;color: #979797;font-size: 28rpx;
}.qrStatus text {padding: 5rpx 15rpx;color: #edab3c;background-color: #fdf6ec;border: 1rpx solid #edab3c;border-radius: 7rpx;font-size: 25rpx;vertical-align: baseline;
}/*  */
.title {display: flex;flex-direction: column;padding: 120rpx 0 80rpx;letter-spacing: 3rpx;
}.title text:first-child {padding-bottom: 10rpx;font-weight: 600;font-size: 37rpx;
}.title text:last-child {font-size: 26rpx;color: #979797;
}.input-item {position: relative;margin-bottom: 70rpx;padding: 10rpx 5rpx;border-bottom: 1rpx solid #e0e0e0;
}.input-item .tit {position: absolute;top: 10rpx;left: 10rpx;transition: all .2s linear
}.confirm-btn {width: 100% !important;height: 84rpx;line-height: 84rpx;border-radius: 50rpx;background: #fc3a3a;color: #fff;font-size: 32rpx;padding: 0;
}/*  */
.forget-section {font-size: 28rpx;color: #4399fc;text-align: center;margin-top: 40rpx;
}/*  */
.register-section {position: absolute;left: 0;bottom: 50rpx;width: 100%;font-size: 28rpx;color: #606266;text-align: center;
}.register-section text {color: #4399fc;margin-left: 10rpx;
}

login.js

// pages/login/login.js
import request from '../../utils/request'
Page({/*** 页面的初始数据*/data: {// 做了个点击输入框，label移动的东西tit1: "",tit2: "",// 二维码状态qrDefault: 'https://img1.baidu.com/it/u=1629184190,3216022764&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',qrStatus: "未获取",// 手机号登录number: "",password: ""},// 验证登录状态async getLoginStatus(cookie = '') {let userInfo = await request("/login/status", {cookie,timestamp: Date.now()})wx.setStorageSync('userInfo', JSON.stringify(userInfo.data.profile))wx.setStorageSync('cookie', JSON.stringify(cookie))},// 二维码相关 【都要加时间戳，防止缓存】async handleQr() {// 1、获取 key let qrKey = await request("/login/qr/key", { timestamp: Date.now() })// 2、获取 二维码图片信息let qrCreate = await request("/login/qr/create", {key: qrKey.data.unikey,qrimg: true,timestamp: Date.now()})this.setData({qrDefault: qrCreate.data.qrimg,qrStatus: "当前已获取，等待扫码中"})// 3、扫描二维码let timer = setInterval(async () => {let qrCheck = await request("/login/qr/check", {key: qrKey.data.unikey,timestamp: Date.now()})// 判断扫码状态if (qrCheck.code === 800) {this.setData({qrStatus: '二维码已过期,请重新获取'})wx.showToast({title: '二维码已过期,请重新获取',icon: 'error'})clearInterval(timer)return;}if (qrCheck.code === 803) {// 这一步会返回cookieclearInterval(timer)await this.getLoginStatus(qrCheck.cookie);// 关闭所有页面，跳转到应用某页面，这样个人页在onLoad接受，只执行一次，不用再onshow 中执行多次wx.reLaunch({url: '/pages/personal/personal',})}}, 3000)},// 手机号登录相关handleFocus(e) {if (e.target.id == "number") {this.setData({tit1: "top:-30rpx; font-size:28rpx;"})} else if (e.target.id == "password") {this.setData({tit2: "top:-30rpx; font-size:28rpx;"})}},handleBlur(e) {// 内容为空，label位置就回去if (e.target.id == "number" && e.detail.value == "") {this.setData({tit1: ""})} else if (e.target.id == "password" && e.detail.value == "") {this.setData({tit2: ""})}},handleSubmit(e) {// console.log(e.detail.value); // {number: "11", password: "11"}let { number, password } = e.detail.valuethis.setData({number: number,password: password})/* 手机号验证1、空值；2、格式不正确；3、正确通过*/if (!number) {wx.showToast({title: '手机号不能为空',icon: 'none'})// 因为是异步任务，后面代码没有必要去执行return;}// 定义正则表达式let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/if (!phoneReg.test(number)) {wx.showToast({title: '手机号格式错误',icon: 'none'})return;}// 判断密码不能为空if (!password) {wx.showToast({title: '密码不能为空',icon: 'none'})return;}},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

request.js和config.js

// request.js配置服务器信息
import config from './config'export default (url, data = {}, method = "GET") => {return new Promise((resolve, reject) => {wx.request({url: config.host + url,data,method,success: (res) => {resolve(res.data)},fail: (err) => {reject(err)}})});
}/* config.js以后替换域名即可
*/
export default {host: "http://localhost:3000"
}