移动端开发(HyBrid App)
复习
什么是APP:就是安卓或者苹果上的软件
APP开发多种模式:
- web app : 内嵌浏览器,好处(开发快)瑕疵(用户体验差,功能不够强大)
- 原生开发:就是安卓开发安卓app 、ios开发苹果app 好处:用户体验度高,瑕疵:成本大
- 混合app:使用html + css + js 就可以开发app并且一套代码就可以搞定安卓和苹果app
注册apicloud账号并且创建app应用
安装模拟器
sublime 配合模拟器开发使用
设置APP的logo和引导页
实战广场舞app静态页面
■ 实战案例之广场舞App静态页面
1、顶部导航栏的制作
1)效果图
代码
- 步骤1:将auicss2的css、script、image文件夹拖拽到框架中
- 步骤2:头部代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>Hello APP</title>
<link rel=”stylesheet” type=”text/css” href=”./css/api.css” />
<link rel=”stylesheet” type=”text/css” href=”./css/aui.css” />
<style type=”text/css”>
.aui-bar-nav { background: #FD4E56; }
</style>
</head>
<body>
<div id=”wrap”>
<div id=”header”>
<header class=”aui-bar aui-bar-nav”>热门</header>
</div>
<div id=”main”>
哈哈
</div>
<div id=”footer”>
</div>
</div>
</body>
<script type=”text/javascript” src=”./script/api.js”></script>
<script type=”text/javascript”>
apiready = function(){
};
</script>
</html>
2、底部导航栏的切换
1)效果图
2)代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>Hello APP</title>
<link rel=”stylesheet” type=”text/css” href=”./css/api.css” />
<link rel=”stylesheet” type=”text/css” href=”./css/aui.css” />
<style type=”text/css”>
.aui-bar-nav { background: #FD4E56; }
</style>
<style type=”text/css”>
#demo {
width: 4rem;
height: 4rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -2rem;
margin-top: -2rem;
background-color: #e0e0e0;
border-radius: 50%;
line-height: 4rem;
text-align: center;
color: #212121;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”header”>
<header class=”aui-bar aui-bar-nav” id=”title”>热门</header>
</div>
<div id=”main”>
</div>
<footer class=”aui-bar aui-bar-tab” id=”footer”>
<div class=”aui-bar-tab-item aui-active” tapmode>
<i class=”aui-iconfont aui-icon-home”></i>
<div class=”aui-bar-tab-label”>热门</div>
</div>
<div class=”aui-bar-tab-item” tapmode>
<i class=”aui-iconfont aui-icon-star”></i>
<div class=”aui-bar-tab-label”>广场</div>
</div>
<div class=”aui-bar-tab-item” tapmode>
<i class=”aui-iconfont aui-icon-wechat-circle”></i>
<div class=”aui-bar-tab-label”>动态</div>
</div>
<div class=”aui-bar-tab-item” tapmode>
<div class=”aui-dot”></div>
<i class=”aui-iconfont aui-icon-my”></i>
<div class=”aui-bar-tab-label”>关于</div>
</div>
</footer>
</div>
</body>
<script type=”text/javascript” src=”./script/api.js”></script>
<script type=”text/javascript” src=”./script/aui-tab.js” ></script>
<script type=”text/javascript”>
apiready = function(){
api.parseTapmode();
//默认打开热门页面
openPage(‘hot’, ‘热门’);
}
var tab = new auiTab({
element:document.getElementById(“footer”)
},function(ret){
console.log(ret);
if(ret){
//document.getElementById(“demo”).textContent = ret.index;
switch (ret.index) {
case 1:
openPage(‘hot’, ‘热门’);
break;
case 2:
openPage(‘guangchang’, ‘广场’);
break;
case 3:
openPage(‘action’, ‘动态’);
break;
case 4:
openPage(‘about’, ‘关于我们’);
break;
default:
openPage(‘hot’, ‘热门’);
break;
}
}
});
//打开页面方法
function openPage(pageName, title) {
var header = $api.byId(‘header’);
//适配iOS7+,Android4.4+状态栏沉浸式效果,详见config文档statusBarAppearance字段
$api.fixStatusBar(header);
//动态计算header的高度,因iOS7+和Android4.4+上支持沉浸式效果,
//因此header的实际高度可能为css样式中声明的44px加上设备状态栏高度
//其中,IOS状态栏高度为20px,Android为25px
var headerH = $api.offset(header).h;
//footer高度为css样式中声明的30px
var footerH = 50;
//frame的高度为当前window高度减去header和footer的高度
var frameH = api.winHeight – headerH – footerH;
api.openFrame({
name: ‘main’,
url: ‘html/’+pageName+’.html’,
bounces: true,
rect: {
x: 0,
y: headerH,
w: ‘auto’,
h: frameH
}
});
//切换头部标题
$api.byId(‘title’).innerHTML = title;
}
</script>
</html>
热门页(frame_host.html)
1)效果图
2)代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,aItemress=no”>
<title>热门</title>
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
<style type=”text/css”>
.aui-content { padding: 0 8px; }
.aui-content .aui-card-list { padding: 0px 6px; }
.aui-content .aui-card-list-footer { padding: 0px; }
</style>
</head>
<body>
<section class=”aui-content”>
<div class=”aui-card-list”>
<div class=”aui-card-list-content”>
<img src=”../image/demo.png” />
</div>
<div class=”aui-card-list-footer”>
是打发斯蒂芬
</div>
</div>
<div class=”aui-card-list”>
<div class=”aui-card-list-content”>
<img src=”../image/demo.png” />
</div>
<div class=”aui-card-list-footer”>
是打发斯蒂芬
</div>
</div>
<div class=”aui-card-list”>
<div class=”aui-card-list-content”>
<img src=”../image/demo.png” />
</div>
<div class=”aui-card-list-footer”>
是打发斯蒂芬
</div>
</div>
</section>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript”>
apiready = function(){
api.parseTapmode();
}
</script>
</html>
广场页(frame_square.html)
1)效果图
2)代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,aItemress=no”>
<title>AUI快速完成布局</title>
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
<style type=”text/css”>
/*大层*/
.container{margin: 0 auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;}
/*一个内容层*/
.item{ padding: 1em;margin: 0 0 1em 0;-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid;/*border: 1px solid #000;*/ background: #fff;}
.item img{ width: 100%;margin-bottom:10px;}
</style>
</head>
<body>
<div class=”container”>
<div class=”waterfall”>
<div class=”item”>
<img src=”../image/1.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/5.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/2.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/3.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/4.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/1.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/5.png”>
<p>瀑布流效果</p>
</div>
<div class=”item”>
<img src=”../image/4.png”>
<p>瀑布流效果</p>
</div>
</div>
</div>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript”>
apiready = function(){
api.parseTapmode();
}
</script>
</html>
动态页(frame_news.html)
1)效果图
2)代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>AUI快速完成布局</title>
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
</head>
<body>
<div class=”aui-content aui-margin-b-15″>
<ul class=”aui-list aui-media-list”>
<li class=”aui-list-item aui-list-item-middle”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m1.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
<li class=”aui-list-item aui-list-item-middle”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m2.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
<li class=”aui-list-item aui-list-item-middle”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m3.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
<li class=”aui-list-item aui-list-item-middle”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m4.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript”>
</script>
</html>
关于页(frame_about.html)
1)效果图
2)代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>AUI快速完成布局</title>
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
</head>
<body>
<div class=”aui-content aui-margin-b-15″>
<ul class=”aui-list aui-media-list”>
<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m1.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m2.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m3.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m4.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript”>
function openMusic () {
api.openFrame({
name: ‘frame_music’,
url: ‘./music.html’,
bounces: true,
rect: {
x: 0,
y: 0,
w: ‘auto’,
h: ‘auto’
}
});
}
</script>
</html>
音乐详情页(frame_music.html)
1)效果图
2)代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>甜椒广场舞</title>
<link rel=”stylesheet” type=”text/css” href=”../css/api.css” />
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
<style type=”text/css”>
.aui-bar-dark {background-color:#E65A65;}
#music {padding:50px 0; text-align:center;}
#music img {margin: auto; border-radius:100px; width:200px; height:200px;}
#title {text-align:center; margin: 10px 0px;}
.aui-range { width: 100%;}
/*.aui-range input[type=’range’] { background-color: #E65A65; }*/
.aui-range input[type=’range’]::-webkit-slider-thumb { background-color: #E65A65; }
</style>
</head>
<body>
<header id=”aui-header” class=”aui-bar aui-bar-nav aui-bar-dark”>
<a class=”aui-pull-left aui-btn” onclick=”closeWin()”>
<span class=”aui-iconfont aui-icon-left”></span>
</a>
<div class=”aui-title”>甜椒广场舞</div>
</header>
<div id=’music’>
<img src=’../image/music.png’ />
</div>
<h5 id=’title’>买买买 – By2</h5>
<br />
<div class=”aui-list-item-input”>
<div class=”aui-range”>
<input type=”range” class=”aui-range” value=”0″ max=”100″ min=”1″ step=”1″ id=”range”>
<div class=”aui-range-tip aui-hide”>0</div>
</div>
</div>
<br />
<p><div class=”aui-btn aui-btn-danger aui-btn-block”>播放音乐(start)</div></p>
<br />
<p><div class=”aui-btn aui-btn-danger aui-btn-block”>停止播放(pause)</div></p>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript” src=”../script/aui-range.js” ></script>
<script type=”text/javascript”>
var range = new auiRange({
element:document.getElementById(“range”)
},function(ret){
})
apiready = function(){
api.parseTapmode();
}
function closeWin() {
api.closeFrame({
name: ‘frame_music’
});
}
</script>
</html>
一、使用TP完成APP后台
1、需求
后台可以动态添加、显示音乐数据
实现
见tools
App与TP框架整合(App接口)
1、App接口请求/运行原理图
使用TP框架开发App接口
<?php
namespace Api\Controller;
use Think\Controller;
class MusicController extends Controller
{
public function index()
{
$offset = I(‘post.offset’); // 相当于 $_POST[‘id’]
$limit = I(‘post.limit’); // 相当于 $_POST[‘id’]
//步骤1:从数据库获取数据
$musicData = M(‘music’)->order(‘id desc’)->limit($offset, $limit)->select();
//步骤2:数据过滤
foreach ($musicData as $key => $value) {
$musicData[$key][‘logo’] = ‘http://192.168.72.56/tp32_app_guangchangwu/Public/Uploads/’ . $musicData[$key][‘logo’];
}
//步骤3:响应json数据
echo json_encode($musicData);
}
}
在App中使用api.ajax调用App接口
接口
4、JQ遍历显示数据
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>AUI快速完成布局</title>
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
</head>
<body>
<div class=”aui-content aui-margin-b-15″>
<ul class=”aui-list aui-media-list”><!–
<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m1.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li> –>
</ul>
</div>
</body>
<script src=”https://cdn.bootcss.com/jquery/1.8.3/jquery.js”></script>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript”>
apiready = function(){
//脚下留心:必须写本机的ip 因为模拟器也是一个单独的操作系统
api.ajax({
url: ‘http://192.168.72.56/tp32_app_guangchangwu/index.php/api/music/index’,
method: ‘post’,
data: {
values: {
offset: 0,
limit: 2,
}
}
}, function(ret, err) {
if (ret) {
//api.alert({ msg: JSON.stringify(ret) });
var html = ”;
$.each(ret, function(i, itemObj) {
html += ‘<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>’ +
‘<div class=”aui-media-list-item-inner”>’ +
‘<div class=”aui-list-item-media wechat-avatar”>’ +
‘<img src=”‘+itemObj.logo+'” />’ +
‘</div>’ +
‘<div class=”aui-list-item-inner”>’ +
‘<div class=”aui-list-item-text”>’ +
‘<div class=”aui-list-item-title”>’+itemObj.title+'</div>’ +
‘<div class=”aui-list-item-right”>》》</div>’ +
‘</div>’ +
‘<div class=”aui-list-item-text aui-font-size-12″>’ +
itemObj.author + ‘</div>’ +
‘</div>’ +
‘</div>’ +
‘</li>’;
});
//拼接最终在页面显示
$(“ul”).html(html);
} else {
api.alert({ msg: JSON.stringify(err) });
}
});
}
function openMusic () {
api.openFrame({
name: ‘frame_music’,
url: ‘./music.html’,
bounces: true,
rect: {
x: 0,
y: 0,
w: ‘auto’,
h: ‘auto’
}
});
}
</script>
</html>
实现下拉的刷新
什么是下拉刷新
———————–
下拉刷新接口
api.setRefreshHeaderInfo({
loadingImg: ‘widget://image/refresh.png’,
bgColor: ‘#ccc’,
textColor: ‘#fff’,
textDown: ‘下拉刷新…’,
textUp: ‘松开刷新…’
}, function(ret, err) {
//在这里从服务器加载数据,加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
});
使用下拉刷新获取数据
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>AUI快速完成布局</title>
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
</head>
<body>
<div class=”aui-content aui-margin-b-15″>
<ul class=”aui-list aui-media-list”><!–
<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>
<div class=”aui-media-list-item-inner”>
<div class=”aui-list-item-media wechat-avatar”>
<img src=”../image/m1.png” />
</div>
<div class=”aui-list-item-inner”>
<div class=”aui-list-item-text”>
<div class=”aui-list-item-title”>张三</div>
<div class=”aui-list-item-right”>》》</div>
</div>
<div class=”aui-list-item-text aui-font-size-12″>
Hello AUI 2.0!
</div>
</div>
</div>
</li> –>
</ul>
</div>
</body>
<script src=”https://cdn.bootcss.com/jquery/1.8.3/jquery.js”></script>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript”>
apiready = function(){
//默认点击动态,发送请求,显示第一页数据
getData(0);
api.setRefreshHeaderInfo({
loadingImg: ‘widget://image/refresh.png’,
bgColor: ‘#ccc’,
textColor: ‘#fff’,
textDown: ‘下拉刷新…’,
textUp: ‘松开刷新…’
}, function(ret, err) {
//在这里从服务器加载数据,加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
getData(1);
api.refreshHeaderLoadDone();
});
}
function openMusic () {
api.openFrame({
name: ‘frame_music’,
url: ‘./music.html’,
bounces: true,
rect: {
x: 0,
y: 0,
w: ‘auto’,
h: ‘auto’
}
});
}
//全局变量起始位置
var offset = 0;
function getData(isAdd) {
if (isAdd) offset+=2;
//脚下留心:必须写本机的ip 因为模拟器也是一个单独的操作系统
api.ajax({
url: ‘http://192.168.72.56/tp32_app_guangchangwu/index.php/api/music/index’,
method: ‘post’,
data: {
values: {
offset: offset,
limit: 2,
}
}
}, function(ret, err) {
//将json对象数据转化为字符串
if (ret && JSON.stringify(ret) !== ‘[]’) {
//api.alert({ msg: JSON.stringify(ret) });
var html = ”;
$.each(ret, function(i, itemObj) {
html += ‘<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>’ +
‘<div class=”aui-media-list-item-inner”>’ +
‘<div class=”aui-list-item-media wechat-avatar”>’ +
‘<img src=”‘+itemObj.logo+'” />’ +
‘</div>’ +
‘<div class=”aui-list-item-inner”>’ +
‘<div class=”aui-list-item-text”>’ +
‘<div class=”aui-list-item-title”>’+itemObj.title+'</div>’ +
‘<div class=”aui-list-item-right”>》》</div>’ +
‘</div>’ +
‘<div class=”aui-list-item-text aui-font-size-12″>’ +
itemObj.author + ‘</div>’ +
‘</div>’ +
‘</div>’ +
‘</li>’;
});
//拼接最终在页面显示
//$(“ul”).html(html);
//append(); 后面追加
//prepend() 前面追加
$(‘ul’).prepend(html);
} else {
alert(‘没有更多数据’);
// api.alert({ msg: JSON.stringify(err) });
}
});
}
</script>
</html>
四、使用APICloud中的模块让音乐响起来
1、音乐详情页CD旋转
- 步骤1:广场舞文件夹引入旋转jq插件
- music页面引入jquery并且让cd转动起来
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>甜椒广场舞</title>
<link rel=”stylesheet” type=”text/css” href=”../css/api.css” />
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
<style type=”text/css”>
.aui-bar-dark {background-color:#E65A65;}
#music {padding:50px 0; text-align:center;}
#music img {margin: auto; border-radius:100px; width:200px; height:200px;}
#title {text-align:center; margin: 10px 0px;}
.aui-range { width: 100%;}
/*.aui-range input[type=’range’] { background-color: #E65A65; }*/
.aui-range input[type=’range’]::-webkit-slider-thumb { background-color: #E65A65; }
</style>
</head>
<body>
<header id=”aui-header” class=”aui-bar aui-bar-nav aui-bar-dark”>
<a class=”aui-pull-left aui-btn” onclick=”closeWin()”>
<span class=”aui-iconfont aui-icon-left”></span>
</a>
<div class=”aui-title”>甜椒广场舞</div>
</header>
<div id=’music’>
<img src=’../image/music.png’ />
</div>
<h5 id=’title’>买买买 – By2</h5>
<br />
<div class=”aui-list-item-input”>
<div class=”aui-range”>
<input type=”range” class=”aui-range” value=”0″ max=”100″ min=”1″ step=”1″ id=”range”>
<div class=”aui-range-tip aui-hide”>0</div>
</div>
</div>
<br />
<p><div class=”aui-btn aui-btn-danger aui-btn-block”>播放音乐(start)</div></p>
<br />
<p><div class=”aui-btn aui-btn-danger aui-btn-block”>停止播放(pause)</div></p>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript” src=”../script/aui-range.js” ></script>
<script type=”text/javascript” src=”../script/jquery.min.js” ></script>
<script type=”text/javascript” src=”../script/jquery.rotate.min.js” ></script>
<script type=”text/javascript”>
apiready = function(){
api.parseTapmode();
//默认打开旋转
startMusic();
}
//进度条拖拽
var range = new auiRange({
element:document.getElementById(“range”)
},function(ret){
})
//关闭当前窗口,返回动态列表页
function closeWin() {
api.closeFrame({
name: ‘frame_music’
});
}
/*光盘旋转*/
var angle = 0;
var timer;
function startMusic() {
//清除已存在的定时器
clearInterval(timer);
timer = setInterval(function(){
angle+=3;
$(“#music img”).rotate(angle);
},50);
}
//清除旋转
function stopMusic() {
clearInterval(timer);
}
</script>
</html>
音乐播放功能
1)添加模块
让本地支持模块调试
3、查看netAudio手册,让音乐响起来(播放/停止按钮)
1)播放
- 接口
2)停止
- 接口
完整代码
action.html
music.html
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
<title>甜椒广场舞</title>
<link rel=”stylesheet” type=”text/css” href=”../css/api.css” />
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
<style type=”text/css”>
.aui-bar-dark {background-color:#E65A65;}
#music {padding:50px 0; text-align:center;}
#music img {margin: auto; border-radius:100px; width:200px; height:200px;}
#title {text-align:center; margin: 10px 0px;}
.aui-range { width: 100%;}
/*.aui-range input[type=’range’] { background-color: #E65A65; }*/
.aui-range input[type=’range’]::-webkit-slider-thumb { background-color: #E65A65; }
</style>
</head>
<body>
<header id=”aui-header” class=”aui-bar aui-bar-nav aui-bar-dark”>
<a class=”aui-pull-left aui-btn” onclick=”closeWin()”>
<span class=”aui-iconfont aui-icon-left”></span>
</a>
<div class=”aui-title”>甜椒广场舞</div>
</header>
<div id=’music’>
<img src=’../image/music.png’ />
</div>
<h5 id=’title’>买买买 – By2</h5>
<br />
<div class=”aui-list-item-input”>
<div class=”aui-range”>
<input type=”range” class=”aui-range” value=”0″ max=”100″ min=”1″ step=”1″ id=”range”>
<div class=”aui-range-tip aui-hide”>0</div>
</div>
</div>
<br />
<p><div class=”aui-btn aui-btn-danger aui-btn-block” onclick=”startMusic()”>播放音乐(start)</div></p>
<br />
<p><div class=”aui-btn aui-btn-danger aui-btn-block” onclick=”stopMusic();”>停止播放(pause)</div></p>
</body>
<script type=”text/javascript” src=”../script/api.js” ></script>
<script type=”text/javascript” src=”../script/aui-range.js” ></script>
<script type=”text/javascript” src=”../script/jquery.min.js” ></script>
<script type=”text/javascript” src=”../script/jquery.rotate.min.js” ></script>
<script type=”text/javascript”>
apiready = function(){
api.parseTapmode();
//默认打开旋转+播放
startMusic();
}
//进度条拖拽
var range = new auiRange({
element:document.getElementById(“range”)
},function(ret){
})
//关闭当前窗口,返回动态列表页
function closeWin() {
api.closeFrame({
name: ‘frame_music’
});
}
/*光盘旋转*/
var angle = 0;
var timer;
function startMusic() {
//清除已存在的定时器
clearInterval(timer);
timer = setInterval(function(){
angle+=3;
$(“#music img”).rotate(angle);
},50);
//播放
var netAudio = api.require(‘netAudio’);
netAudio.play({
// path: ‘http://7xisq1.com1.z0.glb.clouddn.com/apicloud/0d0b81b8bd5ab81bda9ca54267eb9b98.mp3’
path: api.pageParam.musicUrl
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
//当前已经播放 ret.current
//总时间 ret.duraion 单位:秒
// alert(ret.current / ret.duration * 100);
$(‘.aui-range input’).val(ret.current / ret.duration * 100);
} else {
alert(JSON.stringify(err));
}
});
}
//清除旋转
function stopMusic() {
//暂停旋转
clearInterval(timer);
//暂停播放
var netAudio = api.require(‘netAudio’);
netAudio.pause();
}
</script>
</html>
4、拖动播放进度(拖动滑块到某一个位置时,让歌曲也在相应的位置播放)
//检测是否拖动,说明:只要是表单标签设置值,统一用jq的val方法
//点击用onclick
//点击之后让用户选择用:onchange
$(‘.aui-range input’).change(function(){
//获取拖拽的进度
var bofangjindu = $(‘.aui-range-tip’).html();
//设置播放进去
var netAudio = api.require(‘netAudio’);
netAudio.setProgress({
progress: bofangjindu
});
});
五、Vuejs框架
1、什么是vue
vue是用js写的一个web框架,它提供数据和视图的绑定。修改数据,视图自动更新。
2、vue.js的下载
下载地址:https://v1.vuejs.org/guide/installation.html
vue.js初体验
1)渲染数据
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body>
<div id=”app”>
{{ message }}
{{ data1 }}
{{ abc }}
</div>
<script type=”text/javascript” src=”./vue.js”></script>
<script type=”text/javascript”>
new Vue({
el: ‘#app’, //那个元素对象
data: {
message: ‘今天喜洋洋’,
data1: ‘今天喜洋洋2’,
abc: ‘打发斯蒂芬’,
}
});
</script>
</body>
</html>
2)双向绑定
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body>
<div id=”app”>
{{ message }}
{{ data1 }}
{{ abc }}
<input type=”text” name=”” v-model=”message”>
<input type=”text” name=”” v-model=”data1″>
</div>
<script type=”text/javascript” src=”./vue.js”></script>
<script type=”text/javascript”>
new Vue({
el: ‘#app’, //那个元素对象
data: {
message: ‘今天喜洋洋’,
data1: ‘今天喜洋洋2’,
abc: ‘打发斯蒂芬’,
}
});
</script>
</body>
</html>
3)渲染列表
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body>
<div id=”app”>
<ul>
<li v-for=”music in musicList”>{{ music.name }}</li>
</ul>
</div>
<script type=”text/javascript” src=”./vue.js”></script>
<script type=”text/javascript”>
new Vue({
el: ‘#app’,
data: {
musicList: [
{‘name’:’哈1′, ‘author’: ‘成大1’},
{‘name’:’哈11′, ‘author’: ‘成大2’},
{‘name’:’哈111′, ‘author’: ‘成大3’},
{‘name’:’哈1111′, ‘author’: ‘成大4’}
]
}
});
</script>
</body>
</html>
4、使用Vuejs遍历音乐替换JQ
步骤1:action.html引入vue
步骤2:在页面new Vue显示数据
︴扩展:视频播放
步骤1:安装模块,然后自定义loader
步骤2:查看手册,调用播放器
var moviePlayer = api.require(‘moviePlayer’);
moviePlayer.open({
rect:{
x: 0,
y: 0,
w:api.frameWidth,
h:300
},
styles:{
head:{
bg: ‘rgba(161,161,161,0.5)’,
height: 44,
y:20,
title:{
size:20,
color:’#fff’,
width:40,
leftMargin:10
},
backSize: 30,
backImg:’widget://image/back.png’,
customButtons:[{
w:30,
h:30,
rightMagin:10,
img:’widget://image/image/collect.png’,
imgSelected:’fs://image/collectSelected.png’,
}]},
foot:{
bg: ‘rgba(0,0,0,0.5)’,
height: 44,
palyBtn:{
size: 20,
playImg:’widget://image/play.png’,
pauseImg:’widget://image/pause.png’,
marginLeft:5
},
currentTimeLabel:{
textSize:14,
textColor:”#FFF”,
textWidth: 43,
marginLeft:5
},
seekBar:{
sliderImg:’widget://image/circle.png’,
sliderW : 20,
sliderH : 20,
progressColor: ‘#696969’,
progressSelected: ‘#76EE00’,
marginLeft:10,
marginRight:10
},
totalTimeLabel:{
textSize:14,
textColor:”#FFF”,
textWidth: 43,
marginRight:5
},
fullscreenBtn:{
size:20,
verticalImg:’widget://image/vertical.png’,
horizontalImg:’widget://image/horizontal.png’,
}
} },
path:’http://baobab.wdjcdn.com/1455782903700jy.mp4′,
autoPlay: true
},function(ret, err){
if(ret){
// alert(JSON.stringify(ret));
// } else {
// alert(JSON.stringify(err));
}
});