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