小白的第一个微信小程序-仿网易云音乐 请多指教

my_heart_smile
1,482 阅读15分钟

来自一个大三想学前端的小白内心独白：小左：诶~你要写小程序？还想仿网易云？小右：是啊，不行吗？小左：你会吗？小右：不会啊 小左：那你写个蛇皮 小右：因为喜欢啊！哪有人一开始就会，慢慢学嘛！我还年轻，不就应该年少轻狂吗？青春本就该无限嚣张！ 好了，下面该严肃点了，因为我觉得写代码是件很严肃的事情。

前言

先说说写这个小程序的初衷吧！学了一段时间的微信小程。其实刚开始学的时候就打算仿网易云了，因为每天都会用，所以毫不犹豫的选择了它。我比较喜欢听歌，刚开始是用酷狗，相信大家对那句hello酷狗一定不陌生，然后就是qq音乐，最后就是网易了。总的来说还是更喜欢网易。它最吸引我的是它的风格吧！很简约，样式也是我喜欢的风格。最喜欢的是它的朋友界面可以看到大家分享的歌，还有许多很好看的壁纸吧（个人很喜欢收藏自己看起来舒服的壁纸）。我喜欢看每首歌的热评，与其说它是一个个故事更为贴切点，也让我对这首歌有了新的感触。很喜欢这种感觉。还有那个签到功能，每天一次签到送你一句正能量的话，感觉美好的一天又开始了。嗯，总结一下，就是一见钟情的热爱吧，仅此而已。废话到此结束....

嘻嘻，骗你的，还有一句废话。一开始写，就觉得自己太狂妄自大了。因为功能实在是太多了。所以只实现了一些最基本的功能(其实根本没有功能，就是些页面的数据渲染。吹一下，显得有底气一点！）。

正文

写小程序所需要的一些东西

  1. 注册一个小程序账号，得用一个没注册过公众号的邮箱注册。
  2. 注册过程中需要很多认证，有很多认证，比较繁琐，如果暂时只是开发测试，不进行提审、发布的话，只要完成营业执照号填写就可以了，不需要完成微信认证。
  3. 注册完账号，登录，在主页面左边列表中点击设置，然后再设置页面中选开发设置就可以看到AppID，用于登录开发工具。
  4. 可以到官网下载开发工具微信开发者工具
  5. 然后创建项目就行

小程序中用到的一些组件库与文档

  1. colorUi 一款高颜值的微信小程序组件库
  2. vant(十分好用的一款轻量级组件库)
  3. 微信官方文档
  4. iconfont(一个十分强大的图标库，你要的样子它都有)
  5. 网易云API(十分良心的一个开源API)

小白的代码历程

嗯，现在就看看这个比的写的小程序到底长个啥样吧！

就是这么low的样子了，主要实现的就是听歌、看视频和搜索歌曲这个功能吧。数据都是在网易的官方接口取的，网速有点慢所以感觉有点卡。其实最想写得是网易云音乐的签到和朋友界面分享歌曲的功能，可奈何我不行啊，还没开始学登陆传一个cookie给服务器，让他知道我登陆了。因为网易云音乐的好多接口要你登陆了才能获取。 嗯，不解释了，菜就是菜。现在请欣赏菜鸟的代码是如何炼成的。

页面的结构就是这个样子了。

主要界面功能讲解

index界面

刚开始想直接用组件写那个最上面的tabbar,后面一想，等以后用习惯了岂不是这么简单的tabbar都写不出，所以能自己写就自己写。这是个菜鸟的基本素养。 我是用TabCur来判断当前页，从而添加一个show或hide类来控制该页面是显示还是隐藏。

 //切换tabbar
  click(e){
    const id = e.currentTarget.dataset.id;
    if(id==1){
      wx.navigateTo({
        url: '../songSquare/songSquare'
      })
    }
    if(id==2){
      wx.navigateTo({
        url: '../songTop/songTop'
      })
    }
  },

这个代码就是通过绑定的事件来实现页面的跳转

发现页面的结构

  1. 先用swiper写了个轮播
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
    <swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
      <view class="swiper-item">
        <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
        <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
      </view>
    </swiper-item>
  </swiper>
  1. 推荐歌单那一块是自己写了个组件叫card，在调用card组件的页面给card传了个images的数组取名为repo，这样card组件上就能用这个数组了
<card repo="{{images}}"></card>

card.html

<view class="songCard">
    <view class="n-rcmd">
        <view class="v-hd2">
            <navigator class="tit f-ff2 f-tdn" url="https://music.163.com/discover/playlist/">
                推荐歌单
            </navigator>
            <button class="btn" bindtap="music">
                <text class="s-fc3">歌单广场</text>
            </button>
        </view>
    </view>
    <view class="music">
        <view class="item" wx:for="{{repo}}" wx:key="index" wx:if="{{index<6}}" data-id="{{item.id}}" bindtap="getSong">
            <view class="container u-cover">
                <image src="{{item.coverImgUrl}}" />
                <text class="text">{{item.name}}</text>
            </view>
        </view>
    </view>
</view>

card.js

// components/card/dard.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    repo:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    music : function(){
      wx.navigateTo({
        url: '/pages/songSquare/songSquare'
      })
    },
    getSong(e){
      console.log(e);
      console.log(this.properties.repo);
      var id = e.currentTarget.dataset.id;
      //跳转到歌单详情页面
      wx.navigateTo({
        url: '/pages/songDetail/songDetail'
      })
    ,
      app.globalData.getSongId = id;
    }
  }
})

点击歌单会进入歌单详情页，后面再讲。 3. mv视频和推荐歌单一样也是一个组件 card2.xtml


<view class="cards">
    <view class="card" wx:for="{{mvId}}" wx:key="index" wx:if="{{index<6}}" data-id="{{index}}" >
    <video src="{{item.brs[240]}}" hidden="{{currentVid !== item.id}}" id="{{item.id}}" duration="{{item.duration}}" poster="{{item.cover}}" />
    <image style="width:100%" data-vid="{{item.id}}" src="{{item.cover}}" hidden="{{currentVid == item.id}}" bindtap="play">
        <view class="label">
            {{item.duration}}
        </view>
    </image>
    <navigator url="/pages/show/index" >
        <view class="content">
            <view class="header">
                {{item.briefDesc}}
            </view>
             <view class="cu-list menu-avatar">
            <view class="cu-item">
                
                <view class="content flex-sub">
                    <view class="line text-grey">{{item.desc}}</view>
                    <view class="text-gray text-sm flex justify-between">
                        {{item.publishTime}}
                        <view class="text-gray text-sm">
                            <text class="cuIcon-attentionfill margin-lr-xs"></text>
                            {{item.playCount}}
                            <text class="cuIcon-appreciatefill margin-lr-xs"></text>
                            {{item.likeCount}}
                            <text class="cuIcon-messagefill margin-lr-xs"></text>
                            {{item.subCount}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        </view>
    </navigator>
    </view>
</view>

card2.js

let currentVideo = null;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    mvId :{
      type:Array,
      value:[]
    }
    },
  /**
   * 组件的初始数据
   */
  data: {
    id : null,
    author:[],
    videoimage: "block",
    currentVid: null
  },
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的方法列表
   */
  methods: {
     //点击播放按钮，封面图片隐藏,播放视频
  play(event){
      if(this.data.currentVid !== null){
        currentVideo.pause();
      }
      const vid = event.target.dataset.vid;
      if (vid){
        currentVideo = wx.createVideoContext(`${vid}`);
        currentVideo.play();
       this.setData({
        currentVid:vid
       })
      }
    }
  },
})

这个地方的video标签下面放了个image标签，就是用这张图片来控制video只能同时播放 一个视频。刚开始是显示图片，你点击图片它就把图片隐藏，显示video.还有一个判断就是当你点另外的video时你刚在播放的video会停止播放，然后再播放当前你点击的视频，这样就做到了同一时间只能播放一个视频。

歌单广场页面

songSqueare.wml

<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
  <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{list}}" wx:key bindtap="tabSelect" data-name="{{item.name}}" data-id="{{index}}" wx:if="{{index<10}}">
    {{item.name}}
  </view>
</scroll-view>
<!-- 轮播 -->
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
  <view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
    <view class="swiper-item">
      <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
      <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
    </view>
  </view>
</view>
<!-- 歌单 -->
<view class="music {{TabCur == index ? 'show' : 'hide'}}" wx:for="{{list}}" wx:key wx:if="{{index<6}}" data-index="{{index}}">
    <view class="item" wx:for="{{images}}"wx:key="index" data-id="{{item.id}}" bindtap="getSong">
        <view class="container u-cover">
            <image src="{{item.coverImgUrl}}" />
            <text class="text">{{item.name}}</text>
        </view>
    </view>
</view>

songSqueare.js

// miniprogram/pages/songSquare/songSquare.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images:[],
    TabCur: 0,
    isActive : 0,
    scrollLeft:0,
    name : '',
    list:['推荐','精品','华语','民谣','轻音乐','电子','摇滚'],
    swiperList: [{
      id: 0,
      type: 'image',
      url: 'http://p1.music.126.net/9R7PD9p03LLxykyibHiKEw==/109951163804524121.jpg?param=140y140'
    }, {
      id: 1,
        type: 'image',
        url: 'http://p1.music.126.net/1zOMcO4a3Pxo8c5xhiVZ1Q==/109951163637220918.jpg?param=140y140',
    }, {
      id: 2,
      type: 'image',
      url: 'http://p1.music.126.net/O4ee-Bl6Z7R-8rikBflpzQ==/109951164036483747.jpg?param=140y140'
    }, {
      id: 3,
      type: 'image',
      url: 'http://p1.music.126.net/JXo18VuEJ4J6ymOn1QhBlQ==/109951164068405964.jpg?param=140y140'
    }],
  },
  //
  getSong(e){
    console.log(e);
    var id = e.currentTarget.dataset.id;
    //跳转到歌单详情页面
    wx.navigateTo({
      url: '/pages/songDetail/songDetail'
    })
  ,
    app.globalData.getSongId = id;
  },
  tabSelect(e) {
    var name = e.currentTarget.dataset.name;
    console.log(name);
    wx.request({
      url: app.globalData.API_BASE + '/top/playlist?cat='+name,

      data: {
        idx: 1
      },
      success: res => {
        console.log(name);
        console.log(res);
        this.setData({
          images:res.data.playlists
        })
        // console.log(this.data.images)
        wx.hideLoading();
      }
    }),
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id-1)*60,
      name : name
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.towerSwiper('swiperList');
    wx.request({
      url: app.globalData.API_BASE + '/top/playlist/highquality',

      data: {
        idx: 1
      },
      success: res => {
        console.log(res.data.playlists);
        this.setData({
          images:res.data.playlists
        })
        wx.hideLoading();
      }
    }),
    //歌单种类列表
    wx.request({
      url: app.globalData.API_BASE + '/playlist/catlist',

      data: {
        idx: 1
      },
      success: res => {
        console.log(res.data.sub);
        this.setData({
          list:res.data.sub
        })
        wx.hideLoading();
      }
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
    DotStyle(e) {
    this.setData({
      DotStyle: e.detail.value
    })
  },
  // cardSwiper
  cardSwiper(e) {
    this.setData({
      cardCur: e.detail.current
    })
  },
  // towerSwiper
  // 初始化towerSwiper
  towerSwiper(name) {
    let list = this.data[name];
    for (let i = 0; i < list.length; i++) {
      list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
      list[i].mLeft = i - parseInt(list.length / 2)
    }
    this.setData({
      swiperList: list
    })
  },
  // towerSwiper触摸开始
  towerStart(e) {
    this.setData({
      towerStart: e.touches[0].pageX
    })
  },
  // towerSwiper计算方向
  towerMove(e) {
    this.setData({
      direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
    })
  },
  // towerSwiper计算滚动
  towerEnd(e) {
    let direction = this.data.direction;
    let list = this.data.swiperList;
    if (direction == 'right') {
      let mLeft = list[0].mLeft;
      let zIndex = list[0].zIndex;
      for (let i = 1; i < list.length; i++) {
        list[i - 1].mLeft = list[i].mLeft
        list[i - 1].zIndex = list[i].zIndex
      }
      list[list.length - 1].mLeft = mLeft;
      list[list.length - 1].zIndex = zIndex;
      this.setData({
        swiperList: list
      })
    } else {
      let mLeft = list[list.length - 1].mLeft;
      let zIndex = list[list.length - 1].zIndex;
      for (let i = list.length - 1; i > 0; i--) {
        list[i].mLeft = list[i - 1].mLeft
        list[i].zIndex = list[i - 1].zIndex
      }
      list[0].mLeft = mLeft;
      list[0].zIndex = zIndex;
      this.setData({
        swiperList: list
      })
    }
  }
})

原谅我因为实在没找到轮播图的接口在哪而用了假数据，谁让我是小白呢，你们就应该宠着我。 那个轮播图用的是colorUI组件库里的，因为我觉得它的轮播效果好看。唉~别人好看也是有理由的，一个towerSwiper写了那么一大串js。只能说一句大佬，优秀了。

现在来说说点击歌单之后会干嘛吧！它会跳到一个叫歌单详情的页面 songDetail.wml

<view class=" cu-card article {{isCard?'no-card':''}}">
  <view class="cu-item shadow">
    <view class="content">
      <image src="{{songList.coverImgUrl}}" mode="aspectFill"></image>
      <view class=" line desc">
        <view class="text-content">{{songList.name}}</view>
        <view>
          <view class="cu-avatar round margin-left" style="background-image:url({{songList.creator.avatarUrl}});"></view>
          <text>{{songList.creator.nickname}}</text>
          <image class="trans" style="width:18px;height:18px; margin-left:6px;" src="/images/bing.png" />
          <view class="text-content">{{songList.description}}</view>
          <!-- <view class="cu-tag bg-red light sm round"></view> -->
        </view>
      </view>
    </view>
  </view>
</view>
<view class="page">
  <view class="page__bd">
    <wux-sticky scrollTop="{{ scrollTop }}">
      <wux-sticky-item class="wux-sticky-item">
        <view class="title" slot="title">
          <text >播放全部</text> 
        </view>
        <view slot="content">
          <view class="demo-item" wx:for="{{searchHot}}" wx:key="index" data-index="{{index}}" data-tracksId="{{item.id}}" bindtap="audioPlay" data-author="{{item.ar[0].name}}" data-name="{{item.name}}" data-poster="{{item.al.picUrl}}">
            <view class="cu-list menu-avatar">
              <view class="cu-item">
                <view class="cu-avatar round lg" style="background-image:url({{item.al.picUrl}});"></view>
                <view class="content">
                  <view class="text-grey">{{item.name}}</view>
                  <view class="text-gray text-sm flex">
                    <text class="text-cut">{{item.ar[0].name}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </wux-sticky-item>
    </wux-sticky>
  </view>
  <view class="center">
    <view class="play fix">
      <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop bindplay="funplay" bindpause="funpause" bindtimeupdate="" bindended="funended" binderror="funerror"></audio>
      <view class="constrol">
        <view class="left" bindtap="bindLeft">
          <image src="../../images/left.png" />
        </view>
        <view class="right" bindtap="bindRight">
          <image src="../../images/right.png" />
        </view>
      </view>
    </view>
  </view>
</view>

songDetail.js

// miniprogram/pages/songDetail/songDetail.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex:null,
    songList:[],
    searchHot:[],
    scrollTop: 0,
    poster: 'https://p2.music.126.net/hti_a0LADoFMBHvOBwAtRA==/1369991500930171.jpg',
    name: '刚刚好',
    author: '薛之谦',
    src: 'http://m10.music.126.net/20190527001601/a50b490e6d56b2bd1dbc96eebaf0992e/ymusic/ffb9/a7e1/383b/b1a4c190345688313650bfae7ffb54c4.mp3',
    id : null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onPageScroll(e){
    // console.log('onPageScroll', e.scrollTop)
    this.setData({
        scrollTop: e.scrollTop,
    })
},
  onLoad: function (options) {
      //获取这个id的歌单详情
      wx.request({
        url: app.globalData.API_BASE + '/playlist/detail?id='+app.globalData.getSongId,
        // url: app.globalData.API_BASE + '/playlist/detail?id=24381616',
        data: {
         
        },
        success: res => {
          console.log(res);
          this.setData({
            searchHot:res.data.playlist.tracks,
            songList : res.data.playlist
          })
          
          wx.hideLoading();
        }
      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  audioPlay (e){
      console.log(e);
      //获取这首歌的数据
      wx.request({
        url: app.globalData.API_BASE + '/song/url?id='+e.currentTarget.dataset.tracksid,
        data: {
         
        },
        success: res => {
          console.log(res.data.data[0].url);
          let src = res.data.data[0].url;
          this.setData({
            src:src
          })
        }
      }),
      this.setData({
        author : e.currentTarget.dataset.author,
        name : e.currentTarget.dataset.name,
        poster : e.currentTarget.dataset.poster,
        id : e.currentTarget.dataset.tracksid,
        currentIndex : e.currentTarget.dataset.index,
      })
      setTimeout( ()=>{
        this.audioCtx.play()
      },500)
      
  },

  //上一首
  bindLeft(e){
    let song = this.audioCtx;
    console.log(song)
    return  new Promise((resolve, reject) => {
      //异步一定要有个回调函数
      let index = this.data.currentIndex;
      if(index==0){
        index=this.data.searchHot.length
      }
      wx.request({
        url: app.globalData.API_BASE + '/song/url?id='+this.data.searchHot[index-1].id,
  
        data: {
  
        },
        success: res => {
          console.log(res); 
          let src = res.data.data[0].url;
          // let author = this.data.searchHot[index-1].artists[0].name
          let author = this.data.searchHot[index-1].al.name
          this.setData({
            currentIndex : index-1,
            src:src,
            author : author,
          })
        },
      });
       //获取这首歌歌曲的信息
     wx.request({
      url: app.globalData.API_BASE + '/song/detail?ids='+this.data.searchHot[index-1].id,
      data: {
       
      },
      success: res => {
        // console.log(res)
        // console.log(res.data.songs[0].al.picUrl)
        // console.log(e.currentTarget.dataset.index);
        let poster = res.data.songs[0].al.picUrl;
        this.setData({
          poster:poster,
          name : res.data.songs[0].name
        })
      }
    })
    setTimeout( ()=>{
      this.audioCtx.play()
    },500)

    }).then(this.play())
  },
  play(){
    this.audioCtx.play()
  },
  //下一首
  bindRight(e){
    return  new Promise((resolve, reject) => {
      //异步一定要有个回调函数
      let index = this.data.currentIndex;
      if(index==this.data.searchHot.length-1){
        index=-1
      }
      console.log(index)
      wx.request({
        url: app.globalData.API_BASE + '/song/url?id='+this.data.searchHot[index+1].id,
  
        data: {
  
        },
        success: res => {
          console.log(res); 
          let src = res.data.data[0].url;
          let author = this.data.searchHot[index+1].al.name
          this.setData({
            currentIndex : index+1,
            src:src,
            author : author,
          })
        },
      });
       //获取这首歌歌曲的信息
     wx.request({
      url: app.globalData.API_BASE + '/song/detail?ids='+this.data.searchHot[index+1].id,
      data: {
       
      },
      success: res => {
        // console.log(res)
        // console.log(res.data.songs[0].al.picUrl)
        // console.log(e.currentTarget.dataset.index);
        let poster = res.data.songs[0].al.picUrl;
        this.setData({
          poster:poster,
          name : res.data.songs[0].name
        })
      }
    })
    setTimeout( ()=>{
      this.audioCtx.play()
    },1000)

    });
  },
})

这里最难的一个感觉就是那个播放全部的那个吸顶容器，找了好多组件库才找到。 还有很难受的一个地方就是当时写这个的时候，因为请求数据的时候存在异步，当时还不知道promise。但知道是存在异步的，我就用了个setTimeout函数让它晚点请求，从而解决异步，现在再去看，就感觉好傻啊，改也不太好改了(尝试了一下没改成），就算了。 还有在audio上加了两个控制播放上一首和下一首的view。其他的就没啥好说的了。

search页面

search.wml

<view class="search">
    <view class="search-header">
        <view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
            <view class="search-form round">
                <text class="cuIcon-search"></text>
                <input type="text" placeholder="输入搜索的关键词" confirm-type="search" bindinput="forName"></input>
            </view>
            <view class="action">
                <button class="cu-btn bg-gradual-green shadow-blur round" bindtap="search">搜索</button>
            </view>
        </view>
    </view>
    <view class="search-content">
        <view class="search-item" wx:for="{{searchHot}}" wx:key="index" bindtap="audioPlay" data-index="{{index}}" data-id="{{item.id}}" data-singer ="{{item.artists[0].name}}">
            <view class="search-item-top">
                <text class="title">{{item.first}}{{item.name}}</text>
            </view>
            <view class="search-item-desc">
                <text class="desc">{{item.artists[0].name}} - {{item.name}}</text>
            </view>
        </view>
    </view>
    <view class="play fix">
        <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop bindplay="funplay" bindpause="funpause" bindtimeupdate="" bindended="funended" binderror="funerror"></audio>
        <view class="constrol">
            <view class="left" bindtap="bindLeft">
                <image src="../../images/left.png" />
            </view>
            <view class="right" bindtap="bindRight">
                <image src="../../images/right.png" />
            </view>
        </view>
    </view>
</view>

search.js

// miniprogram/pages/discover/discover.js
    const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex:null,
    searchHot : [],
    poster: 'https://p2.music.126.net/hti_a0LADoFMBHvOBwAtRA==/1369991500930171.jpg',
    name: '刚刚好',
    author: '薛之谦',
    src: 'http://m10.music.126.net/20190527001601/a50b490e6d56b2bd1dbc96eebaf0992e/ymusic/ffb9/a7e1/383b/b1a4c190345688313650bfae7ffb54c4.mp3',
    id : null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //热搜
    wx.request({
      url: app.globalData.API_BASE + '/search/hot',

      data: {
      
      },
      success: res => {
        console.log(res.data);
        this.setData({
          searchHot:res.data.result.hots
        })
      }
    });
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')  
  },
  //单击播放音乐
  audioPlay (e){
    console.log(e);
    //获取这首歌的数据
    wx.request({
      url: app.globalData.API_BASE + '/song/url?id='+e.currentTarget.dataset.id,
      data: {
        
      },
      success: res => {
        // console.log(res); 
        let src = res.data.data[0].url;
        this.setData({
          src:src,
          author : e.currentTarget.dataset.singer,
        })
      }
    }),
     //获取这首歌歌曲的信息
     wx.request({
      url: app.globalData.API_BASE + '/song/detail?ids='+e.currentTarget.dataset.id,
      data: {
       
      },
      success: res => {
        // console.log(res)
        // console.log(res.data.songs[0].al.picUrl)
        console.log(e.currentTarget.dataset.index);
        let poster = res.data.songs[0].al.picUrl;
        this.setData({
          currentIndex : e.currentTarget.dataset.index,
          poster:poster,
          name : res.data.songs[0].name
        })
      }
    }),

    setTimeout( ()=>{
      this.audioCtx.play()
    },500)
    
},
  //获取到input框的内容
  forName(e){
    console.log(e.detail.value);
      this.setData({
        keywords : e.detail.value
      })
  },
  //根据keywords查找歌曲
  search(e){
    wx.request({
      url:app.globalData.API_BASE +'/search?keywords='+this.data.keywords,
      success:res =>{
        console.log(res.data.result.songs);
        this.setData({
          searchHot : res.data.result.songs,

        })
      }
    })
  },
  //上一首
  bindLeft(e){
    let song = this.audioCtx;
    console.log(song)
    return  new Promise((resolve, reject) => {
      //异步一定要有个回调函数
      let index = this.data.currentIndex;
      if(index==0){
        index=this.data.searchHot.length
      }
      wx.request({
        url: app.globalData.API_BASE + '/song/url?id='+this.data.searchHot[index-1].id,
  
        data: {
  
        },
        success: res => {
          console.log(res); 
          let src = res.data.data[0].url;
          let author = this.data.searchHot[index-1].artists[0].name
          this.setData({
            currentIndex : index-1,
            src:src,
            author : author,
          })
        },
      });
       //获取这首歌歌曲的信息
     wx.request({
      url: app.globalData.API_BASE + '/song/detail?ids='+this.data.searchHot[index-1].id,
      data: {
       
      },
      success: res => {
        // console.log(res)
        // console.log(res.data.songs[0].al.picUrl)
        // console.log(e.currentTarget.dataset.index);
        let poster = res.data.songs[0].al.picUrl;
        this.setData({
          poster:poster,
          name : res.data.songs[0].name
        })
      }
    })
    setTimeout( ()=>{
      this.audioCtx.play()
    },500)

    }).then(this.play())
  },
  play(){
    this.audioCtx.play()
  },
  //下一首
  bindRight(e){
    return  new Promise((resolve, reject) => {
      //异步一定要有个回调函数
      let index = this.data.currentIndex;
      if(index==this.data.searchHot.length-1){
        index=-1
      }
      console.log(index)
      wx.request({
        url: app.globalData.API_BASE + '/song/url?id='+this.data.searchHot[index+1].id,
  
        data: {
  
        },
        success: res => {
          console.log(res); 
          let src = res.data.data[0].url;
          let author = this.data.searchHot[index+1].artists[0].name
          this.setData({
            currentIndex : index+1,
            src:src,
            author : author,
          })
        },
      });
       //获取这首歌歌曲的信息
     wx.request({
      url: app.globalData.API_BASE + '/song/detail?ids='+this.data.searchHot[index+1].id,
      data: {
       
      },
      success: res => {
        // console.log(res)
        // console.log(res.data.songs[0].al.picUrl)
        // console.log(e.currentTarget.dataset.index);
        let poster = res.data.songs[0].al.picUrl;
        this.setData({
          poster:poster,
          name : res.data.songs[0].name
        })
      }
    })
    setTimeout( ()=>{
      this.audioCtx.play()
    },500)

    });
  },
})

主要功能就是，通过你输入的字来搜索你想听的歌。也是用的网易的接口。 其他页面就算了，感觉自己说了一大堆也没讲明白。哦，对了。那个朋友界面的接口网易云官方文档上有点问题，明明不需要登录就能获取，但我要先在浏览器打开一遍，才能再去微信者开发工具调用一遍接口请求才能获取的数据。 这是这个小程序的github地址想要的可以看下(其实没啥软用）

感觉也没人能坚持看到这里，毕竟好无聊。

这个还有好多东西没写，最近还要忙别的。所以先搁一搁。等以后有空我肯定还会回来的。因为那个签到功能和朋友界面的看评论，点赞啊还没写，那是自己最喜欢的。

其实我还有一个很喜欢的app就是最右，等以后变成厉害一点的小白，还想仿个最右。最右上的神评是真的有意思(默默的给最右推广一下)。毕竟喜欢的东西就应该去追求！ 啦啦啦，完结。 祝你们都能自己想要的样子！

avatar
文章
阅读
粉丝