音乐播放APP初步开发（一）

项目app页面的开发采用mui框架来实现，支持模拟器和移动端的运行，真机运行会提示安装hbuilder基座调试程序。似乎开发情况下只能再同一个网段下测试运行，跨网段就无法连接到资源数据。

窗口页面采用HTML5来显示。

index.html为应用首页，一般只需要实现底部选项卡即可，其他功能可以在主页面或其他页面去完善：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
</head>
<body>
    
    <!--底部选项卡-->
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init({
        subpages: [{
        url: "main.html",
        id: "main.html",
        styles: {
            top:'0px', //mui标题栏默认高度为45px；
            bottom:'50px' //默认为0px，可不定义；
            }
        }]
    });
        
        
    var ws=new WebSocket("ws://192.168.1.114:3721/app/app01");
    document.addEventListener("send_music",function (data) {
        var send_str=data.detail    //{to_user:"toy123",music:"sdata.album_name"}
        ws.send(JSON.stringify(send_str));
    })

    </script>
</body>
</html>

index.html代码

main.html是应用的主页面，实现了数据的列表展示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!--标题-->
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">音乐</h1>
    </header>
    <!--图片轮播-->
    <div class="mui-content">
        <div id="slider" class="mui-slider" >
          <div class="mui-slider-group mui-slider-loop" style="height:300px; width: auto;">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
              <a href="#">
                <img src="http://192.168.1.114:9527/get_lb/1.jpg">
              </a>
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
              <a href="#">
                <img src="http://192.168.1.114:9527/get_lb/1.jpg">
              </a>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
              <a href="#">
                <img src="http://192.168.1.114:9527/get_lb/2.jpg">
              </a>
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
              <a href="#">
                <img src="http://192.168.1.114:9527/get_lb/3.jpg">
              </a>
            </div>
            <!-- 第四张 -->
            <div class="mui-slider-item">
              <a href="#">
                <img src="http://192.168.1.114:9527/get_lb/4.jpg">
              </a>
            </div>
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
              <a href="#">
                <img src="http://192.168.1.114:9527/get_lb/1.jpg">
              </a>
            </div>
          </div>
          <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
          </div>
        </div>
    </div>
    
     <!--图文列表-->
    <ul class="mui-table-view" id="con_list">
        
    </ul>
    
    
    <script type="text/javascript">
    mui.init()
     mui.plusReady(function () {
        mui.post(window.serv+'/get_list',{
                
            },function(data){
                for (var i = 0; i < data.data.length; i++) {
                    creat_item(data.data[i])
                }
            },'json'
        );
    })
     
    function creat_item (content) {
        var li=document.createElement("li")
        li.className="mui-table-view-cell mui-media";
        var a=document.createElement("a")
        a.onclick=function () {
            mui.openWindow({
                url:"player.html",
                id:"player.html",
                extras:content
            })
        }
        var img=document.createElement("img")
        img.className="mui-media-object mui-pull-left";
        img.src=window.serv_img+content.music_img
        
        var div=document.createElement("div")
        div.className="mui-media-body"
        div.innerText=content.album_name
        var p=document.createElement("p")          
        p.className="mui-ellipsis"
        p.innerText=content.author_name
        
        li.appendChild(a)
        a.appendChild(img)
        a.appendChild(div)
        div.appendChild(p)
        
        document.getElementById("con_list").appendChild(li)
    }
    </script>
</body>
</html>

main.html代码

player.html歌曲的播放页面，并实现websocket连接远程控制播放曲目：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
        @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    
    .an {
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="title">正在播放</h1>
    </header>
    <div class="mui-content" style="text-align:center; margin-top: 20px;">
        <img class="an" src="" id="cover"/ style="height:150px; width:150px; border-radius:50%;">
    </div>
    
       <button type="button" id="zt" class="mui-btn mui-btn-yellow mui-btn-block">暂停</button>
    <button type="button" id="bf" class="mui-btn mui-btn-green mui-btn-block">播放</button>
    <button type="button" id="tz" class="mui-btn mui-btn-red mui-btn-block">停止</button>
    <button type="button" id="fs" class="mui-btn mui-btn-blue mui-btn-block">发送</button>
    
    
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    var sdata=null;
    var myplayer=null
    mui.plusReady(function () {
        sdata=plus.webview.currentWebview()
        document.getElementById("title").innerText="正在播放 - "+sdata.album_name
        document.getElementById("cover").src=window.serv_img+sdata.music_img
        myplayer=plus.audio.createPlayer(window.serv_music+sdata.play_url)
        myplayer.play()
    })
    
    document.getElementById('zt').addEventListener('tap',function () {
        myplayer.pause()    
    })
    document.getElementById('bf').addEventListener('tap',function () {
            myplayer.resume()
    })
    document.getElementById('tz').addEventListener('tap',function () {
            myplayer.stop()
    })
    document.getElementById('fs').addEventListener('tap',function () {
            var index=plus.webview.getWebviewById("HBuilder");
            mui.fire(index,'send_music',{to_user:"toy123",music:sdata.play_url});
    })
    
    </script>
</body>
</html>

player.html代码

为了避免hbuilder中的js频繁的给后端发送AJAX，更换ip,可以将ip设置为全部变量，在引用文件的js文件添加代码如下：

window.serv="http://192.168.1.114:9527";
window.serv_img=window.serv+"/get_photo/";
window.serv_music=window.serv+"/get_music/";

H5页面实现首页加载子页面main.html ：

mui.init({
        subpages: [{
        url: "main.html",
        id: "main.html",
        styles: {
            top:'0px', //mui标题栏默认高度为45px；
            bottom:'50px' //默认为0px，可不定义；为了不遮住index底部选项卡
            }
        }]
    });

图文列表的数据展示：

在不确定记录条数的情况下，会通过查询数据库，对数据迭代，去显示数据列表，所以在body主体里面只会有一个空列表元素：

<!--图文列表-->
    <ul class="mui-table-view" id="con_list">
        
    </ul>

通过JavaScript给后端发送post请求，去获取记录数，并迭代生成列表元素：

mui.init()
     mui.plusReady(function () {
        mui.post(window.serv+'/get_list',{
                
            },function(data){
                for (var i = 0; i < data.data.length; i++) {
                    creat_item(data.data[i])
                }
            },'json'
        );
    })　　　　　　#window.serv指向js文件中配置好的ip地址

返回的数据以字典形式推送给前端JavaScript ，迭代数据传递给creat_item去生成列表元素。

function creat_item (content) {
        var li=document.createElement("li")
        li.className="mui-table-view-cell mui-media";
        var a=document.createElement("a")
        a.onclick=function () {
            mui.openWindow({
                url:"player.html",
                id:"player.html",
                extras:content
            })
        }
        var img=document.createElement("img")
        img.className="mui-media-object mui-pull-left";
        img.src=window.serv_img+content.music_img　　　　　　　　#去后台请求对应图片信息数据
        
        var div=document.createElement("div")
        div.className="mui-media-body"
        div.innerText=content.album_name
        var p=document.createElement("p")          
        p.className="mui-ellipsis"
        p.innerText=content.author_name
        
        li.appendChild(a)
        a.appendChild(img)
        a.appendChild(div)
        div.appendChild(p)
        
        document.getElementById("con_list").appendChild(li)
    }

后端会有路由去处理这个请求：

在实际项目中，为了便于扩展，通常会采用蓝图注册到app的方式去处理请求。处理请求文件放到serv目录下。

获取数据列表：

from flask import Blueprint,jsonify
from setting import mongoDB,RET

content=Blueprint("content",__name__)

@content.route('/get_list',methods=["POST",])
def get_list():
    music=list(mongoDB.music.find({}))
    for index,item in enumerate(music):
        music[index]["_id"]=str(item.get("_id"))
    RET["code"]=0
    RET["msg"]="查询列表数据"
    RET["data"]=music
    return jsonify(RET)

列表数据显示完成，点击列表，实现跳转播放页面player.html ：

a.onclick=function () {
            mui.openWindow({
                url:"player.html",
                id:"player.html",
                extras:content
            })
        }

将字典数据传递给新页面player.html，在新页面获取传递过来的数据字典：

并获取播放曲目图片和歌曲名，创建一个播放对象来播放歌曲

 mui.init()
    var sdata=null;
    var myplayer=null
    mui.plusReady(function () {
        sdata=plus.webview.currentWebview()
        document.getElementById("title").innerText="正在播放 - "+sdata.album_name
        document.getElementById("cover").src=window.serv_img+sdata.music_img
        myplayer=plus.audio.createPlayer(window.serv_music+sdata.play_url)　　　　　　　　#去后台请求音乐数据
        myplayer.play()
    })

至此已经能完成图文列表正常显示数据，点击列表，打开播放页面，播放歌曲。效果如图所示：

关于图片的旋转可以通过设置img的样式来实现：

<div class="mui-content" style="text-align:center; margin-top: 20px;">
        <img class="an" src="" id="cover"/ style="height:150px; width:150px; border-radius:50%;">
    </div>

style样式设置：

<style type="text/css">
        @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    
    .an {
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }
    </style>

音乐播放APP初步开发（一）

猜你喜欢