使用什么进行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: 条码识别错误事件
