使用什么进行app开发
HTML5+plus, Hbuilder
HTML5+plus介绍
HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。
Hbuilder介绍
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE. HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。
Hbuilder中天然的集成了HTML5 Plus
创建一个移动app项目
选择mui项目, 这样就会自动导入mui的css和js
目录结构如下
常用方法
使用websocket
基于HTML语言, 那他天生就支持websocket
# 创建连接
var ws_server = new WebSocket("ws://192.168.1.1:9527");
有两种方式来使用创建的连接, 第一种方式就是像之前一样, 直接使用ws, 代用各种方法
但是在HTML5 plus中还提供了一种方法
官网链接
http://dev.dcloud.net.cn/mui/event/#customevent
因为app可能有多个页面, 不确定某个页面要使用websocket发送数据, 所以, 可以使用mui.fire触发一个自定义的事件, 这个事件就可以用作发送websocket数据
现在假设在index页面创建了websocket连接对象ws
document.addEventListener("send_music", function(data) { # 接受一个参数, 这个参数中有触发事件时携带的数据
// console.log(JSON.stringify(data.detail)) // 拿到的是某个页面提交事件时携带的数据
ws_server.send(JSON.stringify(data.detail));
})
在main页面要使用ws发送数据
# 根据页面的id获取页面
var index = plus.webview.getWebviewById("HBuilder"); # 默认的index页面id默认为Hbuilder
mui.fire(index, "send_music", { # 触发index页面send_music事件, 并传递参数
"to_user": toy._id,
"msg": window.get_music + content.data.music_path,
"from_user": JSON.parse(window.localStorage.getItem("user"))._id
})
这样在index就能帮助main发送websocket数据
页面的初始化
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()
方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。
mui.plusReady(function(){
console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
});
mui插件初始化
mui.init() mui插件初始化
DOM初始化就绪
mui.ready() 当DOM准备就绪时,指定一个函数来执行。
打开新的页面
app中会有多个页面, 如何打开一个新的页面
官方:
做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.
http://dev.dcloud.net.cn/mui/window/#openwindow
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{
top:newpage-top-position,//新页面顶部位置
bottom:newage-bottom-position,//新页面底部位置
width:newpage-width,//新页面宽度,默认为100%
height:newpage-height,//新页面高度,默认为100%
......
},
extras:{
.....//自定义扩展参数,可以用来处理页面间传值
},
createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
show:{
autoShow:true,//页面loaded事件发生后自动显示,默认为true
aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
},
waiting:{
autoShow:true,//自动显示等待框,默认为true
title:'正在加载...',//等待对话框上显示的提示内容
options:{
width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
......
}
}
})
创建子页面
在mobile app开发过程中,经常会出现共用的导航栏或者选项卡,每次打开页面都需要重新渲染,而且容易出现卡头卡尾的现象。并且此时若使用局部滚动,在android手机上会出现滚动不流畅的问题;
http://dev.dcloud.net.cn/mui/window/#subpage
mui.init({
subpages:[{
url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度,默认为100%
height:subpage-height,//子页面高度,默认为100%
......
},
extras:{}//额外扩展参数
}]
});
发送ajax请求
http://dev.dcloud.net.cn/mui/ajax/
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
直接使用ajax
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//指定服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
直接使用post
mui.post('http://server-name/login.php',{
username:'username',
password:'password'
},function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},'json' # 指定服务器返回的数据格式
);
ajax发送get请求
mui.get('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
},'json'
);
页面间传递数据
在mui.openWindow时可以使用
extras:{}, 来传递参数, 那么在页面中如何接受传递过来的数据呢
mui.plusReady(function() {
var content = plus.webview.currentWebview() # 获取当前页面所有的数据, extras会将数据放在这里面
// console.log(JSON.stringify(content))
})
app本地存储
cs架构的时候使用cookie存放一些数据, app中也可以进行类似的操作
window.localStorage.setItem("user", "xxx") # 设置一个值
window.localStorage.getItem("user") # 获取值
window.localStorage.removeItem("user", "xxx) # 删除某一个
window.localStorage.clear() # 清空, 删除所有
HTML5 plus也提供了
http://www.html5plus.org/doc/zh_cn/storage.html
var foo = plus.storage.getLength();
常用方法
getLength: 获取应用存储区中保存的键值对的个数
getItem: 通过键(key)检索获取应用存储的值
setItem: 修改或添加键值(key-value)对数据到应用数据存储中
removeItem: 通过key值删除键值对存储的数据
clear: 清除应用所有的键值对存储数据
key: 获取键值对中指定索引值的key值
调用手机扬声器
http://www.html5plus.org/doc/zh_cn/audio.html#plus.audio.AudioPlayer
使用方法
先创建一个音频对象
var playerObj = plus.audio.createPlayer(path);
播放音频
playerObj.play(successCB, errorCB)
successCB # 音频播放完成的后的回调函数
errorCB # 音频播放失败的回调函数
常用方法
play: 开始播放音频
pause: 暂停播放音频
resume: 恢复播放音频
stop: 停止播放音频
seekTo: 跳到指定位置播放音频
getDuration: 获取音频流的总长度
getPosition: 获取音频流当前播放的位置
setRoute: 设置音频输出线路
事件
http://dev.dcloud.net.cn/mui/event/
事件绑定
当点击登录时触发事件login
document.getElementById('loginBtn').addEventListener('tap',function () {
mui.openWindow({
url: "login.html",
id: "login.html",
createNew: true
})
})
取消事件
off(event,selector,handle)
适用于取消对应选择器上特定事件所执行的特定回调
//点击li时,执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时,执行foo_2函数
mui("#list").on("tap","li",foo_2); function foo_1(){
console.log("foo_1 execute");
} function foo_2(){
console.log("foo_2 execute");
}
//点击li时,不再执行foo_1函数,但会继续执行foo_2函数
mui("#list").off("tap","li",foo_1);
off(event,selector)
适用于取消对应选择器上特定事件的所有回调
//点击li时,执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时,执行foo_2函数
mui("#list").on("tap","li",foo_2); function foo_1(){
console.log("foo_1 execute");
} function foo_2(){
console.log("foo_2 execute");
}
//点击li时,foo_2、foo_2两个函数均不再执行
mui("#list").off("tap","li");
off()
适用于取消当前元素上绑定的所有事件回调
//点击li时,执行foo_1函数
mui("#list").on("tap","li",foo_1);
//双击li时,执行foo_4函数
mui("#list").on("doubletap","li",foo_4);
//点击p时,执行foo_3函数
mui("#list").on("tap","p",foo_3); function foo_1(){
console.log("foo_1 execute");
} function foo_3(){
console.log("foo_3 execute");
} function foo_4(){
console.log("foo_4 execute");
}
//点击li时,不再执行foo_1函数;点击p时,也不再执行foo_3函数;双击li时,也不再执行foo_4函数;
mui("#list").off();
自动触发某个事件
var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');
原生支持的手势
分类 | 参数 | 描述 |
---|---|---|
点击 | tap | 单击屏幕 |
doubletap | 双击屏幕 | |
长按 | longtap | 长按屏幕 |
hold | 按住屏幕 | |
release | 离开屏幕 | |
滑动 | swipeleft | 向左滑动 |
swiperight | 向右滑动 | |
swipeup | 向上滑动 | |
swipedown | 向下滑动 | |
拖动 | dragstart | 开始拖动 |
drag | 拖动中 | |
dragend | 拖动结束 |
二维码识别
创建Barcode对象
mui.plusReady(function() {
// scan = new plus.barcode.Barcode('bcid'); // 创建对象
// scan.onmarked = function(type,result){ // 这是扫码成功的回调函数, 参数解释:二维码的类型, 扫描的结果
})
常用方法
start: 开始条码识别
cancel: 结束条码识别
close: 关闭条码识别控件
setFlash: 是否开启闪光灯
setStyles: 设置Barcode扫码控件的配置参数
常用事件
onmarked: 条码识别成功事件
onerror: 条码识别错误事件
最新文章
- JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]
- ORA-27101: shared memory realm does not exist
- 【Learning Python】【第二章】Python基础类型和基础操作
- TCP和UDP之间的区别
- Java中的String、StringBuffer以及StringBuilder的用法和区别
- SQL Server Configuration Manager出错
- 6、JPA_映射单向多对一的关联关系(n的一方有1的引用,1的一方没有n的集合属性)
- 为什么在CSS中不要再使用@import
- 微信公众号菜单openid 点击菜单即可打开并登录微站
- Java 学习笔记 Junit4单元测试使用
- 序列化与反序列化之Kryo
- react组件回顶部
- js------10种循环方法
- 修改CentOS 7.2系统的主机名
- itexpdf同一个段落不同文字,如何设置不同的格式
- swift中 ?和 !的区别
- java虚拟机知识和 内存 堆(heap)、栈(stack)和方法区(method)
- Silverlight中图片显示
- python2.x下pip install mysql-python报错解决办法
- CSU 1805 Three Capitals(矩阵树定理+Best定理)