移动端开发（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>

<title>Hello APP</title>

.aui-bar-nav { background: #FD4E56; }

</style>

</head>

<body>

</div>

哈哈

</div>

</div>

</body>

apiready = function(){

};

</script>

</html>

2、底部导航栏的切换

1）效果图

2）代码

<!doctype html>

<html>

<head>

<title>Hello APP</title>

.aui-bar-nav { background: #FD4E56; }

</style>

#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>

</div>

</div>

</div>

</div>

</div>

</footer>

</div>

</body>

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({

url: ‘html/’+pageName+’.html’,

bounces: true,

rect: {

x: 0,

y: headerH,

w: ‘auto’,

h: frameH

}

});

//切换头部标题

$api.byId(‘title’).innerHTML = title;

}

</script>

</html>

广场页（frame_square.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<title>AUI快速完成布局</title>

/*大层*/

.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>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

<p>瀑布流效果</p>

</div>

</body>

apiready = function(){

api.parseTapmode();

}

</script>

</html>

动态页（frame_news.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<title>AUI快速完成布局</title>

</head>

<body>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</ul>

</div>

</body>

</script>

</html>

关于页（frame_about.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<title>AUI快速完成布局</title>

</head>

<body>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</div>

</div>

Hello AUI 2.0!

</div>

</li>

</ul>

</div>

</body>

function openMusic () {

api.openFrame({

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>

<title>甜椒广场舞</title>

.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>

</a>

<div class=”aui-title”>甜椒广场舞</div>

</header>

</div>

<br />

</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>

var range = new auiRange({

element:document.getElementById(“range”)

},function(ret){

})

apiready = function(){

api.parseTapmode();

}

function closeWin() {

api.closeFrame({

});

}

</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>

<title>AUI快速完成布局</title>

</head>

<body>

<ul class=”aui-list aui-media-list”><!–

</div>

</div>

Hello AUI 2.0!

</div>

</li> –>

</ul>

</div>

</body>

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>’ +

‘</li>’;

});

//拼接最终在页面显示

$(“ul”).html(html);

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

}

function openMusic () {

api.openFrame({

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>

<title>AUI快速完成布局</title>

</head>

<body>

<ul class=”aui-list aui-media-list”><!–

</div>

</div>

Hello AUI 2.0!

</div>

</li> –>

</ul>

</div>

</body>

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({

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>’ +

‘</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>

<title>甜椒广场舞</title>

.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>

</a>

<div class=”aui-title”>甜椒广场舞</div>

</header>

</div>

<br />

</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/jquery.min.js” ></script>

<script type=”text/javascript” src=”../script/jquery.rotate.min.js” ></script>

apiready = function(){

api.parseTapmode();

//默认打开旋转

startMusic();

}

//进度条拖拽

var range = new auiRange({

element:document.getElementById(“range”)

},function(ret){

})

//关闭当前窗口，返回动态列表页

function closeWin() {

api.closeFrame({

});

}

/*光盘旋转*/

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>

<title>甜椒广场舞</title>

.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>

</a>

<div class=”aui-title”>甜椒广场舞</div>

</header>

</div>

<br />

</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>

apiready = function(){

api.parseTapmode();

//默认打开旋转+播放

startMusic();

}

//进度条拖拽

var range = new auiRange({

element:document.getElementById(“range”)

},function(ret){

})

//关闭当前窗口，返回动态列表页

function closeWin() {

api.closeFrame({

});

}

/*光盘旋转*/

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>

</head>

<body>

</div>

new Vue({

el: ‘#app’, //那个元素对象

data: {

message: ‘今天喜洋洋’,

data1: ‘今天喜洋洋2’,

abc: ‘打发斯蒂芬’,

}

});

</script>

</body>

</html>

2）双向绑定

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

new Vue({

el: ‘#app’, //那个元素对象

data: {

message: ‘今天喜洋洋’,

data1: ‘今天喜洋洋2’,

abc: ‘打发斯蒂芬’,

}

});

</script>

</body>

</html>

3）渲染列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<li v-for=”music in musicList”>{{ music.name }}</li>

</ul>

</div>

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));

}

});

混合APP （二）HyBrid App Vue.JS、页面、TP后台、下拉刷新、模块使用

网站优化（一）MySQL 优化三范式、逆范式、存储引擎、列类型、枚举、慢查询日志、索引、千万级数据优化

混合APP （一）HyBrid App AUICSS、ApiCloud、Sublime真机同居、前端页面

混合APP （一）HyBrid App AUICSS、ApiCloud、Sublime真机同居、前端页面

发表回复取消回复

Search

About Me

Winston Lee

About Me

Categories

混合APP （二）HyBrid App Vue.JS、页面、TP后台、下拉刷新、模块使用

移动端开发（HyBrid App）

复习

■ 实战案例之广场舞App静态页面

1、顶部导航栏的制作

1）效果图

代码

2、底部导航栏的切换

1）效果图

2）代码

热门页（frame_host.html）

1）效果图

2）代码

广场页（frame_square.html）

1）效果图

2）代码

动态页（frame_news.html）

1）效果图

2）代码

关于页（frame_about.html）

1）效果图

2）代码

音乐详情页（frame_music.html）

1）效果图

2）代码

一、使用TP完成APP后台

1、需求

实现

App与TP框架整合（App接口）

1、App接口请求/运行原理图

使用TP框架开发App接口

在App中使用api.ajax调用App接口

4、JQ遍历显示数据

实现下拉的刷新

什么是下拉刷新

下拉刷新接口

使用下拉刷新获取数据

四、使用APICloud中的模块让音乐响起来

1、音乐详情页CD旋转

音乐播放功能

1）添加模块

让本地支持模块调试

3、查看netAudio手册，让音乐响起来（播放/停止按钮）

1）播放

2）停止

完整代码

4、拖动播放进度（拖动滑块到某一个位置时，让歌曲也在相应的位置播放）

五、Vuejs框架

1、什么是vue

2、vue.js的下载

vue.js初体验

1）渲染数据

2）双向绑定

3）渲染列表

4、使用Vuejs遍历音乐替换JQ

︴扩展：视频播放

网站优化（一）MySQL 优化 三范式、逆范式、存储引擎、列类型、枚举、慢查询日志、索引、千万级数据优化

混合APP （一）HyBrid App AUICSS、ApiCloud、Sublime真机同居、前端页面

混合APP （一）HyBrid App AUICSS、ApiCloud、Sublime真机同居、前端页面

发表回复 取消回复

Search

About Me

Winston Lee

About Me

Categories

Tags

网站优化（一）MySQL 优化三范式、逆范式、存储引擎、列类型、枚举、慢查询日志、索引、千万级数据优化

发表回复取消回复