UI 界面控制选项 - WebApp快捷打包

敬告：此 DEMO 演示为开放测试页面，仅用于开发者快速测试体验应用功能，请严格遵守开发者协议，了解更多。

主题颜色 theme

/* CSS theme 深色/色浅 主题演示区 */
@media (prefers-color-scheme: dark) {
  .dark-theme {
    background: #333;
    color: #eee;
  }
}

是否支持媒体查询

//请参考 MDN 文档
alert(window.matchMedia ? "支持" : "系统版本过低，不支持媒体查询接口。");

当前是否为深色/浅色模式

//CSS prefers-color-scheme 请参考 MDN 文档
//支持 iOS 13+、Android 10+
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
alert(isDark ? '深色' : '浅色');

监听主题色变化

if (window.matchMedia) {
  if (!window.myGlobalDarkQuery) {
    window.myGlobalDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
  }
  //请参考 MDN 文档
  window.myGlobalDarkQuery.onchange = (e) => {
    alert(e.matches ? '深色' : '浅色');
  };
  alert('已监听，请切换主题颜色。');
} else {
  alert('系统版本过低，不支持媒体查询接口。');
}

移除监听

if (window.myGlobalDarkQuery) {
  window.myGlobalDarkQuery.onchange = null;
  alert('已移除监听');
}

setTheme 设置主题

theme:

//支持 iOS 13+、Android 10+
//所有参数都是可选的
//未提供或值为 null 的参数则对应的设置项保持不变
jsBridge.setTheme({
  //主题颜色，可能值 default 跟随系统, dark 深色, light 浅色
  theme: "{{setTheme.theme}}"
}, function(success, res) {
  if (success) {
    alert('设置成功');
  } else {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

getTheme 获取主题

//支持 iOS 13+、Android 10+
jsBridge.getTheme(function(success, res) {
  if (success) {
    //res 属性参考 setTheme 的参数说明
    alert(JSON.stringify(res));
  } else {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

状态栏 statusBar

setStatusBar 设置状态栏

可见性 visible:

文字/图标 contentStyle:

背景色 backgroundColor:

沉浸式覆盖 overlays:

//所有参数都是可选的
//未提供或值为 null 的参数则对应的设置项保持不变
jsBridge.setStatusBar({
  //可见性, true 显示, false 隐藏
  visible: {{setStatusBar.visible}},
  //文字/图标, default 默认, light 浅色, dark 深色
  //iOS 当状态栏沉浸式显示时此参数才有效，否则深底色时自动显示为浅色，浅底色时自动显示为深色
  contentStyle: "{{setStatusBar.contentStyle}}",
  //背景色
  //iOS 当标题栏可见时始终显示为标题栏背景色
  backgroundColor: "{{setStatusBar.backgroundColor}}",
  //沉浸式覆盖
  //true  沉浸式（状态栏覆盖到网页上）
  //false 非沉浸式
  overlays: {{setStatusBar.overlays}}
}, function(success, res) {
  if (!success) {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

getStatusBar 获取状态栏

jsBridge.getStatusBar(function(success, res) {
  if (success) {
    //res.height 状态栏高度
    //res 其他属性参考 setStatusBar 的参数说明
    alert(JSON.stringify(res));
  } else {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

标题栏 titleBar

setTitleBar 设置标题栏

可见性 visible:

内容色 contentColor:

背景色 backgroundColor:

//所有参数都是可选的
//未提供或值为 null 的参数则对应的设置项保持不变
jsBridge.setTitleBar({
  //可见性, true 显示, false 隐藏
  visible: {{setTitleBar.visible}},
  //内容色
  contentColor: "{{setTitleBar.contentColor}}",
  //背景色
  backgroundColor: "{{setTitleBar.backgroundColor}}"
}, function(success, res) {
  if (!success) {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

getTitleBar 获取标题栏

jsBridge.getTitleBar(function(success, res) {
  if (success) {
    //res 属性参考 setTitleBar 的参数说明
    alert(JSON.stringify(res));
  } else {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

安卓导航栏（底部虚拟按键区）navigationBar

setNavigationBar 设置导航栏

可见性 visible:

背景色 backgroundColor:

沉浸式覆盖 overlays:

//所有参数都是可选的
//未提供或值为 null 的参数则对应的设置项保持不变
jsBridge.setNavigationBar({
  //可见性
  //true 显示, false 隐藏
  visible: {{setNavigationBar.visible}},
  //背景色
  backgroundColor: "{{setNavigationBar.backgroundColor}}",
  //沉浸式覆盖
  //true  沉浸式（导航栏覆盖到网页上）
  //false 非沉浸式
  overlays: {{setNavigationBar.overlays}}
}, function(success, res) {
  if (!success) {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

getNavigationBar 获取导航栏

jsBridge.getNavigationBar(function(success, res) {
  if (success) {
    //res 属性参考 setNavigationBar 的参数说明
    alert(JSON.stringify(res));
  } else {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

配置选项 option

setOption 设置配置选项

主题

theme:

状态栏

可见性 visible:

文字/图标 contentStyle:

背景色 backgroundColor:

沉浸式覆盖 overlays:

标题栏

可见性 visible:

内容色 contentColor:

背景色 backgroundColor:

安卓导航栏

可见性 visible:

背景色 backgroundColor:

沉浸式覆盖 overlays:

//所有参数都是可选的
//未提供或值为 null 的参数则对应的设置项保持不变
jsBridge.setOption({
  //同 setTheme
  theme: {
    theme: "{{setTheme.theme}}"
  },
  //同 setStatusBar
  statusBar: {
    visible: {{setStatusBar.visible}},
    contentStyle: "{{setStatusBar.contentStyle}}",
    backgroundColor: null,// "{{setStatusBar.backgroundColor}}",
    overlays: null//{{setStatusBar.overlays}}
  },
  //同 setTitleBar
  titleBar: {
    visible: {{setTitleBar.visible}},
    contentColor: "{{setTitleBar.contentColor}}",
    backgroundColor: "{{setTitleBar.backgroundColor}}"
  },
  //同 setNavigationBar
  navigationBar: {
    visible: {{setNavigationBar.visible}},
    backgroundColor: "{{setNavigationBar.backgroundColor}}",
    overlays: {{setNavigationBar.overlays}}
  }
}, function(success, res) {
  if (!success) {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});

getOption 获取配置选项

jsBridge.getOption(function(success, res) {
  if (success) {
    //res 属性参考各个 get 接口的参数说明
    alert(JSON.stringify(res));
  } else {
    alert(`失败\n${JSON.stringify(res)}`);
  }
});