引言：

尚硅谷视频中的登录拥挤问题，导致无法登录，所以，我去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) {
        // 这一步会返回cookie
        clearInterval(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.value
    this.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"
}