十三、制作 iVX音乐分享小程序

功能介绍

通过前几节的学习，我们对完成一个应用已经有了一些自己的心得。在此再次再制作一个小的音乐小程序应用。该应用一共分为首页、榜单页、音乐分享页和音乐搜索页。

首页：

榜单内容页：

音乐分享页：

音乐搜索页：

我们先完成首页的页面制作，再逐步完成整个项目。

一、音乐分享小程序首页制作

首页一共分为顶部标题栏、搜索栏、海报栏以及榜单块：

在标题栏中为了简化结构，一共包括了顶部用户信息和音乐搜索框。首先新建一个行，命名为登录状态/搜索，在其下创建两个行一个命名为个人信息与音乐搜索：

将个人信息、音乐搜索的垂直对齐设置为居中，使其元素可以居中显示。

随后在个人信息行中创建 3 个行，用于显示左侧、中部、右侧信息，依次设置这些行的宽度为 10%、50%、40%：

随后在左侧行中添加一个图片，设置宽度为 100%，占据整个左侧行内容、中部行添加一个文本并且设置与坐标的左内边距为 10、右侧设置右内边距为 10、水平对齐靠右并往其中添加一个按钮：

随后将会显示如下效果：

接下来设置音乐搜索行的水平对齐为居中，往其内部添加一个搜索框，设置宽度为 90%：

最后标题栏呈现如下：

接下来完成一个广告图区，广告图需要插件一个行，设置其上、下、左、右内边距为10，随后往内部添加一个图片组件，设置图片组件的大小为 100% 即可：

当前页面显示效果如下：

最后完成榜单内容的制作，在此添加一个行命名为榜单内容，在榜单内容下添加两个行，命名为左侧和右侧：

设置榜单内容的左右内边距为 10，随后设置左侧与右侧的宽度分别为 38%与64%。接着往左侧列中添加一个图片，设置宽度为 100，右侧列中添加一个行，命名为歌名：

此时页面显示效果如下：

接下来往歌名行中添加 4 个如下对象树中的组件：

在此还需要设置右侧的竖直对齐方式为 space-between 均分：

随后我们再复制 3 个歌名列：

此时页面效果如下：

在此我们只需要复制 3 个内容行，更改图片内容即可：

二、音乐分享小程序榜单页制作

榜单内容页制作比较简单我们，可以查看一下页面所框选的内容分为几个块：

首先我们需要更改该页面的背景色为某个榜单颜色相近的颜色：

随后在榜单内容下创建一个标题行，标题行下创建一个信息列，在信息列下创建一个小标题行：

接着在小标题行中添加两个文本，一个内容为 iVX，另外一个内容为榜单：

此时页面呈现效果如下：

接着继续在列中创建一个文本和一个返回首页按钮：

此时的页面效果如下：

接下来继续创建该页面的内容区，创建一个行命名为歌曲内容，在歌曲内容下创建一个歌曲内容行，歌曲内容行下有一个歌曲内容行与一个标题行：

在此时更改最外侧的歌曲内容行的圆角值为 38，且底部不显示：

此时页面能显示效果如下：

接着在标题栏中添加一个文本，显示为标题：

接着在歌曲内容行下添加 3 个列，命名为序号、歌曲信息、播放，并且在歌曲信息列下创建两个行，一个命名为作者另一个命名为歌名：

接下来往这些相应的行列中添加所需的元素：

接下来设置这些对应内容的宽度和内外边距，随后页面将会呈现如下效果：

三、音乐分享小程序分享页与搜索页制作

音乐分享页与榜单页类似，页面效果如下：

在此我们复制榜单页，更改标题内容并且删除多余内容，此时页面将会显示如下：

随后添加几个输入框和一个按钮即可，如何操作不再赘述：

接下来开始制作搜索页，搜索页与首页内容类似，复制一个页面重命名为音乐搜索页，删除榜单内容，将榜单页中的歌曲每条样式复制到当前页面中：

搜索页与音乐分享页都是由其他页面改动而成，重复内容在此不再赘述，下面将实现该小程序的功能。

四、功能实现

4.1 登陆功能实现

在首页的标题栏中需要显示登陆用户的头像与昵称，此时发起小程序登陆，需要在后台中添加私有用户组件，使用私有用户组件完成用户的登陆操作。在此添加一个私有用户到后台，重命名为用户：

随后给登陆按钮添加事件，并在前台创建两个变量用于接收用户的头像和昵称：

登陆后由于标题栏中的图片需要显示用户头像、文本需要显示用户昵称，在此为其绑定数据为用户头像和用户昵称变量内容：

此时用户登录按钮应该换成分享页面的按钮，点击可以跳到分享音乐页面中。需要完成这个需求需要在页面中添加 if 组件，设置用户昵称默认值为未登录，当用户昵称为未登录时显示立即登录按钮，当用户昵称不等于未登录时，显示分享页面跳转按钮：

此时在分享音乐中添加点击事件，将其点击后需要跳转到分享页面：

4.2 分享功能实现

此时为了方便数据显示，我们先为当前小程序应用添加数据的提交服务，为其添加该服务我们需要插件一个私有数据库存放歌曲内容：

此时为其添加字段为歌手、歌名、播放数、音乐链接：

随后添加一个服务命名为音乐上传：

这个服务接收 3 个参数，分别是歌手、歌名、音乐链接：

随后将其接收的参数传入数据库并且设置播放数的默认值为 0：

接下来在分享页面的按钮中添加点击事件，点击该按钮将会使用音乐上传服务，传入所输入的歌手、歌名和音乐链接名，接着添加失败回调与成功回调为其添加对应的响应：

4.3 首页数据显示功能实现

首页的 3 个榜单分别是热歌、新歌以及原创，热歌以播放数进行排列、新歌以时间顺序做为排列、原创则随机进行推荐。

在此创建热歌服务命名为最热榜单，在服务中使用数据库进行数据输出，设置输出的函数为 1 到传入的参数获取数为一个范围最终返回数据结果：

同理，最新榜单以及原创推荐榜单类似，在此贴出服务逻辑图示：

接下来在首页中创建 3 个对象变量，这 3 个对象变量用于接收数据榜单数据：

设置这些对象其列名为歌名、播放数、数据ID：

接下来设置首页的初始化事件，在初始化时使用这些榜单服务，传入获取数为 3， 获取到我们所需的内容使用对象变量进行接收：

此时我们删除榜单中的多余歌名行，使用循环组件对齐进行创建：

设置不同的榜单的数据为循环创建的数据来源：

并且将其文本内容绑定为对应的内容：

4.4 首页播放功能实现

此时歌曲数据获取到了，将为其播放按钮编写播放功能。我们此时需要创建一个服务，通过ID查找音乐地址：

此服务只返回音乐链接列内容：

接着我们在首页中添加一个音频组件，随后给播放按钮设置事件：

此时点击按钮后将会使用音乐链接服务传入当前的数据ID作为参数，获取到音乐地址后，设置音频的播放地址为返回内容，最后将音频进行播放即可。

4.5 榜单页功能实现

进入榜单页需要点击不同的榜单图片进入：

我们给这些图片设置不同的标志，点击图片后我们在前台中创建一个变量命名为选择类型，选择类型点击热歌榜时为 1、点击新歌榜时为 2、点击原创榜时为 3，并且跳转到榜单页：

接下来给榜单页创建一个初始化事件，通过选择类型判断榜单所选择内容，并且通过内容设置当前页面的背景色作为区分；最后将获取的内容使用一个获取内容对象数组进行接收：

获取内容对象变量列名为：

接下来将歌曲内容存放到一个循环创建之中：

设置循环创建的数据来源为获取内容变量：

随后将播放按钮根据首页编写的方式进行设定即可。

4.6 搜索页功能实现

搜索页的功能实现较为简单，我们首先给首页的音乐搜索输入框设置一个点击事件：

点击后将会跳转到搜索页：

随后创建一个搜索服务：

此服务接收一个参数为音乐名，随后通过输出时设置条件搜索歌名包含音乐名即可：

最后当点击音乐搜索按钮后启动其服务使用搜索内容对象变量进行接收即可：

搜索变量列为如下：

最后使用循环遍历显示内容即可，并且通过与首页相同方式为播放按钮绑定播放时间即可完成该页内容：