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：
Hui之Hui.js 官方文档的更多相关文章
- bootbox.js官方文档中文版
bootbox.js官方文档中文版简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Boot ...
- node.js官方文档解析 02—buffer 缓冲器
Buffer 类的实例类似于整数数组,但 Buffer 的大小是固定的.且在 V8 堆外分配物理内存.Buffer 的大小在被创建时确定,且无法调整. Buffer 类在 Node.js 中是一个全局 ...
- Node.js官方文档：到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)？
译者按: Node.js文档阅读系列之一. 原文: Overview of Blocking vs Non-Blocking 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 这篇博客 ...
- node.js官方文档解析 01—assert 断言
assert-------断言 new assert.AssertionError(options) Error 的一个子类,表明断言的失败. options(选项)有下列对象 message < ...
- bootbox.js官方文档
简介 Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事 ...
- node.js官方文档chm电子书的制作
制作软件:WebCHMSetup2.22.zip,http://www.onlinedown.net/soft/31553.htm 制作好的电子书:Node.js(v6.10.2).zip 参考链接: ...
- Vue.js官方文档学习笔记(一)起步篇
Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...
- vue.js官方文档 PDF
链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks
- Vue.js官方文档学习笔记(三)创建Vue实例
创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...
随机推荐
- jquery 拖拽，框选的一点积累
拖拽draggable,框选 selectable,按ctrl多选,临近辅助对齐,从工具栏拖工具 等,和jqueryui的selectable不同,是在一个父div里框选子div(类似框选文件),一 ...
- ios语音输入崩溃
游戏中任何可以输入的地方,只要调用语音输入,必然会导致app崩溃,解决方法如下: ok, so essentially the gist of it is that siri wants gl con ...
- 了解HTML锚点
概念 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用i ...
- Lasso回归算法： 坐标轴下降法与最小角回归法小结
前面的文章对线性回归做了一个小结,文章在这: 线性回归原理小结.里面对线程回归的正则化也做了一个初步的介绍.提到了线程回归的L2正则化-Ridge回归,以及线程回归的L1正则化-Lasso回归.但是对 ...
- 给Easyui combobox设定默认值
今天做到那个北理工二期的项目,里面刚好有几个dialog需要弄一个默认值,一般是选择启用与否,但是,为了方便用户,最好有一个默认值,所以,增加一个默认值的属性.代码入下: JS代码: ...
- Objective-C中把数组中字典中的数据转换成URL
可能上面的标题有些拗口,学过PHP的小伙伴们都知道,PHP中的数组的下标是允许我们自定义的,PHP中的数组确切的说就是键值对.而在OC我们要用字典(Dictionary)来存储,当然了Java用的是M ...
- （转）使用minicpan创建本地CPAN
在临时的办公场所网络不畅,有时不能下载cpan上的软件包,所有只能自建一个cpan. 这里使用了工具'minicpan',简单地说:就是把互联网上的CPAN搬到自己的电脑里,它的最初想法来自Randa ...
- objective-c 语法快速过（3）
oc 里的匿名对象 oc 这里,很少用到,因为并不适用于oc的内存管理,只是面试笔试也许出现,要求能看懂,不要在项目里这样写,因为写匿名对象,会造成内存泄露 #import <Foundatio ...
- 行程编码（atoi函数）
#include<iostream> #include<string> #include<vector> using namespace std; void jie ...
- JS函数相关及递归函数的使用
JS函数相关及递归函数的使用 通用js程序: function 函数名(参数列表) { 函数体 } 可使用alert()输出,也可用return返回值. alert与return区别: functio ...