微信小程序初试-----音乐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单位目前还能使用。


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/weixin-small-demo.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com