网易云歌单重合率2.0

前言：

之前写过一个小工具输入网易云音乐上的昵称，即可查看两人喜欢的音乐中，有哪些是相同的，重合率有多少。

感兴趣的可以看这里：https://www.jianshu.com/p/603d9e148d7b

但是之前的版本存在几个问题：

1. 速度慢，这个其实是最难受的，平均 20 s以上，因为当时水平有限，使用的selenium相当于模拟了人工搜索，找用户，找歌单，筛选歌曲的过程，会获取很多不必要的信息。速度自然比接口慢很多很多。
2. 体验差，样式也很丑，作为一个小工具，一个链接想再用的时候基本找不到了。
3. 服务经常性不可用。

但是在我 github 搜网易云的时候发现了一个大佬用 Node.js 写的项目 https://github.com/Binaryify/NeteaseCloudMusicApi 提供了一系列网易云相关的接口，这就很巧了，朋友们，我缺的就是接口啊。（ps:感兴趣的读者可以去 github 上围观这个项目，我只是用了很少的几个接口做成了该工具，事实上，你甚至可以利用其做一个个人风格版的网易云音乐。）

其次前段时间正好买了两本微信小程序的书，而小程序的应用场景之一就是小工具，用完即走。加起来可以完美解决上面三个问题。于是就有了这次的网易云歌单重合率2.0。当然我这个小程序只是练手用，我也没想到如此简陋竟然能通过审核。

使用：

感兴趣可以先直接用微信扫描下方的小程序码体验。

xcxmusic.jpg

它用起来大概是这样：

gif_20191009_185116.gif

思路：

代码其实很简单，就不贴了，只说思路。

其实与1.0很相似了，只是以前用PhantomJS和selenium改成用接口获取。

1. 通过搜索接口传入昵称获取到用户id，
2. 用用户id，拿到喜欢的歌单id，
3. 上传歌单id，获取到歌单详情，即所有的歌曲id。
4. 歌曲id进行比对，重合的歌曲id上传到歌曲详情接口，获取到所有重合歌曲的名字歌手所属专辑等等。

遇到的问题：

1. http 转 https

   微信的后台只支持 https ,而一般默认https都是用 443 接口，然后 80 端口转到 443 端口，实现 http 转 https 。但是这个项目在服务器用另外一个端口，比如是 5000 ，那么我就必须要申请另外一个端口给这个 5000 用SSL。很麻烦，最简单的方法就是另外用一个二级域名，比如之前是 api.xxx.com 则 这个服务就用node.xxx.com ,然后给 node.xxx.com 申请SSL证书。然后添加反向代理，把 node.xxx.com 转到api.xxx.com:3000 。这样就实现了访问 https://node.xxx.com ,但是实际调用到 http://api.xxx.com:3000 服务。可能有些绕口。

   需要注意的是现在免费的话基本只能申请单域名，比如 api.xxx.com ，不能免费申请 *.xxx.com 这种泛域名的证书。至于申请证书后的操作，可自行百度，很多教程，我服务器是腾讯的，通过腾讯云申请后，在宝塔面板添加到SSL>其他证书里的，比较简单快捷。

2. 小程序文本透明度渐显动画

   把动画赋值给anim数组元素，然后view绑定这个元素动画。目前是这么实现的，可能存在不合理的地方，欢迎探讨。

   //detail.js
   //获取应用实例
   const app = getApp()
   Page({
     data: {
       anim:[{}],
     },
   textShow:function(index){
       var animation = wx.createAnimation({
         duration: 2000,
       });
       var key = 'anim[' + index + ']';
       animation.opacity(1).step({})
       this.setData({
         [key] : animation.export(),
       })
     },
     //使用的时候
     page.textShow(0);
     page.textShow(1);
   
    })
    
    
    
    你的昵称:
    对方昵称:
   

3. 转发功能

   一开始上线后，惊人的发现不让转发，一番搜索后才发现，转发分享需要自己实现，并且可以带参。

   我实现的效果是在主界面转发只会转发该小程序，不会携带昵称。在结果界面转发会携带昵称，对方点击后直接看结果。

   只要重写onShareAppMessage方法即可，path可以携带参数，代码大致如下：

   //首页js
   onShareAppMessage: function (res) {
       if (res.from === 'button') {
         // 来自页面内转发按钮
         console.log(res.target)
       }
       return {
         title: '网易云歌单重合率',
         path: 'pages/index/index',
         success: function (res) {
           // 转发成功
           wx.showToast({
             title: '转发成功',
             icon: 'none'
           })
         },
         fail: function (res) {
           // 转发失败
           wx.showToast({
             title: '转发失败',
             icon: 'none'
           })
         }
       }
     }
     //结果js
     onShareAppMessage: function (res) {
       if (res.from === 'button') {
         // 来自页面内转发按钮
         console.log(res.target)
       }
       return {
         title: '网易云歌单重合率',
         path: '/pages/detail/detail?myUserName=' + this.data.myUserName + '&otherName=' + this.data.otherName,
         success: function (res) {
           // 转发成功
           wx.showToast({
             title: '转发成功',
             icon: 'none'
           })
         },
         fail: function (res) {
           // 转发失败
           wx.showToast({
             title: '转发失败',
             icon: 'none'
           })
         }
       }
     }
   

总结

总的来说，小程序开发对于有前端开发经验的人来说是非常容易上手的。所以如果有什么想法的话，想做一些东西的话，不一定非要在Android ,IOS上做一个成品app的，我觉得完全可以借鉴小程序平台试水，开发迅速，审核也很快。完全可以先用小程序看看方案和思路是否可行，之后再决定是否要做成品app。