上篇文章**从零开发手机app之歌曲列表接口及文件访问路由**我们在服务端做好了歌曲列表接口和静态文件访问的接口，接下来我们现在安卓上调用下以上接口进行测试。
测试之前先考虑如何在将前端打包在安卓上，我这里选择的是Dcloud家的产品，uni-app和mui，会用vue之后感觉有时候使用jquery操作节点很繁琐，所以刚开始选择的uni-app，随便拉了一点代码打包发现并不是我想要的样子，不想在这上面浪费太多，还是先用mui把功能给实现出来。
先来预览下最终的效果
![]()
环境准备
HBuilder X一枚，人家的产品配套人家的开发工具才能最快的提高开发效率
安卓手机或安卓模拟器，本人使用的是mumu模拟器
使用模拟器要在HBuilder中修改下端口“运行”—>“运行到手机或模拟器”—>“Android模拟器端口设置”，设置端口为7555，如果不能正常连接模拟器可以在以上设置中找到adb路径，本人的位置在“F:/迅雷下载/HBuilderX.2.2.0.20190810.full/HBuilderX/plugins/launcher/tools/adbs/adb.exe”。
前端开发
我们这里先创建一个首页和设置页面，本文只说首页歌曲列表
基础页面
默认的index.html作为我们的基础页面，存放底部选项卡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="home">
<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" id="setttings">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'home.html',
id:'home.html',
styles:{
top:'0px',
bottom:'50px'
}
}]
});
document.getElementById('setttings').addEventListener('tap',function () {
mui.openWindow({
url:"settings.html",
id:"settings.html",
styles:{
top:'0px',
bottom:'50px'
}
})
})
document.getElementById('home').addEventListener('tap',function () {
mui.openWindow({
url:"home.html",
id:'home.html',
styles:{
top:'0px',
bottom:'50px'
}
})
})
</script>
</html>
|
首页
我们创建home页面作为我们的首页，用来显示歌曲列表。该文件需要用到请求接口了，为了后续其他文档中能方便使用接口地址，我们选择将接口地址放在公共文件mui.js文件中进行存放
mui.js文件中上方加入我们的接口地址
1
2
3
| window.base_url = "http://10.10.10.238:9859";
window.images_url = window.base_url + "/images/";
window.media_url = window.base_url + "/media/";
|
home代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="music_list"></ul>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui.get(window.base_url+'/songs',
{},
function(res){
res.data.forEach(function(item, index){
item.pic = window.images_url + item.pic
html_li = `<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="${item.pic}">
<div class="mui-media-body">
${item.title}
<p class="mui-ellipsis">${item.author}-${item.releaseDate}</p>
</div>
</a>
</li>`;
document.getElementById("music_list").insertAdjacentHTML('beforeend', html_li)
})
}
)
})
</script>
</html>
|
测试首页
环境准备中我们设置好了连接的模拟器，此时我们在“运行”-》“运行到手机或模拟器”-》“运行在设备mumu”，打开模拟器首次将为我们安装一个Hbuilder的app，首次较慢，接着会自动打开，展示首页，效果就是本文开始展示的效果。
