页面功能
需要加载的模块
const eeui = app.requireModule('eeui');
eeui.openPage
- 打开新
App Js页面
或 打开新Web页面
/**
* @param params 详细参数
* @param callback 回调事件
*/
eeui.openPage({params}, callback(result))
params 参数说明(参数支持url字符串请求,如:
http://abc.com/xxx.js?statusBarType=immersion
)
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
url | String | √ | 页面地址 ①支持本地地址,如: xxx.js ②支持远程地址,如: http://abc.com/xxx.js 可使用 root:// 表示 src 目录,比如首页: root://pages/index.js | - |
pageName | String | - | 页面名称 | - |
pageTitle | String | - | 页面标题,设置显示标题栏 statusBarType 为 normal 时有效。(标题栏更多设置) | - |
pageType | String | - | 页面类型:app 、web 可填写 auto 系统自动识别 (不建议) | app |
params | Object | - | 页面传递参数,通过app.config.params 获取 | - |
cache | Number | - | 页面缓存时间,仅app 类型且非本地页面 有效,设置 0 不缓存(单位:毫秒) | 0 |
loading | Boolean | - | 是否显示等待效果:true 、false | true |
loadingBackground | Boolean | - | 是否显示等待效果过渡背景:true 、false | false |
animated | Boolean | - | 是否进入页面需要动画效果:true 、false | true |
animatedType | String | - | 页面动画效果类型:push 右侧打开present 底部弹出animated 为 true 时有效 | iOS:push Android:跟随系统 |
swipeBack | Boolean | - | 是否支持滑动返回:true 、false | true |
swipeFullBack | Boolean | - | 是否支持全屏滑动返回:true 、false swipeBack 为 true 时有效 | false |
swipeColorBack | Boolean | - | 是否为滑动返回界面设置状态栏颜色跟随滑动:true 、false swipeBack 为 true 时有效 | true |
statusBarType | String | - | 状态栏样式:normal 正常fullscreen 全屏immersion 沉浸式 | normal |
statusBarColor | String | - | 状态栏颜色值 statusBarType 为 normal 时有效 | 继承 > #3EB4FF |
statusBarAlpha | Number | - | 状态栏透明度, 0-255 statusBarType 为 normal 时有效 | 0 |
statusBarStyle | Boolean | - | 状态栏字体颜色:true 状态栏的字体为白色false 状态栏的字体为黑色 | iOS:黑 Android:白 |
softInputMode | String | - | 键盘弹出方式: 详见下文 params.softInputMode 参数说明 | auto |
backgroundColor | String | - | 页面背景颜色 | 继承 > #ffffff |
backPressedClose | Boolean | - | 允许按返回键关闭页面 | true |
safeAreaBottom | Number | - | iPhone X+底部安全距离 | - |
params.softInputMode 参数说明
值 | 说明 |
---|---|
auto | iOS:当显示软键盘时,自动调整window的布局; Android:系统去判断内容区域可滚动为pan,不可滚动为resize。 |
pan | iOS:当显示软键盘时,自动调整window的布局; Android:当显示软键盘时,调整window的空白区域来显示软键盘。 |
resize | 当显示软键盘时,自动调整window的布局。 |
nothing | 当显示软键盘时,不调整window的布局。 |
callback 回调
result
说明
{
pageName: '页面名称',
status: 'create', //状态,详见:注①
//status=statusChanged|errorChanged|titleChanged
webStatus: '', //Web状态
//status=errorChanged
errCode: '', //错误代码
errMsg: '', //错误描述
errUrl: '', //错误地址
//status=titleChanged
title: '', //网页标题
}
注①:
create
页面创建完毕start
页面正在启动resume
页面已在前台可见pause
页面正在停止stop
页面即将停止或者完全被覆盖restart
页面正在重新启动destroy
页面已销毁viewCreated
AppJS第一个视图的呈现完成renderSuccess
AppJS呈现视图阶段结束error
AppJS运行时报告异常statusChanged
Web状态发生改变errorChanged
Web运行时报告异常titleChanged
Web标题发生改变
简单示例
const eeui = app.requireModule('eeui');
//示例①
eeui.openPage({
url: 'http://dotwe.org/raw/dist/ad0045a7cff0b3a680d9de6dd4806e81.bundle.wx',
}, function(result) {
//......
});
//示例②
eeui.openPage({
url: 'http://dotwe.org/raw/dist/ad0045a7cff0b3a680d9de6dd4806e81.bundle.wx?statusBarType=immersion',
}, function(result) {
//......
});
//示例③
eeui.openPage({
pageName: 'pageName_1',
pageType: 'app',
url: 'xxxx.js'
}, function(result) {
//......
});
//示例④
eeui.openPage({
pageType: 'web',
url: 'https://eeui.app'
}, function(result) {
//......
});
eeui.getPageInfo
- 获取页面信息
/**
* @param params 详细参数
*/
eeui.getPageInfo({params})
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空获取当前页面(不建议留空) | - |
简单示例
//示例①
let variable = eeui.getPageInfo({
pageName: 'pageName_1',
});
//示例②
let variable = eeui.getPageInfo('pageName_1');
//variable返回示例
{
"url": "http://....../dist/index.js",
"pageName": "open_qGRQ9fHP",
"pageType": "app",
"params": { },
"cache": 0,
"loading": true,
"swipeBack": true,
"swipeFullBack": false,
"statusBarType": "default",
"statusBarColor": "#3EB4FF",
"statusBarAlpha": 0,
"softInputMode": "auto",
"translucent": false,
"backgroundColor": "#f4f8f9",
"backPressedClose": true,
}
eeui.getPageInfoAsync
- 获取页面信息(异步)
/**
* @param params 详细参数
*/
eeui.getPageInfoAsync({params}, callback(pageInfo))
eeui.reloadPage
- 重新加载
App Js页面
或Web页面
/**
* @param params 详细参数
*/
eeui.reloadPage({params})
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空重载当前页面(不建议留空) | - |
url | String | - | 页面新地址 | - |
简单示例
//示例①
eeui.reloadPage({
pageName: 'pageName_1',
});
//示例②
eeui.reloadPage('pageName_1');
eeui.setSoftInputMode
- 设置键盘弹出方式
/**
* @param params 页面名称参数
* @param mode 键盘弹出方式:
auto: iOS:当显示软键盘时,自动调整window的布局;Android:系统去判断内容区域可滚动为pan,不可滚动为resize。
pan: iOS:当显示软键盘时,自动调整window的布局;Android:当显示软键盘时,调整window的空白区域来显示软键盘。
resize: 当显示软键盘时,自动调整window的布局。
nothing: 当显示软键盘时,不调整window的布局。
*/
eeui.setSoftInputMode({params}, mode)
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空表示当前页面(不建议留空) | - |
简单示例
//示例①
eeui.setSoftInputMode({
pageName: 'pageName_1',
}, 'pan');
//示例②
eeui.setSoftInputMode('pageName_1', 'resize');
eeui.setPageBackPressed
- 拦截返回按键事件
/**
* @param params 页面名称参数
* @param callback 返回键触发事件
*/
eeui.setPageBackPressed({params}, callback())
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空拦截当前页面(不建议留空) | - |
简单示例
//示例①
eeui.setPageBackPressed({
pageName: 'pageName_1',
}, function(){
//返回键触发事件
});
//示例②
eeui.setPageBackPressed('pageName_1', function(){
//返回键触发事件
});
eeui.setOnRefreshListener
- 仅对
App Js页面
有效,监听下拉刷新事件,下拉刷新事件结束后请使用eeui.setRefreshing(pageName, false)
设置下拉刷新结束状态
/**
* @param params 页面名称参数
* @param callback 下拉刷新回调事件
*/
eeui.setOnRefreshListener({params}, callback(pageName))
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空表示当前页面(不建议留空) | - |
简单示例
//示例①
eeui.setOnRefreshListener({
pageName: 'pageName_1',
}, function(pageName){
//下拉刷新回调事件
eeui.setRefreshing(pageName, false);
});
//示例②
eeui.setOnRefreshListener('pageName_1', function(pageName){
//下拉刷新回调事件
eeui.setRefreshing(pageName, false);
});
eeui.setRefreshing
- 仅对
App Js页面
有效,设置下拉刷新状态,主要用于eeui.setOnRefreshListener
回调处理完成后设置结束状态
/**
* @param params 页面名称参数
* @param refreshing 状态:true|fals
*/
eeui.setRefreshing({params}, refreshing)
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空表示当前页面(不建议留空) | - |
eeui.setStatusBarStyle
- 修改当前页面状态栏样式(字体颜色)
/**
* @param isLight 详见 isLight 参数说明
*/
eeui.setStatusBarStyle(isLight)
isLight 参数说明
true
状态栏的字体为白色false
状态栏的字体为黑色
eeui.setPageStatusListener
- 添加监听页面状态变化
/**
* @param params 监听名称(参数)
* @param callback 回调事件,参数详见【eeui.openPage】的回调事件
*/
eeui.setPageStatusListener({params}, callback(result))
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
listenerName | String | √ | 监听名称(用于防止重复监听) | - |
pageName | String | - | 页面名称,留空表示当前页面 | - |
简单示例
//示例①
eeui.setPageStatusListener('listenerName_1', function(pageName){
//回调事件,参数详见【eeui.openPage】的回调事件
});
//示例②
eeui.setPageStatusListener({
listenerName: 'listenerName_1',
pageName: 'pageName_1',
}, function(pageName){
//回调事件,参数详见【eeui.openPage】的回调事件
});
eeui.clearPageStatusListener
- 清除监听页面状态变化
/**
* @param params 监听名称(参数)
*/
eeui.clearPageStatusListener({params})
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
listenerName | String | √ | 监听名称 | - |
pageName | String | - | 页面名称,留空表示当前页面 | - |
简单示例
//示例①
eeui.clearPageStatusListener('listenerName');
//示例②
eeui.clearPageStatusListener({
listenerName: 'listenerName_1',
pageName: 'pageName_1',
});
eeui.onPageStatusListener
- 手动执行(触发)页面状态
/**
* @param params 监听名称(参数)
* @param status 状态标识
*/
eeui.onPageStatusListener({params}, status)
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
listenerName | String | - | 监听名称,留空表示当前页面所有 | - |
pageName | String | - | 页面名称,留空表示当前页面 | - |
extra | Object | - | 额外传递参数 | - |
简单示例
//示例①
eeui.onPageStatusListener('status_1');
//示例②
eeui.onPageStatusListener('listenerName_1', 'status_1');
//示例③
eeui.onPageStatusListener({
listenerName: 'listenerName_1',
pageName: 'pageName_1',
}, 'status_1');
eeui.getCacheSizePage
- 获取
App Js页面
缓存大小
/**
* @param callback 回调事件,{size:123123},单位:字节B
*/
eeui.getCacheSizePage(callback(result))
eeui.clearCachePage
- 手动清除缓存
App Js页面
eeui.clearCachePage()
eeui.closePage
- 关闭
App Js页面
或Web页面
/**
* @param params 详细参数
*/
eeui.closePage({params})
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空关闭当前页面(不建议留空) | - |
animated | Boolean | - | 是否弹出页面需要动画效果:true 、false | true |
简单示例
//示例①
eeui.closePage({
pageName: 'pageName_1',
});
//示例②
eeui.closePage('pageName_1');
eeui.closePageTo
- 关闭至某个
App Js页面
或Web页面
- 场景示例:目前顺序打开a、b、c、d、e五个页面,e为当前页面,想要直接回到a页面时可以使用此方法。
/**
* @param params 详细参数
*/
eeui.closePageTo({params})
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
pageName | String | - | 页面名称,留空关闭当前页面(不建议留空) | - |
简单示例
//示例①
eeui.closePageTo({
pageName: 'pageName_1',
});
//示例②
eeui.closePageTo('pageName_1');
eeui.openWeb
- 调用系统浏览器打开页面
/**
* @param url
*/
eeui.openWeb(url)
url 参数说明
类型 | 必须 | 描述 | 默认值 |
---|---|---|---|
String | √ | 打开的页面url | - |
简单示例
eeui.openWeb('https://eeui.app');
eeui.goDesktop
- 返回手机桌面
/**
* @param url
*/
eeui.goDesktop()
eeui.getConfigString
- 获取eeui.config.js配置文件指定参数
/**
* @param key 参数名称
* @return String
*/
let appKey = eeui.getConfigString("appKey");
eeui.setCustomConfig
- 自定义eeui.config.js配置参数(比如:用于动态设置homePage主页的JS地址)
- 注意:有新的热更新或通过系统级清理app缓存后
eeui.setCustomConfig
设置的内容将失效。
/**
* @param key 参数名称(类型:字符串)
* @param value 参数值(类型:Object)
*/
eeui.setCustomConfig("homePage", "index.js");
eeui.getCustomConfig
- 获取eeui.config.js所有自定义的配置参数(仅返回自定义的配置参数)
/**
* @return Object
*/
let config = eeui.getCustomConfig();
eeui.clearCustomConfig
- 清除eeui.config.js自定义的配置参数(仅清除自定义的配置参数)
eeui.clearCustomConfig();
eeui.realUrl
- 规范化url,删除多余的符号连接(比如'/./', '/../' 以及多余的'/')
/**
* @param url 要处理的原地址
* @return String
*/
let newUrl = eeui.realUrl("http://abc.com/aa/bb/cc/.././demo.js");
eeui.rewriteUrl
- 将相对地址基于当前地址补全
/**
* @param url 要补全的相对地址
* @return String
*/
let newUrl = eeui.rewriteUrl("demo.js");