微信小程序之简易网易云音乐

（一）主要界面截图：

主页界面，主要通过HTML以及css代码搜索界面，调用网易云音乐api接口，通过

完成搜索关键字，给出歌曲提示，点击可以播放

在此页面可以查看一些界面获取的网易云音乐榜单

音乐播放界面歌词播放界面

1、小程序页面跳转：

给要跳转的view标签添加方法：

 <view bindtap='torank'> //bindtap表示此处调用了一个函数<view class='iconfont icon-paihangbang'></view><view >排行榜</view></view>

函数写在js中

//事件处理函数torank: function () {wx.navigateTo({url: "/pages/ranking-list/ranking-list"})},//navigateto为跳转普通界面//想要跳转tabar界面需要用wx.switchTabwx.switchTab({url: '',})

在了解了页面跳转后，我们就可以通过点击界面或界面上的元素跳转到我们想要跳转的界面。

网易云小程序是通过调用api来获取数据，所以我们进入不同的界面需要给界面传不同的值：

api：https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi

这个api中给出了各种接口，我们在使用时调用即可。

有关界面传值：

以排行榜界面为例：排行榜调用接口可在上面的api中查找

如图有三个榜单，如何让程序去判断我们点击的是哪一个，并返回相应的榜单呢？1、首先我们要获取我们点击的id值，
2、将值传递给下一个界面，下一个界面根据id值请求服务器获取相应的榜单返回。

<view class='b' wx:for='{{ topList }}' bindtap='toTopListDetail' data-idx='{{index}}'>//通过data-idx="{{index}}"给获取点击的id值

 toTopListDetail: function (e) {//console.log(e)//console.log(e.currentTarget.dataset.idx)wx.navigateTo({url: `../classify/classify?idx=${e.currentTarget.dataset.idx}&name=${e.currentTarget.dataset.name}`,})},给下一个界面传点击的id值以及歌单地址的拼接方法：第一种拼接var url = '/pages/index/index?index1=' + e.currentTarget.dataset.id+"&name=sunck";// 第二种拼接var name="sunck";var url = `/pages/02/02?id=${e.currentTarget.dataset.id}&name=${name}`

在下一个界面的js中，从onload函数中获取上一个界面传来的值：

onLoad: function (options) {var that=this;console.log(options)//  1.得到排行榜的数据this.getTopList(options.idx,function(res){console.log(res)// 上拉刷新var start = (that.pageIndex - 1) * that.pageSizevar end = start + that.pageSizethat.setData({coverImgUrl: res.data.playlist.coverImgUrl,// 歌曲列表，并只放10首songList: res.data.playlist.tracks.slice(start,end ),// 把全部歌曲保存下来，为了上拉刷新songListAll: res.data.playlist.tracks})})

将获取的歌曲信息渲染到页面上

即可得到榜单内的歌曲信息。

音乐播放以及音乐搜索同理。

使用node.js调用api

此处使用node app.js进行服务启动，

tip:如果输入命令之后，报错类似cannot find module 'express'这样的，在此目录下执行npm install 即可

源码地址：https://download.csdn.net/download/qq_38830964/11289558

微信小程序之简易网易云音乐相关推荐

尚硅谷微信小程序开发仿网易云音乐App 小程序后端接口服务器搭建
目录小程序学习视频相关的教程文档与笔记分享配套服务器源码地址: 接口使用说明文档接口列表启动服务测试服务启动OK网页 http://localhost:3000/test.html编辑 ...
【微信小程序学习】网易云音乐歌曲详情页代码实现
这里记录一下做网易云小程序的音乐播放详情页面的代码. 音乐播放界面的主要的重点有几个: 1.磁盘和摇杆的旋转效果,这里运用了css的动画属性 2.音乐播放和暂停,下一首/上一首等播放效果的实现 3.进 ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
微信小程序 textarea 简易解决方案
微信小程序 textarea 简易解决方案参考文章: (1)微信小程序 textarea 简易解决方案 (2)https://www.cnblogs.com/bsyblog/p/6116973.ht ...
ap配网示例，esp8266和esp32微信小程序ap配网
第一.下载程序 esp8266示例程序:: 点击下载 esp32示例程序:: 点击下载示例程序是利用arduino IDE开发: 关于arduino IDE 的ESP8266环境配置可参考:环境配置 ...
【微信小程序控制硬件13 】与硬件平台无关，微信小程序 AP 配网安信可 Wi-Fi 模块入网示例。【AT篇，附带Demo】
文章目录前言一材料准备二实现目的三配置的数据交互协议 3.1 小程序发送网络信息阶段 3.2 模组连接路由器的回调: 四配置原理和过程五设备端 AT 交互过程另外,不要把我的博客 ...
Manjaro快速上手指南-微信、TIM/QQ、网易云音乐、WPS等等
笔者环境: 从一个好用的编辑器开始吧 vim sudo pacman -S vim 可能需要更新下库:sudo pacman -Syy 诶,还是安装失败了(没失败的跳过) 异常了类似与:/usr/bi ...
微信小程序| Ngork内网传统+后台API通信例子
小程序和后台API通信一.概述小程序不可以直接访问后台接口,只能访问在线并且通过域名的接口:如果一定要访问后台,则需要通过内网穿透实现暴露到公网,工具为:ngrok,网址为:https://n ...
微信小程序相关知识点和云音乐项目制作遇到的问题及解决
小程序项目想下载项目的可以下载看看~ 下载地址 github地址: https://github.com/superBiuBiuMan/Wechat_NetEase_CloudMusic gitee地 ...

微信小程序之简易网易云音乐

微信小程序之简易网易云音乐相关推荐

最新文章

热门文章