Blend 概述

Blend將Native的端能力和百度的云服務融合（Blend）到webapp中，同時提供Native組件、離線存儲等強大的端能力，讓你的webapp如虎添翼。

Blend提供以下能力：

• 界面交互能力：Blend.ui
• 本地設備能力：Blend.device
• 云服務能力： Blend.mbaas

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

開始入門

引入Loader

Blend能力按照模塊劃分，需要統(tǒng)一引入百度直達號的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之后，采用初始化函數(shù)按照模塊加載各模塊；

    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

本地設備能力模塊：

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

百度云能力模塊：

百度賬號，輕支付，社會化分享，云推送，應用訂閱，人臉識別，個人云存儲 ，云播放，語音識別，文本轉語音

簡單二維碼掃描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);
    });


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

5.側邊欄

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


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