混合APP – 个人随笔

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

Mr.Lee — Sat, 19 May 2018 15:02:15 +0000

移动端开发（HyBrid App）

一、App开发概述

1、什么是APP

就是苹果、安卓手机上装的软件/应用，如：微信、QQ、陌陌、王者荣耀等

2、手机软件开发的3种模式

1）Web App

说明：内嵌浏览器，打开指定网页

优点：快

缺点：用户体验度低，功能少

2）Native App（原生开发）

说明：就是安卓攻城狮开发安装应用，ios攻城狮开发苹果应用

优点：用户体验度高，可以使用n多功能

缺点：成本大，耗时间

3）Hybrid App（混合模式移动应用）

说明：就是直接写html + css + js就可以同时开发安卓和苹果APP

优点：成本低 + 功能强大

︴效果（广场舞）

二、使用APICloud框架开发HyBrid App前期准备

1、APICloud介绍

说明：APICloud就是开发移动app平台
特点：

写一套代码，可以同时在苹果和安卓手机上使用
使用js代码就可以轻松调用手机功能，如：摄像头、手机灯等功能。

2、注册APICloud平台

注册完毕后登录，进入开发控制台

创建应用（app）

5、使用svn获取代码

步骤1：在桌面创建一个【广场舞】文件夹
步骤2：进入【广场舞】文件夹右击检出

三、【预览】安装海马玩/天天模拟器软件，用于模拟安卓手机，随时看到开发效果

1、下载

下载地址：http://droid4x.haimawan.com/，
下载地址：http://www.ttmnq.com/

安装（双击下一步安装）

开发完毕生成app软件

海马模拟器安装app软件并预览

更新app后重新编译安装

需求：将标题更新为【php@itcast】
操作：

步骤1：打开【C:\Users\赵小康\Desktop\广场舞\html\main.html】文件进行开发

步骤2：提交apicloud平台

步骤3：云编译（打包）

步骤4：下载到本地安装

四、【预览】配置开发工具与模拟器

1、安装Sublime text3（傻瓜式下一步安装）

下载Sublime Text3，下载地址：http://www.sublimetext.com/3

————————-

创建桌面快捷方式

2、汉化Sublime text3

3、Sublime集成预览功能

1）获取APICloud插件

2）配置Sublime Text3

———————————-

如何检测是否配置成功，看下图打开项目鼠标右击查看是否有（真机运行选项）

3）打开app项目（注：svn检出目录）

4）使用Sublime+模拟器+真机同步显示App

︴验证：真机同步（更新app同步预览）

步骤1：打开index.php修改内容

步骤2：右击真机同步即可查看效果（注：不需要提交代码）

五、手机App前端界面设计

Logo与引导页的设计（云端）

使用自定义loader实现真机同步

http://docs.apicloud.com/

1）上传本地的代码的到云端

2）编译Android自定义loader

3）下载并重命名

步骤1：下载

步骤2：更名

4）移动到指定目录中

步骤1：创建文件夹

步骤2：移动

5）创建配置文件

步骤1：创建文件

步骤2：写入固定格式数据

6）真机同步测试

六、APP框架分析

1、目录结构分析

2、App代码分析（从index.html入手）

width – viewport的宽度 height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

让手机设备不直接识别手机号码、邮箱、日期以及address地址，也就是说不会直接有下划线

3、核心代码分析（针对Javascript）

4、App整体框架原理图

5、分析html/main.html核心代码

七、移动前段框架（AUICSS）

1、什么是AUICSS

就是前段框架，专门为apicloud而生，同bootstrap框架只要复制其规定的带css或者js的div就可以快速搭建一个网站。

下载AUICSS

网址：http://www.auicss.com/

3、使用AUICSS框架（前端框架）

步骤1：打开auicss框架拖拽【css】【js】【html】【image】文件夹到本地的广场舞文件中

步骤2：替换入口文件

步骤3：打开sublime右击真机同步

4、卡片列表

1）效果

2）index.html

哈啊哈哈哈哈

3）1.html

AUI

1天前

北京朝阳

666

888

AUI

1天前

北京朝阳

666

888

AUI

1天前

北京朝阳

666

888

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

混合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 – 个人随笔

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

移动端开发（HyBrid App）

一、App开发概述

1、什么是APP

2、手机软件开发的3种模式

1）Web App

2）Native App（原生开发）

3）Hybrid App（混合模式移动应用）

︴效果（广场舞）

二、使用APICloud框架开发HyBrid App前期准备

1、APICloud介绍

2、注册APICloud平台

注册完毕后登录，进入开发控制台

创建应用（app）

5、使用svn获取代码

三、【预览】安装海马玩/天天模拟器软件，用于模拟安卓手机，随时看到开发效果

1、下载

安装（双击下一步安装）

开发完毕生成app软件

海马模拟器安装app软件并预览

更新app后重新编译安装

四、【预览】配置开发工具与模拟器

1、安装Sublime text3（傻瓜式下一步安装）

2、汉化Sublime text3

3、Sublime集成预览功能

1）获取APICloud插件

2）配置Sublime Text3

3）打开app项目（注：svn检出目录）

4）使用Sublime+模拟器+真机同步显示App

︴验证：真机同步（更新app同步预览）

五、手机App前端界面设计

Logo与引导页的设计（云端）

使用自定义loader实现真机同步

1）上传本地的代码的到云端

2）编译Android自定义loader

3）下载并重命名

4）移动到指定目录中

5）创建配置文件

6）真机同步测试

六、APP框架分析

1、目录结构分析

2、App代码分析（从index.html入手）

3、核心代码分析（针对Javascript）

4、App整体框架原理图

5、分析html/main.html核心代码

七、移动前段框架（AUICSS）

1、什么是AUICSS

下载AUICSS

3、使用AUICSS框架（前端框架）

4、卡片列表

1）效果

2）index.html

3）1.html

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

混合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）代码