仿网易云微信小程序

按照歌手姓名查询歌曲列表，播放歌曲，播放mv，上一曲下一曲，进度条拉动，歌词显示，歌词滚动功能均实现。
github地址:https://github.com/zhongbaigeng/wangyiyun.git

首页按照歌手姓名查询歌曲列表实现：（按歌手名搜索）

绑定搜索框事件

	<!-- 输入框 -->
	<view class='search-input'>
		<input bindinput="getKeyWord"></input>
	</view>
	<view bindtap="doSearch" class="search-button">搜索</view>
</view>

触发事件：
调用接口：

https://music.163.com/api/search/get?s=" + KeyWord + "&type=1&limit=" + that.data.limit

 /**
     * 获取输入的关键字
     */
    getKeyWord: function (e) {
        // 获取输入框中的内容
        var value = e.detail.value;
        console.log(value);
        // 给data中的关键字赋值
        this.setData({
            KeyWord: value,
            limit: this.data.defaultLimit
        });
    },

    /**
     * 点击搜索按钮时触发的方法
     */
    doSearch: function () {
        // 获取关键字
        var KeyWord = this.data.KeyWord;
        var that = this;
        // 处理空格
        var pattern = /\s+/;
        if (KeyWord != null && KeyWord.replace(pattern,"").length > 0) {
            //显示提示框
            wx.showLoading({
                title: "加载中，请稍后...",
            });
            // 根据关键字搜索歌曲(发请求)
            wx.request({
                url: "https://music.163.com/api/search/get?s=" + KeyWord + "&type=1&limit=" + that.data.limit,
                success: function (res) {
                    // 搜索解析之后的结果
                    var resultSongs = res.data.result.songs;
                    console.log("-----------------------------------------------")
                    console.log(resultSongs)
                    console.log(resultSongs[0].artists[0].img1v1Url)

                    // songs没有专辑封面
                    that.setData({
                        songs: resultSongs
                    })
                    var searchIds = [];
                    // 遍历resultSongs,获取所有的歌曲id，并存放到数组中
                    for (var i = 0; i < resultSongs.length; i++) {
                        searchIds.push(resultSongs[i].id)
                    }
                    that.setData({
                        albumPicUrls: [],
                        ids: searchIds
                    })
                    // 专辑封面通过id访问歌曲详情接口获取
                    that.getMusicImageById(searchIds, 0, searchIds.length);
                },
                // 接口调用失败的回调函数
                fail: function () {

                },
                // 接口调用结束的回调函数（调用成功、失败都会执行）
                complete: function () {
                    // 隐藏loading提示框
                    wx.hideLoading();
                },
            });
        }
    },

使用wx:for循环歌曲列表：

<!-- 歌曲列表 -->
<block wx:for="{{songs}}" wx:key="songs" wx:for-item="song" wx:for-index="i">
	<view class='musicContainer'>
		<!-- 左边专辑封面 -->
		<view class="left">
			<image src="{{song.artists[0].img1v1Url}}"></image>
		</view>
		<!-- 中间歌曲信息 -->
		<view class="center">
			<view class="songName">{{song.name}}</view>
			<view class="singerName">{{song.artists[0].name}}-《{{song.album.name}}》</view>
			<!-- mv图标 -->
			<image class="mv" wx:if="{{song.mvid!=0}}" data-mvid="{{song.mvid}}" bindtap="gotoMv" src="/images/MV.png"></image>
		</view>
		<!-- 右边播放图标 -->
		<view class="right">
			<image bindtap="gotoPlay" src="/images/play.png" data-id="{{song.id}}"></image>
		</view>
	</view>
</block>

其余功能逻辑相同：页面元素绑定事件—》触发事件调用js-----》js调用接口/跳转界面传值/执行动画操作/----->页面赋值