简单的仿网易云音乐小程序(一)
前言
今天我们开始学习简单的仿网易云音乐小程序,该小程序由Github提供,并具有网络请求和音乐播放等经典基础功能。
思维图
在上述的思维图中,每当点击歌曲列表中的歌曲时,均会跳转到音乐播放界面。
注意事项
由于该小程序使用到了网络请求功能,故需要在开发者工具中进行设置。如果不设置,会出现以下情况。
虚拟机调试
如果仅仅只是想在虚拟机上进行网络请求功能的调试,要解决上述问题很简单。
- 打开开发者工具中右上角的详情页面。
- 将本地设置中的红箭头指视处打勾
真机调试
当你想使用真机进行调试时,上述办法就行不通了,需要到微信小程序的官网上进行设置。
- 登陆小程序官网,进入到管理页面,并点击开发选项卡。
- 在开发页面中点开开发设置,找到服务器域名模块,添加上网络请求的地址即可。
主页面
搜索框
搜索框位于页面的顶部,当用户点击时,自动跳转到等待搜索页面。故很容易想到这是一个导航跳转功能。
<navigator class='topsearchLeft' url='../search/search'>
<view class='iconfont icon-sousuo sousuo'></view>
<text>搜索</text>
</navigator>
上述代码中,设置了一个导航组件,当点击该组件时,跳转到url对应的页面中。
歌单列表
歌单列表用到了我们之前尚未学习过的新只是,即导入wxml的模版文件。使用模版文件也很好理解,因为歌单列表会重复的使用,当将该页面独立为一个模版组件后,调用起来将会非常的方便,也省略了很多冗余的代码。
<!-- 从文件中导入模版wxml -->
<import src="./template/boutiqueItem" />
<view class='BoutiqueList'>
<!-- block 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。 -->
<!-- for循环遍历音乐数据 -->
<block wx:for="{
{musicList}}" wx:key="index">
<!-- 将每一项数据输送给模版进行页面的渲染 -->
<!-- 使用名字为ListItem的模版 -->
<template is="ListItem" data="{
{item}}" />
</block>
</view>
这个模版在后续代码中均有使用,故我们在这进行学习
歌单模版
本小程序使用的歌单模版为一个单个的wxml文件,其他的wxml可以使用相对路径的方法对其进行调用。
模版文件存放在template文件夹下,WXML提供模板template,可以在模板中定义代码片段,然后在不同的地方调用。该模版内容没有特别新奇的地方,故没有特别添加上注释
<wxs src="../../../utils/filter.wxs" module="filter" />
<template name="ListItem">
<!-- 这里的item是调用该template输出的data值 -->
<view class='musicItem' bindtap='getdetail' data-id='{
{item.id}}'>
<view class='musicItem_left'>
<image class='musicItemImg' src='{
{item.coverImgUrl}}' alt='' lazy-load="true" mode="scaleToFill"></image>
<view class='playCount_box'>
<view class='iconfont icon-ttpod playCount_icon'></view>
<!-- 使用wxs中的内容 -->
<text class='playCount'>{
{filt