项目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>
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>
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>
为了避免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>