前言：
之前写过一个小工具输入网易云音乐上的昵称，即可查看两人喜欢的音乐中，有哪些是相同的，重合率有多少。
感兴趣的可以看这里：https://www.jianshu.com/p/603d9e148d7b
但是之前的版本存在几个问题：
- 速度慢，这个其实是最难受的，平均 20 s以上，因为当时水平有限，使用的selenium相当于模拟了人工搜索，找用户，找歌单，筛选歌曲的过程，会获取很多不必要的信息。速度自然比接口慢很多很多。
- 体验差，样式也很丑，作为一个小工具，一个链接想再用的时候基本找不到了。
- 服务经常性不可用。
但是在我 github 搜网易云的时候发现了一个大佬用 Node.js 写的项目 https://github.com/Binaryify/NeteaseCloudMusicApi 提供了一系列网易云相关的接口，这就很巧了，朋友们，我缺的就是接口啊。（ps:感兴趣的读者可以去 github 上围观这个项目，我只是用了很少的几个接口做成了该工具，事实上，你甚至可以利用其做一个个人风格版的网易云音乐。）
其次前段时间正好买了两本微信小程序的书，而小程序的应用场景之一就是小工具，用完即走。加起来可以完美解决上面三个问题。于是就有了这次的网易云歌单重合率2.0。当然我这个小程序只是练手用，我也没想到如此简陋竟然能通过审核。
使用：
感兴趣可以先直接用微信扫描下方的小程序码体验。
xcxmusic.jpg
它用起来大概是这样：
gif_20191009_185116.gif
思路：
代码其实很简单，就不贴了，只说思路。
其实与1.0很相似了，只是以前用PhantomJS和selenium改成用接口获取。
- 通过搜索接口传入昵称获取到用户id，
- 用用户id，拿到喜欢的歌单id，
- 上传歌单id，获取到歌单详情，即所有的歌曲id。
- 歌曲id进行比对，重合的歌曲id上传到歌曲详情接口，获取到所有重合歌曲的名字歌手所属专辑等等。
遇到的问题：
-
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>其他证书里的，比较简单快捷。
-
小程序文本透明度渐显动画
把动画赋值给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); }) <!--pages/detail/detail.wxml--> <view animation="{{anim[0]}}" style="opacity:0" class="textViewTitle">你的昵称:</view> <view animation="{{anim[1]}}" style="opacity:0" class="textViewTitle">对方昵称:</view> -
转发功能
一开始上线后，惊人的发现不让转发，一番搜索后才发现，转发分享需要自己实现，并且可以带参。
我实现的效果是在主界面转发只会转发该小程序，不会携带昵称。在结果界面转发会携带昵称，对方点击后直接看结果。
只要重写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。
网友评论