Hui之Hui.js 官方文檔

基礎

// 判斷值是否是指定資料類型
        var result = hui.isTargetType("百簽軟體", "string");  //=>true
        var result = hui.isTargetType(123, "number");   // =>true
        var result = hui.isTargetType("false", "boolean");  // =>false
      

// 判斷資料類型是否是undefined類型
        var result = hui.isUndefined(undefined);    // =>true
        var result = hui.isUndefined(null); // =>false
      

// 判斷值是否是有效值，非undefined和非null
        var result = hui.isValid("百簽軟體");   //=>true
        var result = hui.isValid(null); // =>false
      

　　

// 判斷是否是數值類型，包括字元串數值
        var result = hui.isNumber("123");   //=>true
        var result = hui.isNumber(456); //=>true
        var result = hui.isNumber("123a");  // false
      

// 判斷是否是function類型
        var result = hui.isFunction(function () { });   // =>true

        function get() {
        };
        var result = hui.isFunction(get);   // =>true

        var result = hui.isFunction("abc"); // =>false
      

// 判斷是否是boolean類型
        var result = hui.isBoolean(false);  //=>true
        var result = hui.isBoolean(true);   //=>true
        var result = hui.isBoolean("true");    //=>false
      

// 判斷是否是字元串類型
        var result = hui.isString("");  //=>true
        var result = hui.isString("百簽軟體");  //=>true
        var result = hui.isString(123); // =>false
        var result = hui.isString(null);    // =>false
      

// 判斷是否是日期類型
        var result = hui.isDate("2016-08-24");  //=>true
        var result = hui.isDate("2016/08/24");  //=>true
        var result = hui.isDate("2016-2-1");    //=>true
        var result = hui.isDate("2016-08-24 18:06");    //=>true
        var result = hui.isDate("2016-08-24 18:06:25");    //=>true
        var result = hui.isDate("2016/08/24 18:06:25");    //=>true
        var result = hui.isDate("16/08/24");    // =>false
        var result = hui.isDate("08-24");   //=>false
      

// 判斷是否是正數
        var result = hui.isPlusDecimal(1);  //=>true
        var result = hui.isPlusDecimal(-1);  //=>false
        var result = hui.isPlusDecimal(+1);  //=>true
        var result = hui.isPlusDecimal("10");  //=>true
      

// 判斷是否是json類型
        var obj = "string";
        var result = hui.isJson(obj);   // =>false

        var obj1 = new String("abc");
        var result = hui.isJson(obj1);   // =>false

        var obj3 = {
            name: "百簽軟體",
            autor: "百小僧"
        };
        var result = hui.isJson(obj3);   // =>true

        var obj4 = ["百簽軟體", "百小僧"];
        var result = hui.isJson(obj4);   // =>false

        var obj5 = [{ name: "百簽軟體", autor: "百小僧" }];
        var result = hui.isJson(obj5);   // =>false
      

// 判斷是否是數組類型
        var arr = ["百簽軟體", "百小僧"];
        var result = hui.isArray(arr);  //=>true

        var arr1 = new Array(1, 3, 4);
        var result = hui.isArray(arr1); //=>true

        var arr2 = [{ name: "百簽軟體", autor: "百小僧" }];
        var result = hui.isArray(arr2); //=>true

        var arr3 = [];
        var result = hui.isArray(arr3); //=>true
      

// 判斷是否是HTML元素
        var result = hui.isElement(document.body);  //=>true
        var result = hui.isElement(document.getElementById("nav"));  // =>false，如果找到該元素就傳回 true
      

// 擷取自定義類名稱
        function Persion(name, age) {
            this.name = name;
            this.age = age;
        }
        var p = new Persion("百小僧", 23);
        var result = hui.getCustomType(p);  // =>Persion
      

// 擷取方法名稱，非匿名方法，需傳入方法字元串
        var result = hui.getFunctionName("function getName() {}");  // =>getName
      

// 去掉前後空格
        var result = hui.trim(" 百小僧 "); // =>百小僧
        var result = hui.trim(" 百 小僧 ");    // =>百 小僧
      

// 去掉所有空格
        var result = hui.trimAll(" 百 小 僧 ");    // =>百小僧
      

// 判斷是api對象是否存在，通常用來判斷是否是APICloud的開發環境
        var result = hui.apiExit(); //=>false

        apiready = function () {
            var result = hui.apiExit(); // =>true
        };

        hui.ready = function () {
            var result = hui.apiExit(); // =>true
        };
      

// 将對象序列化成字元串，也就是可以看到内部結構
        var obj = { name: "百簽軟體", autor: "百小僧" };
        var result = hui.objParse(obj); // =>" { name: "百簽軟體", autor: "百小僧" }"
      

// 生成唯一 GUID字元串，32位唯一碼
        var guid = hui.guid();  // =>abf9a9a2-8ef9-b291-e557-579f8271f3cf
      

// 序列化json對象為url格式
        var obj = { name: "百簽軟體", autor: "百小僧" };
        var result = hui.serialize(obj);    // =>&name=百簽軟體&autor=百小僧
      

// 擷取變量值對應的格式類型，方法eval調用
        var val = "123";
        var reslut = hui.getValueTypeFormat(val);   // => "123"
      

// 對象拷貝，繼承，并傳回新的對象，支援深度拷貝
        var a = { name: "百簽軟體" };
        var b = { autor: "百小僧" };
        var result = hui.deepAssign({}, a, b);  // =>{name:"百簽軟體",autor:"百小僧"}

        var c = { name: "百簽軟體", autor: "新生帝" };
        var d = { autor: "百小僧", age: 23 };
        var result = hui.deepAssign({}, c, d);  // =>{name:"百簽軟體",autor:"百小僧",age:23}
      

DOM

// 根據ID名稱擷取DOM節點
        var header = hui.byId("header");
      

// 根據class屬性名稱擷取DOM節點
        var footers = hui.byClassName("hui-footer");
      

// 根據标簽名稱擷取DOM節點
        var elements = hui.byTagName("<div>");
      

// 模仿jQuery $ 選擇器文法，不同的是，hui.js總是傳回數組類型
        var header = hui.$("header")[0];
        var divs = hui.$("div");
        var txt = hui.$("input[type='text']");
      

// 擷取單個DOM節點
        var header = hui.single("header");
      

// 擷取第一個DOM節點
        var div = hui.first("div.nav");
      

// 擷取最後一個DOM節點
        var li = hui.last("ul li");
      

// 查找指定DOM元素
        var header = hui.find(document.body, ".nav");
      

// 擷取css屬性的值
        var val = hui.getCss(document.body, "margin-left");   // =>0px
      

// 擷取DOM元素的偏移量
        var offsetObj = hui.offset(hui.single("header"));   // => { t:0,l:0,w:320,h:44}
      

載入HTML

/*
         * 載入link import模闆
         * 輸入參數：
         * templateSelectors：link 模闆内容選擇器
         * targetSelectors：載入模闆之後追加到指定DOM元素中
         */
        hui.LoadLinkTppl(".tppl", document.body);
      

模闆引擎

<!--定義模闆，<% %> 包裹Javascript代碼，<%= %> 輸出變量 -->
    <script type="text/html" id="tppl">
        <% for(var i=0; i < list.length;i++){ %>
        <li>名稱：<%=list[i].name %></li>
        <%} %>
    </script>

    <script type="text/javascript">
        // 定義資料集合，必須是json類型
        var data = {
            list: [
                {
                    name: "百簽軟體",
                    autor: "百小僧",
                    age: 23
                }
            ]
        };
        // 調用hui.tppl(tpl,data); 傳回渲染之後的HTML，不能重複渲染多個資料集合
        var html = hui.tppl(document.getElementById("tppl").innerHTML, data);

        // 同時也可以這樣調用
        var render = hui.tppl(document.getElementById("tppl").innerHTML);
        var html = render(data); // 可以載入不同的資料渲染同一套模闆
        var html2 = render({ list: [{ name: "Hui 2.x", autor: "百小僧" }] }); </script>
      

屬性

// 擷取App的ID
            var appId = hui.appId;

            // 擷取App在桌面上的名稱
            var appName = hui.appName;

            // 擷取App的版本号，隻對正式版有用
            var appVersion = hui.appVersion;

            // 擷取移動裝置系統類型
            var systemType = hui.systemType;

            // 擷取移動裝置系統版本
            var systemVersion = hui.systemVersion;

            // 擷取APICloud的引擎版本
            var version = hui.version;

            // 擷取移動裝置唯一辨別
            var deviceId = hui.deviceId;

            // 擷取IOS用于推送的Token
            var deviceToken = hui.deviceToken;

            // 擷取移動裝置型号
            var deviceModel = hui.deviceModel;

            // 擷取移動裝置名稱
            var deviceName = hui.deviceName;

            // 擷取移動裝置營運商名稱
            var operator = hui.operator;

            // 擷取移動裝置網絡連接配接類型
            var connectionType = hui.connectionType;

            // 擷取App是否全屏
            var fullScreen = hui.fullScreen;

            // 擷取移動裝置分辨率寬度
            var screenWidth = hui.screenWidth;

            // 擷取移動裝置分辨率高度
            var screenHeight = hui.screenHeight;

            // 擷取App目前打開視窗的名稱
            var winName = hui.winName;

            // 擷取App目前打開視窗的寬度
            var winWidth = hui.winWidth;

            // 擷取App目前打開視窗的高度
            var winHeight = hui.winHeight;

            // 擷取App目前視窗下的Frame名稱
            var frameName = hui.frameName;

            // 擷取App目前視窗下的Frame寬度
            var frameWidth = hui.frameWidth;

            // 擷取App目前視窗下的Frame高度
            var frameHeight = hui.frameHeight;

            // 擷取頁面傳遞過來的參數
            var pageParam = hui.pageParam;

            // 擷取widget傳遞過來的參數
            var wgtParam = hui.wgtParam;

            // 擷取第三方應用傳遞過來的參數
            var appParam = hui.appParam;

            // 擷取目前狀态欄是否支援沉浸式狀态欄
            var statusBarAppearance = hui.statusBarAppearance;

            // 擷取widget 網頁包真實目錄
            var wgtRootDir = hui.wgtRootDir;

            // 擷取手機上fs的真實目錄
            var fsDir = hui.fsDir;

            // 擷取手機上緩存的目錄，IOS系統下載下傳的檔案必須放在這個目錄下
            var cacheDir = hui.cacheDir;

            // 擷取config.xml配置的debug字段的值
            var debug = hui.debug;
      

常量

// APICloud的常量存儲在 hui.constant對象中，可通過索引和屬性方式調用，如：

            // 判斷移動裝置系統是否是Android系統
            if (hui.systemVersion == hui.constant.systemType.android) {
                // => Android
            }
            else {
                // => 其他OS
            }

            // 目前内置的所有常量如下：
            hui.constant = {
                toast_location: {
                    top: "top",
                    middle: "middle",
                    bottom: "bottom"
                },
                sensor_type: {
                    accelerometer: "accelerometer",
                    gyroscope: "gyroscope",
                    magnetic_field: "magnetic_field",
                    proximity: "proximity"
                },
                error_code: {
                    0: "錯誤",
                    1: "沒有指定子產品",
                    2: "沒有指定方法",
                    3: "參數不比對",
                    4: "沒有權限"
                },
                call_type: {
                    tel: "tel",
                    tel_prompt: "tel_prompt",
                    facetime: "facetime"
                },
                location_accuracy: {
                    "10m": "10m",
                    "100m": "100m",
                    "1km": "1km",
                    "3km": "3km"
                },
                animation_type: {
                    none: "none",
                    push: "push",
                    movein: "movein",
                    fade: "fade",
                    flip: "flip",
                    reveal: "reveal",
                    ripple: "ripple",
                    curl: "curl",
                    un_curl: "un_curl",
                    suck: "suck",
                    cube: "cube"
                },
                animation_curve: {
                    ease_in_out: "ease_in_out",
                    ease_in: "ease_in",
                    ease_out: "ease_out",
                    linear: "linear"
                },
                animation_subType: {
                    from_right: "from_right",
                    from_left: "from_left",
                    from_top: "from_top",
                    from_bottom: "from_bottom"
                },
                showProgress_animationType: {
                    fade: "fade",
                    zoom: "zoom"
                },
                showProgress_style: {
                    default: "default"
                },
                getPicture_mediaValue: {
                    pic: "pic",
                    video: "video",
                    all: "all"
                },
                getPicture_videoQuality: {
                    low: "low",
                    medium: "medium",
                    high: "high"
                },
                openPicker_type: {
                    date: "date",
                    time: "time",
                    date_time: "date_time"
                },
                getPicture_encodingType: {
                    jpg: "jpg",
                    png: "png"
                },
                getPicture_destinationType: {
                    base64: "base64",
                    url: "url"
                },
                getPicture_sourceType: {
                    library: "library",
                    camera: "camera",
                    album: "album"
                },
                connectionType: {
                    unknown: "unknown",
                    ethernet: "ethernet",
                    wifi: "wifi",
                    "2g": "2g",
                    "3g": "3g",
                    "4g": "4g",
                    none: "none"
                },
                file_error_code: {
                    "0": "沒有錯誤",
                    "1": "找不到檔案錯誤",
                    "2": "不可讀取錯誤",
                    "3": "編碼格式錯誤",
                    "4": "無效操作錯誤",
                    "5": "無效修改錯誤",
                    "6": "磁盤溢出錯誤",
                    "7": "檔案已存在錯誤"
                },
                systemType: {
                    ios: "ios",
                    android: "android",
                    win: "win",
                    wp: "wp"
                },
                download_state: {
                    "0": "下載下傳中",
                    "1": "下載下傳完成",
                    "2": "下載下傳失敗"
                },
                ajax_error_code: {
                    "0": "連接配接錯誤",
                    "1": "逾時",
                    "2": "授權錯誤",
                    "3": "資料類型錯誤"
                },
                ajax_dataType: {
                    json: "json",
                    text: "text"
                },
                ajax_method: {
                    get: "get",
                    post: "post",
                    put: "put",
                    delete: "delete",
                    head: "head"
                },
                statusBar_style: {
                    dark: "dark",
                    light: "light"
                },
                screen_orientation: {
                    portrait_up: "portrait_up",
                    portrait_down: "portrait_down",
                    landscape_left: "landscape_left",
                    landscape_right: "landscape_right",
                    auto: "auto",
                    auto_portrait: "auto_portrait",
                    auto_landscape: "auto_landscape"
                },
                ajax_upload_status: {
                    "0": "上傳中",
                    "1": "上傳完成",
                    "2": "上傳失敗"
                },
                softInputMode: {
                    resize: "resize",
                    pan: "pan",
                    auto: "auto"
                },
                imageCache_policy: {
                    default: "default",
                    cache_else_network: "cache_else_network",
                    no_cache: "no_cache",
                    cache_only: "cache_only"
                },
                progress_type: {
                    default: "default",
                    page: "page"
                },
                openSlidLayout_type: {
                    left: "left",
                    right: "right",
                    all: "all"
                },
                openDrawerLayout_type: {
                    left: "left",
                    right: "right"
                },
                code_type: {
                    "utf-8": "utf-8",
                    "gb2312": "gb2312",
                    "gbk": "gbk"
                },
                notification_sound: {
                    default: "default"
                },
                prompt_type: {
                    text: "text",
                    password: "password",
                    number: "number",
                    email: "email",
                    url: "url"
                }
            };
      

事件

// 監聽裝置電池電量低事件
            hui.batterylow(function (ret, err) {
                var level = ret.level;  // 電池電量（1-100）
                var isPlugged = ret.isPlugged;  // 是否裝置連接配接電源
            });

            // 監聽裝置電池狀态改變事件，如電量變化或正在充電
            hui.batterystatus(function (ret, err) {
                var level = ret.level;  // 電池電量（1-100）
                var isPlugged = ret.isPlugged;  // 是否裝置連接配接電源
            });

            // 監聽裝置 back 鍵被點選事件，僅 Android 平台有效，該事件必須在 Window 中注冊才有效，Frame 中注冊無效，并且隻在目前螢幕上的 window 才能收到回調。
            hui.keyback(function (ret, err) {
                var keyCode = ret.keyCode;  // 被點選的按鍵
                var longPress = ret.longPress;  // 是否是長按
            });

            // 監聽裝置 menu 鍵被點選事件，僅 Android 平台有效，該事件必須在 Window 中注冊才有效，Frame 中注冊無效，并且隻在目前螢幕上的 window 才能收到回調。
            hui.keymenu(function (ret, err) {
                var keyCode = ret.keyCode;  // 被點選的按鍵
                var longPress = ret.longPress;  // 是否是長按
            });

            // 監聽裝置音量加鍵被點選事件，僅 Android 平台有效，該事件必須在 Window 中注冊才有效，Frame 中注冊無效，并且隻在目前螢幕上的 window 才能收到回調。
            hui.volumeup(function () {
                var keyCode = ret.keyCode;  // 被點選的按鍵
                var longPress = ret.longPress;  // 是否是長按
            });

            // 監聽裝置音量減鍵被點選事件，僅 Android 平台有效，該事件必須在 Window 中注冊才有效，Frame 中注冊無效，并且隻在目前螢幕上的 window 才能收到回調。
            hui.volumedown(function () {
                var keyCode = ret.keyCode;  // 被點選的按鍵
                var longPress = ret.longPress;  // 是否是長按
            });

            // 監聽裝置斷開網絡的事件
            hui.offline(function (ret, err) {
                // => 斷網了
            });

            // 監聽裝置連接配接到網絡的事件
            hui.online(function (ret, err) {
                var connectionType = ret.connectionType;    // 目前網絡連接配接類型
            });

            // 監聽App進入背景事件，也可以說回到桌面，或者目前手機螢幕顯示的是其他App
            hui.pause(function (ret, err) {
                // => App進入背景運作
            });

            // 監聽應用從背景回到前台事件，也就是顯示在目前手機螢幕上
            hui.resume(function (ret, err) {
                // => App正在目前手機螢幕上運作
            });

            // 監聽Window 或者 Frame 頁面滑動到底部事件，通常用來做上拉加載
            hui.scrolltobottom(function (ret, err) {
                // =>距離底部0px觸發
            });
            hui.scrolltobottom(function (ret, err) {
                // =>距離底部10px觸發
            }, { threshold: 10 });

            // 監聽裝置搖動事件，設定該監聽後，目前 APP 将立即開啟搖動檢測功能
            hui.shake(function (ret, err) {
                // =>手機正在搖動
            });

            // 監聽應用在前台運作期間，使用者螢幕截圖事件（比如同時按下了 home 鍵和電源鍵），隻支援 iOS。
            hui.takescreenshot(function (ret, err) {
                // =>你的iPhone手機截屏了
            });

            // 監聽Window 或者 Frame 的頁面全局向下輕掃事件
            hui.swipedown(function (ret, err) {
                //=>你在App上快速向下滑動了
            });

            // 監聽Window 或者 Frame 的頁面全局向左輕掃事件
            hui.swipeleft(function (ret, err) {
                //=>你在App上快速向左滑動了
            });

            // 監聽Window 或者 Frame 的頁面全局向右輕掃事件
            hui.swiperight(function (ret, err) {
                //=>你在App上快速向右滑動了
            });

            // 監聽Window 或者 Frame 的頁面全局向上輕掃事件
            hui.swipeup(function (ret, err) {
                //=>你在App上快速向上滑動了
            });

            // 監聽Window 或者 Frame 的頁面全局單擊事件，監聽該事件後，點選 window 或者 frame 的任意位置，都将收到 tap 回調
            hui.tap(function (ret, err) {
                // =>你點選了App頁面
            });

            // 監聽Window 或者 Frame 的頁面全局長按事件
            hui.longpress(function (ret, err) {
                // =>你長按了頁面
            });

            // 監聽Window 顯示到螢幕的事件，收到 viewappear 事件回調，即辨別目前 Window 已經動畫結束，并且完全顯示到螢幕上，該事件的作用對象為 Window，Frame 的顯示不會收到事件
            hui.viewappear(function (ret, err) {
                // => 目前Window顯示在螢幕上了
            });

            // 監聽Window 離開螢幕的事件，收到 viewdisappear 事件回調，即辨別目前 Window 已經動畫結束，并且完全從螢幕上移除，該事件的作用對象為 Window，Frame 的隐藏不會收到事件，若是 Window 被關閉，此事件不會再回調
            hui.viewdisappear(function (ret, err) {
                // =>目前Window消失在螢幕上，但未關閉
            });

            // 監聽狀态欄通知被使用者點選後的回調
            hui.noticeclicked(function (ret, err) {
                var type = ret.type;    // 内容來源類型。取值範圍：0-APICloud 收到的推送内容，1-開發者自定義的
                var value = ret.value; // 内容，收到的推送内容或者由開發者發送通知時自行傳入的，見notification接口中extra
            });

            // 監聽本應用被其他應用調起來時（Android 平台也可以通過 Activity 打開），收到相關資料的回調，在任意頁面中注冊該監聽後，如果本應用被其他應用調起，将觸發該監聽函數，同時将傳給該應用的資料回調給網頁
            hui.appintent(function (ret, err) {
                var iosUrl = ret.iosUrl;    // 其他應用打開本應用的url，隻iOS有效
                var sourceAppId = ret.sourceAppId;  // 其他應用的包名，iOS平台有可能為空字元串
                var appParam = ret.appParam;    // 其他應用傳遞過來的參數，JSON或字元串類型
            });

            // 監聽雲修複使用靜默修複時，更新完畢事件。可通過監聽此事件來通知使用者做是否強制重新開機應用等操作或者提示，以使更新生效，如果是提示修複，則不會觸發該事件
            hui.smartupdatefinish(function (ret, err) {
                var value = ret.value;
                var extra = value[0].extra; // 在控制台雲修複裡面進行靜默修複時填寫的附加資訊
            });

            // 監聽啟動頁被使用者點選後的回調
            hui.launchviewclicked(function (ret, err) {
                var value = ret.value;  // 附件資訊
            });
      

API方法

/*
             * 打開新視窗
             * 輸入參數：
             * name：視窗名稱，必填
             * url：視窗位址，選填，預設為：視窗名稱.html
             * pageParam：頁面參數，選填
             * params：詳細參數配置（和APICloud的Options一緻）
             */

            // 打開新視窗
            hui.openWin("home");    // url 預設是 home.html

            // 打開新視窗，指定本地位址
            hui.openWin("home", "/html/home.html");

            // 打開新視窗，url為 網址
            hui.openWin("baidu", "http://www.baidu.com");

            // 打開新視窗，傳遞頁面參數
            hui.openWin("home", "/html/home.html", { id: 10, name: "百小僧" });
            // 新頁面可通過擷取參數值
            var id = hui.pageParam.id;
            var name = hui.pageParam.name;

            // 打開新視窗，傳遞頁面參數新寫法，相容URL傳參
            hui.openWin("home", "/html/home.html?id=10&name=百小僧");
            // 新頁面可通過擷取參數值
            var id = hui.pageParam.id;
            var name = hui.pageParam.name;

            // 打開新視窗，設定其他可選參數，詳細請看apicloud的 api.openWin的options參數
            hui.openWin("home", "/html/home.html", null, {
                vScrollBarEnabled: false,   // 是否顯示垂直滾動條
                allowEdit: true // 是否允許頁面長按彈出系統菜單
            });
      

/*
             * 跨window，跨frame執行腳本
             * 輸入參數：
             * obj：腳本字元串 或 匿名處理方法 或 帶輸入參數的對象
             * frameName：window名稱
             * name：window名稱
             */

            // 目前window視窗執行腳本
            // 寫法一（不推薦，需轉義，書寫也不友善）
            hui.execScript("alert('我是百小僧，多多指教');");
            // 寫法二（推薦）
            hui.execScript(function () {
                alert("我是百小僧，多多指教");
            });
            // 寫法三（進階用法，可把外部參數傳入）
            var name = "百小僧";
            hui.execScript({
                // 把外部參數注入到裡面，非常實用
                params: {
                    "name": name
                },
                // 要執行的腳本
                callback: function () {
                    alert("我是" + name + "，多多指教");
                }
            });

            // 指定window視窗執行腳本
            // 寫法一（不推薦，需轉義，書寫也不友善）
            hui.execScript("alert('我是百小僧，多多指教');", null, "home");
            // 寫法二（推薦）
            hui.execScript(function () {
                alert("我是百小僧，多多指教");
            }, null, "home");
            // 寫法三（進階用法，可把外部參數傳入）
            var name = "百小僧";
            hui.execScript({
                // 把外部參數注入到裡面，非常實用
                params: {
                    "name": name
                },
                // 要執行的腳本
                callback: function () {
                    alert("我是" + name + "，多多指教");
                }
            }, null, "home");

            // 指定frame視窗執行腳本
            // 寫法一（不推薦，需轉義，書寫也不友善）
            hui.execScript("alert('我是百小僧，多多指教');", "frame_body");
            // 寫法二（推薦）
            hui.execScript(function () {
                alert("我是百小僧，多多指教");
            }, "frame_body");
            // 寫法三（進階用法，可把外部參數傳入）
            var name = "百小僧";
            hui.execScript({
                // 把外部參數注入到裡面，非常實用
                params: {
                    "name": name
                },
                // 要執行的腳本
                callback: function () {
                    alert("我是" + name + "，多多指教");
                }
            }, "frame_body");

            // 指定frame，window視窗執行腳本
            // 寫法一（不推薦，需轉義，書寫也不友善）
            hui.execScript("alert('我是百小僧，多多指教');", "frame_body", "home");
            // 寫法二（推薦）
            hui.execScript(function () {
                alert("我是百小僧，多多指教");
            }, "frame_body", "home");
            // 寫法三（進階用法，可把外部參數傳入）
            var name = "百小僧";
            hui.execScript({
                // 把外部參數注入到裡面，非常實用
                params: {
                    "name": name
                },
                // 要執行的腳本
                callback: function () {
                    alert("我是" + name + "，多多指教");
                }
            }, "frame_body", "home");
      

/*
             * 異步請求網際網路資料
             * 輸入參數：
             * callback：回調函數
             * data：傳入資料
             * method：請求方式
             * dataType：伺服器傳回資料類型
             * headers：請求封包頭，json類型
             * params：詳細參數配置（和APICloud的Options一緻）
             */

            var url = "http://m.imzc.cn/mobile/activity/activityList.do";
            // 請求伺服器端資料，預設get方式，傳回json資料
            hui.ajax(function (ret, err) {
                hui.alert(ret);
            }, url);

            // 請求伺服器端資料，預設get方式，并傳入id參數，傳回json資料
            hui.ajax(function (ret, err) {
                hui.alert(ret);
            }, url, { id: 10 });

            // 請求伺服器端資料，預設get方式，傳回text資料
            hui.ajax(function (ret, err) {
                hui.alert(ret);
            }, url, hui.constant.ajax_method.get, {}, hui.constant.ajax_dataType.text);

            // 請求伺服器端資料，預設get方式，設定headers
            hui.ajax(function (ret, err) {
                hui.alert(ret);
            }, url, hui.constant.ajax_method.get, {}, hui.constant.ajax_dataType.json, { key: "abcdefg123" });

            // 請求伺服器端資料，預設get方式，設定其他參數
            hui.ajax(function (ret, err) {
                hui.alert(ret);
            }, url, hui.constant.ajax_method.get, {}, hui.constant.ajax_dataType.text, null, {
                cache: true,    // 是否緩存
                returnAll: true //是否傳回全部消息
            });

            // Post送出資料
            hui.ajax(function (ret, err) {
                hui.alert("送出成功");
            }, url, {
                id: 1,
                name: "百小僧",
                age: 23
            }, hui.constant.ajax_method.post);

            // Post送出資料，帶values傳入資料
            hui.ajax(function (ret, err) {
                hui.alert("送出成功");
            }, url, {
                values: {
                    id: 1,
                    name: "百小僧",
                    age: 23
                }
            }, hui.constant.ajax_method.post);

            // Post上傳單個檔案
            hui.ajax(function (ret, err) {
                hui.alert("上傳成功");
            }, url, {
                files: { "file": "fs://abc.jpg" }
            }, hui.constant.ajax_method.post);

            // Post上傳多個檔案
            hui.ajax(function (ret, err) {
                hui.alert("上傳成功");
            }, url, {
                files: {
                    "file": [
                        "fs://abc.jpg",
                        "fs://abc2.jpg",
                        "fs://abc.jpg"
                    ]
                }
            }, hui.constant.ajax_method.post);

            // Post上傳檔案并送出表單（同步進行）
            hui.ajax(function (ret, err) {
                hui.alert("送出成功");
            }, url, {
                values: {
                    id: 1,
                    name: "百小僧",
                    age: 23
                },
                files: { "file": "fs://abc.jpg" }
            }, hui.constant.ajax_method.post);
      

/*
             * 擷取偏好設定（也就是小資料本地存儲，類似Session，Cookie，常用于登入判斷操作）
             * 輸入參數：
             * callback：回調函數，或字元串
             * key：存儲的鍵
             */

            // 同步擷取資料，直接可以用變量接收（推薦寫法）
            var value = hui.getPrefs("name");

            // 異步擷取資料
            hui.getPrefs(function (ret, err) {
                var value = ret.value;
            }, "name");
      

文法糖

打開沉浸式Frame

/*
             * 打開沉浸式Frame（可設定帶不帶沉浸式，自動計算frame高度，比如除去頭部，尾部。通常用來做首頁，或者在window中打開帶頭部的frame内容頁）
             * 輸入參數：
             * name：視窗名稱，必填
             * url：視窗位址，選填，預設為：視窗名稱.html
             * minus：設定沉浸式相關資訊，數組類型，隻有三個元素：[array,array,boolean]，第一、第二進制素是一個DOM數組，第一個元素表示frame上邊元素集合，第二個元素表示frame下邊元素集合，第三個元素是設定是否沉浸式，預設為true
             * pageParam：頁面參數，選填
             * bounces：是否允許頁面彈動，預設false
             * params：詳細參數配置（和APICloud的Options一緻）
             */

            // 打開普通frame，預設和windows同高度
            hui.openContentFrame("home");

            // 可以指定名稱和位址打開frame
            hui.openContentFrame("home", "/html/home.html");

            // 打開frame，并設定頭部為沉浸式
            hui.openContentFrame("home", "/html/home.html", [["#header"]]);

            // 打開frame，設定頭部為沉浸式，并去掉底部的高度，通常用做首頁
            hui.openContentFrame("home", "/html/home.html", [["#header"], ["#footer"]]);

            // 打開frame，設定frame高度頂部排除header，header1，header2的高度，或者底部排除footer，footer1，footer2的高度
            hui.openContentFrame("home", "/html/home.html", [["#header", "#header1", "#header2"], ["#footer", "#footer1", "#footer2"]]);

            // 打開frame，設定頭部為沉浸式，并去掉底部的高度，并設定不需要做沉浸式處理
            hui.openContentFrame("home", "/html/home.html", [["#header"], ["#footer"], false]);

            // 打開frame，設定頭部為沉浸式，并傳遞參數
            hui.openContentFrame("home", "/html/home.html", [["#header"]], { id: 1, name: "百小僧" });
            // 新頁面可通過擷取參數值
            var id = hui.pageParam.id;
            var name = hui.pageParam.name;
            // 通常我們的參數都是通過openWin傳入的，那frame隻需要調用 hui.pageParam即可，最簡單的不需要設定，因為内部已經做了處理
            hui.openContentFrame("home", "/html/home.html", [["#header"]], hui.pageParam);
            // 上面的等同下面的（推薦下面寫法）
            hui.openContentFrame("home", "/html/home.html", [["#header"]]);

            // 打開frame，設定頭部為沉浸式，傳遞頁面參數新寫法，相容URL傳參
            hui.openContentFrame("home", "/html/home.html?id=10&name=百小僧", [["#header"]]);
            // 新頁面可通過擷取參數值
            var id = hui.pageParam.id;
            var name = hui.pageParam.name;

            // 打開frame，設定頭部為沉浸式，并設定frame頁面彈動
            hui.openContentFrame("home", "/html/home.html", [["#header"]], hui.pageParam, true);

            // 打開frame，設定其他可選參數，詳細請看apicloud的 api.openFrame的options參數
            hui.openContentFrame("home", "/html/home.html", [["#header"]], null, null, {
                vScrollBarEnabled: false,   // 是否顯示垂直滾動條
                allowEdit: true // 是否允許頁面長按彈出系統菜單
            });
      

過濾器

// 設定需要過濾器的api方法，通過hui.filter指定

            // 設定 hui.closeWin 點選的時候先執行過濾方法
            hui.filter = [
                {
                    enable: true,  // 是否全局啟用過濾器
                    handle: function () {   // 過濾器處理方法
                        alert("我是先執行的哦！");
                    },
                    emitter: hui.closeWin   // 綁定過濾器的api方法
                }
            ];

            // 設定 hui.closeWin 點選的時候先執行過濾方法，如果return false，則禁止向後執行，通用用來做是否登入權限控制
            hui.filter = [
                {
                    enable: true,  // 是否全局啟用過濾器
                    handle: function () {   // 過濾器處理方法
                        alert("你還沒登入哦");
                        return false;
                    },
                    emitter: hui.closeWin   // 綁定過濾器的api方法
                }
            ];

            // 綁定多個過濾器，可以為同一個方法綁定多個過濾器
            hui.filter = [
                {
                    enable: true,  // 是否全局啟用過濾器
                    handle: function () {   // 過濾器處理方法
                        alert("你還沒登入哦");
                        return false;
                    },
                    emitter: hui.closeWin   // 綁定關閉視窗時執行過濾方法
                },
                {
                    enable: true,  // 是否全局啟用過濾器
                    handle: function () {   // 過濾器處理方法
                        alert("你還沒登入哦");
                        return false;
                    },
                    emitter: hui.openWin   // 綁定打開視窗時執行過濾方法
                }
            ];

            // 設定過濾器白名單，也就是無需執行過濾認證，一般用來設定登入頁面，注冊頁面，驗證頁面，或其他頁面無需過濾認證
            // 隻需要在api方法中任意json對象參數中添加 filterEnable:false 即可，推薦用最後一個參數指定

            // 此方法的openWin不會執行 hui.filter綁定的過濾器，也就是所謂的白名單
            hui.openWin("login", "login.html", null, { filterEnable: false });
      

進階用法

api初始化

/*
          * api對象準備完畢
          * 輸入參數：
          * callback：api對象準備完畢執行回調函數，通常api對象的方法必須在這裡面編寫
          * DOMContentLoaded：HTML DOM節點加載完畢回調函數
          */

        // api對象加載完畢之後，擷取網絡連接配接
        hui.ready(function () {
            var connectionType = hui.connectionType;   // =>wifi
        });

        // 無需等待api對象加載完畢，即可操作DOM
        hui.ready(function () {
            var connectionType = hui.connectionType;   // =>wifi
        }, function () {
            var div = hui.$("div"); // 無需等待api對象，隻要dom加載完畢即可
        });
      

子產品引入

/*
              * 載入第三方子產品
              * 輸入參數：
              * modules：子產品名稱，可以是字元串，字元串數組，或者數組字元串
              */

            // 引入單個子產品，直接可以通過變量接收
            var bMap = hui.require("bMap");

            // 引入單個子產品，直接可以通過全局變量擷取
            hui.require("bMap");
            // 通過以下方式可以擷取子產品對象
            hui.M.bMap;     // 推薦寫法
            hui.M["bMap"];

            // 引入多個子產品，這種方式隻能通過數組索引擷取對象，不推薦
            var modules = hui.require("bMap,fs,db");
            modules[0]; // bMap對象
            modules[1]; // fs對象
            modules[2]; // db對象

            // 引入多個子產品，直接可以通過全局變量擷取，推薦
            hui.require("bMap,fs,db");
            hui.M.bMap; // bMap對象
            hui.M.fs;   // fs對象
            hui.M.db;   // db對象
            // 也可以通過下面方式
            hui.M["bMap"]; // bMap對象
            hui.M["fs"];   // fs對象
            hui.M["db"];   // db對象

            // 還可以通過數組方式引入
            hui.require(["bMap", "fs", "db"]);
            // 擷取方法如上
      

解決openWin切換性能

// openWin切換之是以卡，是因為轉場動畫和DOM渲染同步進行導緻的，隻要我們避免即可，目前内置了處理方法，如需其他處理，可以自行拓展

            // 第一步：為frame頁面的body添加class：<body class="hui-body">，這是頁面便會看不到，因為隐藏起來了，建議是上線階段再改，友善開發

            // 第二步：調用hui.optimizeLocation方法，此方法必須寫在window頁面才有作用

            /*
             * 解決openWin切換性能問題
             * 輸入參數：
             * frameName：frame名稱，必填
             * animateClassName：視窗切換完成後，DOM顯示動畫，預設是 hui-body-show，可自行拓展
             * delay：設定延遲時間，預設為100，機關毫秒，推薦100~300
             */

            // 在window頁面打開frame推薦寫法
            var framName = "badge_body";
            hui.openContentFrame(framName, null, [["#header"]]);
            // 解決openWin切換性能問題，完美原生體驗
            hui.optimizeLocation(framName);

            // 你也可以設定其他顯示動畫，自行拓展
            hui.optimizeLocation(framName, "你的動畫class名稱");

            // 你也可以設定其他顯示動畫，并設定延遲時間，自行拓展
            hui.optimizeLocation(framName, "你的動畫class名稱", 300);
      

更新記錄

# 2016.09.01 Hui 2.0.0

* [更新] hui.css
* [更新] hui.js
* [更新] 全部元件
* [優化] 頁面性能
      

項目位址

開源中國：https://git.oschina.net/baisoft_org/Hui-2.x

文檔位址

官方文檔：http://www.cnblogs.com/baisoft/p/5804168.html

體驗位址

Android：

IOS：

Web： 

如果您覺得本文對你有用，不妨幫忙點個贊，或者在評論裡給我一句贊美，小小成就都是今後繼續為大家編寫優質文章的動力，百小僧拜謝！

歡迎您持續關注我的部落格：)

作者：百小僧

版權所有，歡迎保留原文連結進行轉載：)