Blend 概述

Blend將Native的端能力和百度的云服務(wù)融合（Blend）到webapp中，同時(shí)提供Native組件、離線存儲(chǔ)等強(qiáng)大的端能力，讓你的webapp如虎添翼。

Blend提供以下能力：

• 界面交互能力：Blend.ui
• 本地設(shè)備能力：Blend.device
• 云服務(wù)能力： Blend.mbaas

通過直接調(diào)用提供API，可以讓你的webapp媲美Naitve app；

開始入門

引入Loader

Blend能力按照模塊劃分，需要統(tǒng)一引入百度直達(dá)號(hào)的loader腳本，讓后加載各個(gè)模塊到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之后，采用初始化函數(shù)按照模塊加載各模塊；

    Blend.lightInit({
            ak: "key-from-zhidahao",// 運(yùn)用百度云能力必須申請(qǐng)，若不用可刪除本行
        module:["app","account","blendui"] // Blend的ui能力、本地設(shè)備能力和云能力按照module分別加載使用
    });

1. apikey是運(yùn)用百度云能力必須申請(qǐng)的ak, 可點(diǎn)擊進(jìn)入獲取API Key申請(qǐng);

2. module模塊名字，Blend的ui能力、本地設(shè)備能力和云能力按照module分別加載使用，如ui能力直接用module:["blendui"]; 目前已提供的能力如下：

界面交互UI能力：

BlendUI

本地設(shè)備能力模塊：

加速器，調(diào)起應(yīng)用，電池， 指南針，網(wǎng)絡(luò)檢測(cè)，手機(jī)通訊錄，設(shè)備信息，文件系統(tǒng)，地理位置，系統(tǒng)語言信息，陀螺儀，攔截器，鍵盤，本地存儲(chǔ)，本地媒體功能 ，橫豎屏切換，二維碼，截頻分享，數(shù)據(jù)存儲(chǔ)，離線緩存

百度云能力模塊：

百度賬號(hào)，輕支付，社會(huì)化分享，云推送，應(yīng)用訂閱，人臉識(shí)別，個(gè)人云存儲(chǔ) ，云播放，語音識(shí)別，文本轉(zhuǎn)語音

簡(jiǎn)單二維碼掃描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.二維碼調(diào)用

    $("#Camera").bind("touchend",function(e){
       Blend.device.qr.startCapture({
           onsuccess:function(code){
                if(/^http:\/\//.test(code)){
                    store(code);
                    location.href=code;
                }else{
                    alert("地址錯(cuò)誤")
                }
            },
            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);
    });


    // 觸發(fā)事件
    main.fire("openUrl","top",{
        url: $(this).data('link')
    });

5.側(cè)邊欄

    // 創(chuàng)建側(cè)邊欄：
    main.Layer.addSidebar({
        url:'menu.html'
    });


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