做有态度的前端团队

网易FEG前端团队

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

微信小程序最近很火,所以我也来试试这个东东,看看它跟我们平时的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很像,可以理解为rempx的结合版,默认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.jsreactangularjs这类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
         });
     });

五、效果预览

23a3748f-a420-4416-acf4-93dec527d5dc.png

后记

UI做得不咋滴,没用开源的一些CSS库

微信小程序目前还处于测试阶段,开发模式上是借鉴mvvm框架,但由于不能操作dom,也不是基于浏览器的,所以也不能操作window和document这些,目前大部分的js库都无法使用,css的库,还是可以用,毕竟px和rem单位目前还能使用。

手机阅读请扫描下方二维码:

已有 1 条评论

  1. xiejianan

    可以简单的为小程序重构一下css库 不过不知道css3的支持效果如何

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif