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

Mr.Lee — Sat, 19 May 2018 14:58:52 +0000

移动端开发（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：头部代码

Hello APP

哈哈

2、底部导航栏的切换

1）效果图

2）代码

Hello APP

广场页（frame_square.html）

1）效果图

2）代码

AUI快速完成布局

瀑布流效果

动态页（frame_news.html）

1）效果图

2）代码

AUI快速完成布局

张三

》》

Hello AUI 2.0!

张三

》》

Hello AUI 2.0!

张三

》》

Hello AUI 2.0!

张三

》》

Hello AUI 2.0!

关于页（frame_about.html）

1）效果图

2）代码

AUI快速完成布局

张三

》》

Hello AUI 2.0!

张三

》》

Hello AUI 2.0!

张三

》》

Hello AUI 2.0!

张三

》》

Hello AUI 2.0!

音乐详情页（frame_music.html）

1）效果图

2）代码

甜椒广场舞

买买买 – By2

播放音乐(start)

停止播放(pause)

一、使用TP完成APP后台

1、需求

后台可以动态添加、显示音乐数据

实现

见tools

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

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

使用TP框架开发App接口

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遍历显示数据

AUI快速完成布局

张三

》》

Hello AUI 2.0!

实现下拉的刷新

什么是下拉刷新

———————–

下拉刷新接口

api.setRefreshHeaderInfo({

loadingImg: ‘widget://image/refresh.png’,

bgColor: ‘#ccc’,

textColor: ‘#fff’,

textDown: ‘下拉刷新…’,

textUp: ‘松开刷新…’

}, function(ret, err) {

//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态

});

使用下拉刷新获取数据

AUI快速完成布局

张三

》》

Hello AUI 2.0!

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

1、音乐详情页CD旋转

步骤1：广场舞文件夹引入旋转jq插件

music页面引入jquery并且让cd转动起来

甜椒广场舞

买买买 – By2

播放音乐(start)

停止播放(pause)

音乐播放功能

1）添加模块

让本地支持模块调试

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

1）播放

接口

2）停止

接口

完整代码

action.html

music.html

甜椒广场舞

买买买 – By2

onclick=”startMusic()”>播放音乐(start)

onclick=”stopMusic();”>停止播放(pause)

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）渲染数据

测试

2）双向绑定

测试

3）渲染列表

测试

{{ music.name }}

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后台、下拉刷新、模块使用

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

买买买 – By2

一、使用TP完成APP后台

1、需求

实现

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

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

使用TP框架开发App接口

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

4、JQ遍历显示数据

实现下拉的刷新

什么是下拉刷新

下拉刷新接口

使用下拉刷新获取数据

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

1、音乐详情页CD旋转

买买买 – By2

音乐播放功能

1）添加模块

让本地支持模块调试

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

1）播放

2）停止

完整代码

买买买 – By2

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

五、Vuejs框架

1、什么是vue

2、vue.js的下载

vue.js初体验

1）渲染数据

2）双向绑定

3）渲染列表

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

︴扩展：视频播放