微信小程序初试-----音乐Demo

作者: floyd 日期: 2016-10-09

158883

微信小程序最近很火，所以我也来试试这个东东，看看它跟我们平时的Html5有什么区别？

官方有提供下载和新建项目的教程，这里就不重复，可以先查看这里和下载：请猛戳我

项目文件目录结构

新建项目后，默认的如下

    pages //所有页面(也可以叫窗口)存放的文件夹
        |--index //默认显示的第一个页面(窗口)
            |--index.js    //页面的脚本逻辑
            |--index.wxml  //页面结构内容
            |--index.wxss  //页面样式
        |--logs //另外一个页面，结构跟上面类似
    utils  //工具文件夹
        |--util.js //工具类
    app.js //项目启动的主入口文件
    app.json  //项目的主配置文件
    app.wxss  //项目公共默认样式

页面中的三个文件：js、wxml、wxss，其实就是微信版的js、html、css，在此基础上增加了一些微信特有的东西上去

一、配置顶条和底部导航

小程序的底部导航和顶条，是需要使用app.json配置文件来配置

    {
      "pages":[ //配置小程序中全部的页面地址，必须全都写在这里
        "pages/index/index",  //路径就是上面结构，去掉最后的后缀
        "pages/logs/logs"
      ],
      "window":{  //配置顶条内容
        "backgroundTextStyle":"light", //文本样式，只有light和dark
        "navigationBarBackgroundColor": "#000", //顶条背景色
        "navigationBarTitleText": "音乐Demo", //顶条标题
        "navigationBarTextStyle":"white" //顶条文字颜色
      },
      "tabBar": { //底部导航配置
        "color" : "black", //导航文字颜色
        "selectedColor" : "blue", //导航被选中的文字颜色
        "backgroundColor" : "white", //导航背景色
        "list": [{ //导航列表
          "pagePath": "pages/index/index", //点击后跳转的页面地址，需要上面有配置
          "text": "首页", //导航标题
          "iconPath" : "img/user.png", //导航对应的默认icon
          "selectedIconPath" : "img/user.png" //导航被选中时的icon
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志",
          "iconPath" : "img/lock.png",
          "selectedIconPath" : "img/lock.png"
        }]
      }
    }

二、样式wxss

小程序是使用后缀名为.wxss的样式文件，总体来说跟平时写的css差不多，显示的效果也类似，可以理解是移动端web的开发

    .title {
      padding-top:20rpx;
      padding-bottom: 5rpx;
      width: 100%;
      text-align: center;
      border-bottom:1rpx solid #aaa;
    }
    
    .list-scroll{
    
      height:1080rpx;
    }
    .list {
      overflow: hidden;
      padding:20rpx;
      border-bottom: 1rpx solid #ddd;
    }
    .list.select {
      color : green;
    }
    .list .icon{
      width:50rpx;
      height:50rpx;
      border-radius: 50%;
      background-color:#FF7200;
      float: left;
      text-align: center;
      line-height: 50rpx;
    }
    .list .icon.nobg{
      background: none;
    }
    .list .name {
      float:left;
      margin-left:10rpx;
    }
    
    .play-controller {
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
      height:100rpx;
      background-color: black;
    }
    .play-controller image {
      width:100rpx;
      height:100rpx;
      float:left;
    }
    .play-controller text{
      color:white;
      float: left;
      margin:20rpx 0 0 20rpx;
    }

这里会比平时多出一个单位：rpx，跟我们px很像，可以理解为rem和px的结合版，默认1rpx=1px，在宽度是750px的情况下。其余按照比例等比例缩放，所以我们开发的时候也可以使用rpx这个单位

三、结构wxml

小程序使用跟html语言类似的标记语言，不过多数html的标记是不能使用的，需要使用微信固有的那些

    <view class="container"> //用view代替div
      <view class="title">酷狗500强</view>

      <loading hidden="{{!isload}}"> //加载组件，会在居中显示一个加载动画
        加载中...
      </loading>
    
      <scroll-view class="list-scroll" scroll-y="true" bindscrolltolower="scrollEnd"> //带滚动条的div，显示音乐列表
    
        <block wx:for="{{list}}" wx:for-item="song" wx:for-index="index"> //block就是用来组合view用
          <view class="list {{index == playIndex?'select':''}}" data-id="js_{{index}}" data-hash="{{song.hash}}" bindtap="playSong">
    
            <view class="icon nobg" wx:if="{{index == playIndex}}">
                <icon type="success" size="25"/> //icon组件，显示微信内置的几个小图标
            </view>
            <view class="icon" wx:else>{{index+1}}</view>
            <text class="name">{{song.filename}}</text> //文本组件，作用类似span
          </view>
        </block>
    
      </scroll-view>
    
      <view class="play-controller" wx:if="{{playIndex > -1}}"> //这里是显示音乐播放的控制
        <image src="{{play.src}}"></image>
        <text>{{play.name}}</text>
      </view>
    
    </view>

如果你接触过vue.js、react、angularjs这类mvvm框架的话，上面标签代码就很容易看懂了，模板语法直接写在标签上面，简单介绍一下：

{{}}这种表示使用或者输出变量内容
wx:if表示用条件判断
wx:for表示循环

变量从哪来的？当然是写在js里面

四、逻辑js

js代码跟原生js的差不多，多了些微信的API调用，其他暂时没发现

    //默认js的内容
    Page({
      //data内的变量就是给上面wxml使用的
      data: {
        list : [],
        playIndex : -1,
        isload : true,
        page : 1,
        play : {},
        action : {}
      },
      //页面打开完毕后调用的回调
      onLoad: function () {
      }
    })

1、加载音乐列表

这里调用的kugou的接口，微信调用是不存在跨域问题，可以随意调用

    onLoad : function(){

        var that = this;
        //使用微信提供的wx.request拉取接口数据
        wx.request({
          url: 'http://m.kugou.com/rank/info/',
          data: {
            rankid : 8888,
            page : that.data.page,
            json : true
          },
          header: {
              'Content-Type': 'application/json'
          },
          //接口请求成功后回调
          success: function(res) {
            //使用this.setData方法，修改data的数据，修改完后，页面会自动刷新使用新的数据
            //设置歌曲列表，设置加载动画为false，这样就加载动画就会消失
            that.setData({
              list : res.data.songs.list,
              isload : false
            });
          }
        });
    }

2、播放音乐

这里需要做三件事情才能完成播放音乐

2.1 绑定点击事件

    <view class="list {{index == playIndex?'select':''}}" data-id="js_{{index}}" data-hash="{{song.hash}}" bindtap="playSong">

事件绑定是在wxml中绑定，其中bindtap属性，就是指点击事件，属性值就是绑定的方法，方法定义是在js中

2.2 设置对应的回调事件

    Page({
        data : {},
        playSong : function(){
            
        }
    });

事件绑定，就是定义一个函数跟data同级就可以了，这样就能关联起来

2.3 调用接口，播放音乐

    //获取歌曲的id，id值是在标签上的data-hash值上
    var hash = param.currentTarget.dataset.hash;
    //调用接口，获取歌曲实际的MP3地址
     wx.request({
      url : "http://m.kugou.com/app/i/getSongInfo.php",
      data : {
        cmd : "playInfo",
        hash : hash,
        from : "mkugou"
      },
      header: {
          'Content-Type': 'application/json'
      },
      success : function(ret){
        var url = ret.data.url;
        //设置正在播放的歌曲
        that.setData({
          playIndex : index,
          name : that.data.list[index].filename,
        });
        //调用微信的API，播放背景音乐
        wx.playBackgroundAudio({
           dataUrl: url,
           title: that.data.list[index].filename
         });
     });