Hui之Hui.js 官方文档

休闲灌水
0 4770
baiqian baiqian 11月14日 19:38
普通会员 积分:0

基础

 

 // 判断值是否是指定数据类型
        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("
");

  

 // 模仿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);

  

模板引擎

 


    

    

  

  

属性

 

 // 获取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:,这是页面便会看不到,因为隐藏起来了,建议是上线阶段再改,方便开发

            // 第二步:调用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: 

 

本文转载自:https://www.cnblogs.com/baiqian/p/5804168.html