Blend 概述

Blend将Native的端能力和百度的云服务融合（Blend）到webapp中，同时提供Native组件、离线存储等强大的端能力，让你的webapp如虎添翼。

Blend提供以下能力：

• 界面交互能力：Blend.ui
• 本地设备能力：Blend.device
• 云服务能力： Blend.mbaas

通过直接调用提供API，可以让你的webapp媲美Naitve app；

开始入门

引入Loader

Blend能力按照模块划分，需要统一引入百度直达号的loader脚本，让后加载各个模块到webapp页面中；

1. http链接：

    <script name="baidu-tc-cerfication" type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/cloudaapi/lightapp.js"></script>

1. https加密链接

    <script name="baidu-tc-cerfication" type="text/javascript" charset="utf-8" src="https://openapi.baidu.com/cloudaapi/lightapp.js"></script>

加载模块

引入loader之后，采用初始化函数按照模块加载各模块；

    Blend.lightInit({
            ak: "key-from-zhidahao",// 运用百度云能力必须申请，若不用可删除本行
        module:["app","account","blendui"] // Blend的ui能力、本地设备能力和云能力按照module分别加载使用
    });

1. apikey是运用百度云能力必须申请的ak, 可点击进入获取API Key申请;

2. module模块名字，Blend的ui能力、本地设备能力和云能力按照module分别加载使用，如ui能力直接用module:["blendui"]; 目前已提供的能力如下：

界面交互UI能力：

BlendUI

本地设备能力模块：

加速器，调起应用，电池， 指南针，网络检测，手机通讯录，设备信息，文件系统，地理位置，系统语言信息，陀螺仪，拦截器，键盘，本地存储，本地媒体功能 ，横竖屏切换，二维码，截频分享，数据存储，离线缓存

百度云能力模块：

百度账号，轻支付，社会化分享，云推送，应用订阅，人脸识别，个人云存储 ，云播放，语音识别，文本转语音

简单二维码扫描Demo

1.loader引入及其模块初始化

    <script name="baidu-tc-cerfication" type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/cloudaapi/lightapp.js"></script>
    <script>
    blend.lightInit({
        ak:"8MAxI5o7VjKSZOKeBzS4XtxO",
        module:["qr","blendui"]
    });
    </script>

2.二维码调用

    $("#Camera").bind("touchend",function(e){
       Blend.device.qr.startCapture({
           onsuccess:function(code){
                if(/^http:\/\//.test(code)){
                    store(code);
                    location.href=code;
                }else{
                    alert("地址错误")
                }
            },
            onfail:function(e){
                console.log(e);
            },
            type:Blend.device.qr.QRCODE
        });
    });

3.UI模块,Tab切换

var tabs = new Blend.ui.LayerGroup({
    id: "Tabs",
    layers: [{
        id: 'Tab1',
        url: 'tab1.html',
        autoload:true
    }, {
        id: 'Tab2',
        url: 'tab2.html',
        autoload:true
    }],
    onselected: function(event) {
        var id = event['layerId'];
        $("#SQNav span").removeClass('on');
        $("#" + id).addClass('on');
        $("#SQNavStyle").removeClass().addClass("sq-lv lv" + $("#" + id).index());
    },
    left: 0,
    top: 177
});

4.事件传递

    // 接收事件
    main.on("openUrl",function(e){
        openUrl(e.data.url);
    });


    // 触发事件
    main.fire("openUrl","top",{
        url: $(this).data('link')
    });

5.侧边栏

    // 创建侧边栏：
    main.Layer.addSidebar({
        url:'menu.html'
    });


    // 显示
    $("#layermenu").on('click',function(e){
        e.preventDefault();
        main.Layer.showSidebar();
    });