微信小程序怎么制作音乐播放器检索页

微信小程序怎么制作音乐播放器检索页

这篇文章主要介绍“微信小程序怎么制作音乐播放器检索页”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么制作音乐播放器检索页”文章能帮助大家解决问题。

　　首页的最后一部分为检索页，也就是让用户通过关键字搜索歌曲或专辑。

　　说到搜索页，比不可少的就是关键字的输入框。

　　参照这个样式，布局文件应该为：

1. <view class="search-bar">

2. <view class="search-input-warp">

3. <form bindsubmit="searchSubmit">

4. <label class="search-input-icon"></label>

5. <input type="text" class="search-input" bindfocus="bindFocus" name="search" value="{{searchKey}}" bindinput="bindKeyInput" placeholder="搜索歌曲、歌单、专辑" placeholder-class="search-input-placeholder"/>

6. <view class="search-cancel" bindtap="searchOk">确定</view>

7. </form>

8. </view>

9. </view>

复制代码

　　格式文件为：

1. .search-bar {

2. background:#f7f7f7;

3. padding:20rpx;

4. }

5. .search-input-warp {

6. position:relative;

7. padding:16rpx 24rpx 16rpx 70rpx;

8. background:#fff;

9. }

10. .search-input-icon {

11. content:" ";

12. position:absolute;

13. top:18rpx;

14. left:20rpx;

15. display:inline-block;

16. vertical-align:middle;

17. width:40rpx;

18. height:40rpx;

19. background-image:url("../../resources/images/search.png");

20. background-repeat:no-repeat;

21. background-size:40rpx;

22. }

23. .search-input {

24. font-size:28rpx;

25. line-height:40rpx;

26. }

27. .search-input-placeholder {

28. color:#ddd;

29. font-size:28rpx;

30. line-height:40rpx;

31. }

32. .search-cancel {

33. position:absolute;

34. right:0;

35. top:0;

36. display:inline-block;

37. font-size:32rpx;

38. height:90rpx;

39. width:140rpx;

40. text-align:center;

41. line-height: 90rpx;

42. z-index:50;

43. background:#f7f7f7;

44. }

复制代码

　　因为要提交关键字，所以使用表单组件，内部由表示搜索的放大镜图标，代表输入完成的“确定”按钮以及输入框组成。

　　除了输入框以外，此页还需要显示的内容应该是搜索的结果列表，搜索的历史记录以及热门关键字。这些内容应该显示在输入框下方，并按一定逻辑切换。他们之间的逻辑关系为：

• 用户进入检索页，显示的内容应该是输入框与热门关键字。

• 开始输入后(即输入框获得焦点)，应该显示历史记录。

• 点击确定，显示结果列表。

• 清空输入框内容后，返回关键字显示。
  

  　　

　　可以看出，对输入框的操作决定了当前页面显示的内容，所以我们需要监听输入框的获取焦点事件(bindfocus)，确定点击事件(bindtap)以及输入事件(bindinput)，还需要记录输入的关键字searchKey。

　　输入框完成后我们先写热门关键字，这些关键字也是来源于网络，所以还需要请求网络。在services/music里添加方法：

1. function getHotSearchKey(callback){

2. var data = {

3. g_tk: 5381,

4. uin: 0,

5. format: 'json',

6. inCharset: 'utf-8',

7. outCharset: 'utf-8',

8. notice: 0,

9. platform: 'h6',

10. needNewCode: 1,

11. _: Date.now()

12. };

13. wx.request({

14. url: 'http://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg',

15. data: data,

16. header: {

17. 'Content-Type': 'application/json'

18. },

19. success: function (res) {

20. if (res.statusCode == 200) {

21. callback(res.data)

22. } else {

24. }

25. }

26. });

27. }

28. ...

29. module.exports = {

30. ...

31. getHotSearchKey:getHotSearchKey

32. }

复制代码

　　返回JSON格式结果为

1. {

2. "code": 0,

3. "data": {

4. "hotkey": [

5. {

6. "k": "三生三世十里桃花 ",

7. "n": 90558

8. },

9. {

10. "k": "DJ ",

11. "n": 67590

12. },

13. {

14. "k": "薛之谦 ",

15. "n": 60425

16. },

17. {

18. "k": "凉凉 ",

19. "n": 37056

20. },

21. {

22. "k": "那片星空那片海 ",

23. "n": 29170

24. },

25. {

26. "k": "理想 ",

27. "n": 28695

28. },

29. ...

30. ],

31. "special_key": "歌手",

32. "special_url": "http://y.qq.com/m/act/singer/index.html?ADTAG=search"

33. },

34. "subcode": 0

35. }

复制代码

　　这里返回的hotkey就是我们需要的关键字啦，除此之外，我们还看到下面有“special_key”这一部分，这相当于广告部分，为服务器推荐的搜索关键字。所以我们以标签的形式显示关键字，对于广告那部分关键字，我们以红色字体，并且放在最前方，最后达成的样式应该为图10-5所示：

43232.png (5.21 KB, 下载次数: 4)

　　下载附件

　　保存到相册

2017-2-15 11:19 上传

　　实现这一布局的代码为：

1. <view class="quick-search" wx:if="{{showSearchPanel == 1}}">

2. <view class="quick-search-title">

3. <text>热门搜索</text>

4. </view>

5. <view class="quick-search-bd">

6. <text class="quick-search-item-red" data-url="{{special.url}}" data-key="{{special.key}}" bindtap="hotKeysTap" wx:if="{{showSpecial}}">{{special.key}}</text>

7. <text class="quick-search-item" wx:for="{{hotkeys}}" wx:key="unique" data-n="{{item.n}}" bindtap="hotKeysTap" data-key="{{item.k}}">{{item.k}}</text>

8. </view>

9. </view>

复制代码

　　这里面showSearchPanel的值为我们控制这一页面切换的依据，当其为1的时候，显示热门关键字。

　　绑定的数据有两个，special和hotkey。对于special部分，为了防止服务器缺失“special_key”这一部分从而导致没有数据显示，我们定义一个数据showSpecial来决定是否显示这一部分。

　　将这三个数据以及输入框用到的searchKey添加到data里吧。

　　修改index.js文件：

1. //引用网络请求文件

2. var MusicService = require('../../services/music');

4. //获取应用实例

5. var app = getApp()

6. Page({

7. data: {

8. indicatorDots: true,

9. autoplay: true,

10. interval: 5000,

11. duration: 1000,

12. radioList: [],

13. slider: [],

14. mainView: 1,

15. topList:[],

16. hotkeys: [],

17. showSpecial: false,

18. special: { key: '', url: '' },

19. searchKey: '',

20. },

21. onLoad: function () {

22. var that = this;

23. MusicService.getRecommendMusic(that.initPageData);

24. MusicService.getTopMusic(that.initTopList);

25. MusicService.getHotSearchKeys(that.initSearchHotKeys);

26. },

28. ...

29. initSearchHotKeys: function (data) {

30. var self = this;

31. if (data.code == 0) {

32. var special = { key: data.data.special_key, url: data.data.special_url };

33. var hotkeys = [];

34. if (data.data.hotkey && data.data.hotkey.length) {//当返回数据不为空且长度不为0

35. for (var i = 0; (i < data.data.hotkey.length && i < 6); i++) { //如果长度大于6只保留前6个

36. var item = data.data.hotkey[i];

37. hotkeys.push(item);

38. }

39. }

40. if (special != undefined) { //当返回项有special部分时，showSpecial为true

41. self.setData({

42. showSpecial: true

43. })

44. } else { //没有special部分，showSpecial为false

45. self.setData({

46. showSpecial:false

47. })

48. }

49. self.setData({

50. special: special,

51. hotkeys: hotkeys

52. })

53. }

54. },

55. ...

56. })

复制代码

　　数据加载完成后，我们为每个热门关键字view添加点击事件。

1. hotKeysTap: function (e) {

2. //TODO

3. },

复制代码

　　在这个点击事件里，我们需要做的事情有：

• 将点击的关键词加入历史记录。

• 将页面切换到搜索结果列表。 在完成搜索结果列表页后我们再来完善这一部分吧。
  

  　　

　　最后附上这一部分的格式文件。

1. .quick-search {

2. padding:20rpx;

3. box-sizing:border-box;

4. }

5. .quick-search-title {

6. font-size:28rpx;

7. }

8. .quick-search-bd {

9. position:relative;

10. margin-top:20rpx;

11. }

12. .quick-search-item {

13. font-size:28rpx;

14. float:left;

15. margin:0 20rpx 20rpx 0;

16. line-height:40rpx;

17. padding:10rpx 20rpx;

18. border-radius:30rpx;

19. color:#000;

20. border:2rpx solid rgba(0,0,0,.6);

21. }

22. .quick-search-item-red {

23. font-size:28rpx;

24. float:left;

25. margin:0 20rpx 20rpx 0;

26. line-height:40rpx;

27. padding:10rpx 20rpx;

28. border-radius:30rpx;

29. color:#fc4524;

30. border:2rpx solid #fc4524;

31. }

关于“微信小程序怎么制作音乐播放器检索页”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。