BlendUI

BlendUI使用Native技术来扩展Javascript,同时我们选择了最易于理解的方式:让Javascript能像操作DOM那样操作多个webview,以及在webview中嵌入Native组件。
多Webview控制能力。让一个Webapp拆到多个webview中运行,并能用Javascript来调度,解决了页面过大导致卡顿的问题,同时,webview的转场动画由Native代码实现,也解决了转场动画不流畅的问题。
Native组件嵌入能力。能将Native控件嵌入Webview中,这样就能让页面中那些性能较差的部分用Native来实现,以最大化地提高体验和交互。
BlendUI只在最基础的部分使用Native,BlendUI的核心消息机制类似传统的web事件,而所有BlendUI组件都可以采用完完全全的web来编写。总之,我们保持了所有web的风格和灵活性。

layergroup

示例展示了页面切换和下拉刷新功能。BlendUI提供了相关页面切换接口供开发者使用;用户可以在页面上自定义下拉刷新样式和定义下拉操作,方便用户刷新获取页面内容。在BlendUI中我们既可以在Layer页面内也可以在LayerGroup页面内使用下拉刷新功能。

实例代码
var tabs = new Blend.ui.LayerGroup({
	id: "tab",
	layers: [{
		    id: 'group1',
		    url: '/samples/group1.html',
		    "active":true,
		    'autoload': true,
		    "pullToRefresh":true,
		    "pullBgColor":"ff0000"
		},
		... //省略group2,group3定义
	]
}];
//定义下拉刷新事件
Blend.ui.on("layerPullDown",function(event){
    setTimeout(function(){
        $("#rcmd",dom).prepend('<li><a href="#" class="item-link item-content"><div class="item-inner"><div class="item-title">测试下拉刷新</div></div></a></li>');
        Blend.ui.layerStopRefresh("group1");
    },500);
});

百度文库

百度文库集成了BlendUI,实现流畅的页面切换。

BlendAPI

BWebapp的一大困境在于可供web调用的API远不如Native的完善。比如手机是3G还是wifi网络,电量情况,通讯录读取等,这些局限给手机web开发者带来了功能完备性的障碍。而Blend API弥补了这一鸿沟,它能让webapp的API更完备,让API的性能速度得到提升,暴露给开发者的都是通过统一、标准化的web API。
更为重要的是,Blend API内置于拥有极大装机量的百度搜索app,使得轻应用开发者能在数亿用户的手机上直接使用这些本地能力,并且拥有破壳检索、自动升级免安装等优势功能。

调起本地应用

根据传递的参数来调起手机应用,具体可以参考android调起应用参数intent

实例代码

var intent_cal  =  {
    action: "android.intent.action.EDIT",
    type: "vnd.android.cursor.item/event",
    title: "Some title",
    description: "Some description",
    beginTime: 1384676947757,
    endTime: 1384680547757
};
Blend.device.activity.start({
	onsuccess: function(data){
		$("#api",dom).val(JSON.stringify(data));
		Tips.show(dom,{text:"调用成功"})
	},
	onfail: function(data){
		$("#api",dom).val(JSON.stringify(data));
		Tips.show(dom,{text:"调用失败"})
	},
	intent:intent
});
       					

截屏分享

示例展示了调用手机的上的截屏和分享能力。

实例代码

Blend.device.screen.shareScreen({
	onsuccess: function(data){
		$("#api",dom).val(JSON.stringify(data));
	},
	onfail: function(data){
		$("#api",dom).val(JSON.stringify(data));
	}
});
       					

手机拍照,相册

启动手机摄像头进行拍照,或者从相册选取响应的照片,以base64的形式返回照片数据。并提供了按照宽高进行压缩的功能。

实例代码

$("#imageurl",dom).click(function(){
	Blend.device.media.captureMedia({
		onsuccess:function(data){
			$("#api",dom).val(JSON.stringify(data));
			$("#media",dom).attr({src:"data:"+data.type+";base64,"+data.base64});
		},
		onfail: function(data){
			$("#api",dom).val(JSON.stringify(data));
		},
		mediaType: Blend.device.MEDIA_TYPE.IMAGE,
		source: 0,
		base64: true,
		quality: 90,
		width: 260,
		height: 280
	});
});