调用网易云二维码登录API，实现微信小程序登录

首先前往网易云音乐API官网binaryify.github.io/NeteaseClou…

首先根据文档的链接下载好配置文件，再根据官方文档启动好本地的服务器

1. 因为服务器启动的端口号默认为3000，我们需要将端口号改为4000去启动，避免与原来的3000端口号的服务器发生冲突。启动方式：在上面链接下载好的文件里面，输入cmd，进入小黑框 输入 ：set PORT=4000 && node app.js

二维码登录

说明: 二维码登录涉及到 3 个接口,调用务必带上时间戳,防止缓存

[1. 二维码 key 生成接口]

说明: 调用此接口可生成一个 key

接口地址 :/login/qr/key

[2. 二维码生成接口]

说明: 调用此接口传入上一个接口生成的 key 可生成二维码图片的 base64 和二维码信息,可使用 base64 展示图片,或者使用二维码信息内容自行使用第三方二维码生成库渲染二维码

必选参数:key,由第一个接口生成

可选参数:qrimg传入后会额外返回二维码图片 base64 编码

接口地址 :/login/qr/create

调用例子 :/login/qr/create?key=xxx

[3. 二维码检测扫码状态接口]

说明: 轮询此接口可获取二维码扫码状态,800 为二维码过期,801 为等待扫码,802 为待确认,803 为授权登录成功(803 状态码下会返回 cookies)

必选参数:key,由第一个接口生成

接口地址 :/login/qr/check

调用例子 :/login/qr/check?key=xxx

调用可参考项目文件例子/public/qrlogin.html(访问地址:http://localhost:3000/qrlogin.html)

接下来是代码演示：

//封装发送登录数据请求的函数 tools.js 。这里的url的 config.host1 部分（前面视频有讲到另外在config.js中配置），如果你没有配置好，请改为 url:http://localhost:4000，

export default (url,data={},method="GET")=>{return new Promise((resolve,reject)=>{wx.request({url:config.host1 + url,data,method,success:(res)=>{//console.log('请求成功',res);resolve(res.data)},fail:(err)=>{// console.log('请求失败',err);reject(err)}})})}

下面我们回到登录页面（login）设置一个button跳转到另外一个页面（qrcode）实现二维码登录，因为在原登录页面登录会比较麻烦（如果你觉得你可以处理好样式也未尝不可），这里我设置了一个qrcode page页面

// qrcode.wxml<view class="Container"><button class="confirm-btn" bindtap="qrlogin">获取二维码</button><image id="qrimg" src="{{qrimg}}" class="qrimg"></image></view>

//引入上面封装好的请求函数import tools from '../../utills/tools'data: {qrimg: '', //存放二维码},//qrcode.js//检测扫码状态接口async checkStatus(key) {let result = await tools(`/login/qr/check?key=${key}&timestamp=${Date.now()}`,)console.log(result, 'checkStatus');return result},//获取登录状态的函数 需要的参数（cooike（由上一个函数请求返回），请求方式：post）//本人在这个函数里头没有调用上面自己封装好的请求函数，因为自己也不会，尝试了一晚上也不能返回到用户信息，如果有大佬能发现问题，请务必告诉！！！async getLoginStatus(cookie = ''){console.log(cookie,'cookie');return new Promise((resolve,reject)=>{wx.request({url:`http://localhost:4000/login/status?timestamp=${Date.now()}`,method: 'post',data: {cookie,},success:(res)=>{console.log('请求成功',res.data.data.profile);resolve(res.data)//data里面的profile就是用户信息存储的信息。wx.setStorageSync('userInfo', JSON.stringify(res.data.data.profile))},fail:(err)=>{console.log('请求失败',err);reject(err)}})})},//这里你也可以用其他生命函数钩子去触发，本人比较希望通过绑定点击事件async qrlogin() {//获取keylet reskey = await tools(`/login/qr/key?timestamp=${Date.now()}`)//console.log(this.data.unikey,'unikey');//获取二维码let result2 = await tools(`/login/qr/create?key=${reskey.data.unikey}&qrimg=true&timestamp=${Date.now()}`)//console.log(result2,'qrlogin');//存下二维码this.setData({qrimg: result2.data.qrimg})let timerlet timestamp = Date.now()//定时器查看timer = setInterval(async () => {//调用检测扫码状态接口const result3 = await this.checkStatus(reskey.data.unikey)console.log(result3, '3');if (result3.code === 800) {wx.showToast({title: '二维码已过期,请重新获取',})clearInterval(timer)}if (result3.code === 803) {// 这一步会返回cookiewx.showToast({title: '授权登录成功',})clearInterval(timer)//成功获取到cooike，回到前面的函数请求获取用户信息。await this.getLoginStatus(result3.cookie)//登录成功跳转到个人页面wx.reLaunch({url:'/pages/personal/personal'})}}, 3000)},

完成这些步骤，最后应该可以成功的进行微信二维码登录了，在微信开发工具的Stroge可查看userInfo是否有数据。（注意：扫二维码登录是用网易云App扫的，不是用微信扫码！！！）

本人也是处于微信小程序开发学习当中，如有问题请在评论区进行交流，如果能帮助到你的话，请点赞吧！！！。