设置导航栏标题

setNavigationBarTitle

蓝信版本: ios: >6.5.8 android: >6.5.8 windows: 不支持 mac: 不支持

示例代码

lx.ui.setNavigationBarTitle({
  title: "String",
});

参数说明

字段	类型	必填	说明
title	String	否	导航栏标题文本，空字符串表示显示默认文本

全屏模式下设置导航栏颜色

setNavigationBarBgColor

全屏模式下设置导航栏颜色，状态栏会同步更新 注：仅在全屏模式下生效, 即在 url 后面拼接 lx_fullscreen=true 参数

蓝信版本: ios: >7.6.30 android: >7.6.30 windows: 不支持 mac: 不支持

示例代码

lx.ui.setNavigationBarBgColor({
  color: "String",
});

参数说明

字段	类型	必填	说明
color	String	否	导航栏背景颜色值 HexColor, 默认 #4E74BB

设置导航栏菜单

setNavigationBarMenu

切换页面需要将菜单清除，设置 items 为空数组

蓝信版本: ios: >6.5.8 android: >6.5.8 windows: 不支持 mac: 不支持

示例代码

lx.ui.setNavigationBarMenu({
  items: [
    {
      id: 1,
      name: "菜单1",
    },
  ],
  trigger: function (res) {
    /**
    {
      menuId: 1 // 点击的菜单id
    }
    */
  },
});

参数说明

字段	类型	必填	说明
items	Array	否	菜单项列表

items 结构说明

字段	类型	说明
id	Number	菜单 id，当点击菜单时将对应的菜单 id 回传
name	String	菜单名称

关闭当前网页窗口

closeWindow

蓝信版本: ios: >6.5.8 android: >6.5.8 windows: >6.6.110 mac: >6.6.202

示例代码

lx.ui.closeWindow();

打开新视图窗口

openView 桌面端只支持 url 参数

蓝信版本: ios: >6.6.45 android: >6.6.45 windows: >=7.32.30 mac: >=7.32.30

示例代码

lx.ui.openView({
  mode: "webview",
  navigationBarBackgroundColor: "#4E74BB",
  navigationBarFrontStyle: "white",
  url: "String",
  useSplitScreen: false,
});

参数说明

字段	类型	必填	默认值	前置依赖	说明
mode	String	否	webview	-	窗体模式 dialog / webview, 默认 webview; dialog 窗体由应用下方进入，打开后窗体背景为透明，没有导航栏，并禁用用户关闭行为，ios 禁用侧滑，android 禁用实体按键; webview 窗体由应用右侧进入，打开后与正常 webview 一致，通过参数改变 navigationBar 样式
navigationBarBackgroundColor	String	否	4E74BB	mode = webview	导航栏背景颜色值 HexColor，默认 #4E74BB
navigationBarFrontStyle	String	否	white	mode = webview	前景样式，包括按钮、标题、状态栏的前景色 black / white
url	String	是	-	-	需要打开页面的 url 链接 URLEncode
useSplitScreen	Boolean	否	false	pad 设备	仅在 pad 生效

监听页面返回接口

onHistoryBack

该接口可在用户返回上个页面时，回调开发者注册的函数，处理业务需要的逻辑（如确认或重定向到指定的页面）

响应函数须返回布尔值 false 或 true。false 表示中断此次返回操作，否则继续执行返回操作; 当页面左上角没有关闭按钮（即已是顶级页面），不产生该事件，强制执行返回；; iOS 系统使用手势返回时，不产生该事件，强制执行返回；

蓝信版本: ios: >6.6.45 android: >6.6.45 windows: >6.6.110 mac: >6.6.202

示例代码

lx.ui.onHistoryBack(function () {
  return confirm("确定要放弃当前页面的修改？"); // return false 不返回上一页面
});

获取客户端主题信息

getThemeInfo

获取客户端主题信息（字号缩放等）

蓝信版本: ios: >7.0.75 android: >7.0.75 windows: 不支持 mac: 不支持

示例代码

lx.ui.getThemeInfo({
  success: function (res) {
    /**
    {
      textSizeAdjust: 1 // 标准
      theme: "light"
    }
    */
  },
  fail: function (err) {},
});

SUCCESS 返回值说明

字段	类型	说明
textSizeAdjust	Number	客户端设置的字体缩放系数(基于标准字号); 1 - 标准; 1.25 - 大号; 1.5 - 特大
theme	String	客户端当前主题 ; light - 浅色模式； dark - 深色模式

页面不可见时的回调

onViewPause

当页面不可见时，蓝信会执行开发者设置的回调函数，开发者可以在回调函数中处理开发者自己的业务逻辑。

蓝信版本: ios: >7.0.75 android: >7.0.75 windows: 不支持 mac: 不支持

示例代码

lx.ui.onViewPause(function () {
  // 业务逻辑
});

页面重新可见的回调

onViewResume

当页面重新可见并可交互时，蓝信会执行开发者设置的回调函数，开发者可以在回调函数中处理开发者自己的业务逻辑。

蓝信版本: ios: >7.0.75 android: >7.0.75 windows: 不支持 mac: 不支持

示例代码

lx.ui.onViewResume(function () {
  // 业务逻辑
});

旋转屏幕到横屏状态

rotateView

旋转屏幕到横屏状态并隐藏页面导航栏。开发者在使用此 JSAPI 后，需要提供重置按钮，保证用户可以返回竖屏状态或退出页面

蓝信版本: ios: >7.0.75 android: >7.0.75 windows: 不支持 mac: 不支持

示例代码

lx.ui.rotateView({
  showStatusBar: true,
  clockwise: true,
});

参数说明

字段	类型	必填	说明
showStatusBar	Boolean	否	是否显示状态栏(iOS)，默认 true
clockwise	Boolean	否	是否为顺时针方向旋转，默认 true

重置屏幕状态

resetView

重置屏幕状态（恢复到竖屏状态），需与 ui.rotateView 配合使用。

蓝信版本: ios: >7.0.75 android: >7.0.75 windows: 不支持 mac: 不支持

示例代码

lx.ui.resetView();

设置扩展屏

setExtendedView

当应用为扩展屏应用时，开发者可以调用该事件控制底部 Tab 和顶部导航栏的显示和隐藏

蓝信版本: ios: >7.0.75 android: >7.0.75 windows: 不支持 mac: 不支持

示例代码

lx.ui.setExtendedView({
  fullscreen: true, //控制是否全屏显示，当应用配置的是扩展屏应用时生效
});

参数说明

字段	类型	必填	说明
fullscreen	Boolean	否	控制是否全屏显示，当应用为扩展屏应用时生效; ; true- 全屏显示，隐藏底部 Tab 和顶部导航栏; ; false- 显示底部 Tab 和顶部导航栏; ; 默认 false

errorCode 说明

code 值	message 值	说明
-6	CLIENT_INTERNAL_ERROR	客户端内部错误
80	-	不是扩展屏应用或设置失败

设置 iOS webview 回弹效果

webViewBounce

开发者可以调用该事件用于控制是否启用 iOS webview 的回弹效果

蓝信版本: ios: >7.0.75 android: 不支持 windows: 不支持 mac: 不支持

示例代码

lx.ui.webViewBounce({
  enable: true, //控制是否启用webview的回弹效果
});

参数说明

字段	类型	必填	说明
enable	Boolean	是	控制是否启用 webview 的回弹效果; ; 默认开启; ; true- 启用回弹效果; ; false- 禁用回弹效果

打开新应用

openApp

蓝信版本: ios: >6.5.8 android: >6.5.8 windows: 不支持 mac: 不支持

示例代码

lx.ui.openApp({
  type: 'webview',
  appId: '123-123'
  url: '',
  data: '',
  success: function (res) {},
  fail: function (error) {}
})

参数说明

字段	类型	必填	前置依赖	说明
type	String	是	-	应用类型 blueprint、webview
url	String	是	type 为 webview	url
appId	String	是	-	蓝信线下申请的应用 id，比如 123-123
data	String	否	type 为 blueprint	透传 Json 字符串，需要进行 UrlEncode

设置屏幕方向

setScreenDirection

蓝信版本: ios: >=8.0.0 android: >=8.0.0 windows: 不支持 mac: 不支持

示例代码

lx.ui.setScreenDirection({
  direction: 0, // 屏幕方向
  success: function () {},
  fail: function (error) {},
});

参数说明

字段	类型	必填	说明
direction	Number	是	1 - auto - 自动重力感应; 2 - landscape-横屏; 3 - portrait-竖屏

全屏显示

lx_fullscreen

蓝信版本: ios: >6.5.8 android: >6.5.8 windows: 不支持 mac: 不支持

在 url 后面拼接 lx_fullscreen=true 参数，全屏展示无导航栏，iframe 布局从状态栏顶部左上角开始。例如：https://host/path?lx_fullscreen=true

adjust_fullscreen_inset

蓝信版本: ios: >=8.1.0 android: >=8.1.0 windows: 不支持 mac: 不支持

在 url 后面拼接 adjust_fullscreen_inset=true 参数，全屏展示无导航栏，iframe 布局从状态栏底部左下角开始。例如：https://host/path?adjust_fullscreen_inset=true

pad_full_screen

蓝信版本: ios: >=8.1.0 android: >6.5.8 windows: 不支持 mac: 不支持

在左右分屏的 Pad 设备上，在 url 后面拼接 pad_full_screen=true 参数，页面将会全屏展示有导航栏，仅工作台生效。例如：http://host/path?pad_full_screen=true

以上两种方法无需引入 jssdk 的 js 文件，也无需 config。

监听主题信息变化

onThemeInfoChange

蓝信版本: ios: >=8.4.0 android: >=8.4.0 windows: 不支持 mac: 不支持

参数说明

字段	类型	必填	说明
theme	String	是	主题; dark - 深色模式；light - 浅色模式

示例代码

lx.ui.onThemeInfoChange((result) => {
  console.log(result);
});

result 说明

字段	类型	说明
theme	String	主题; dark - 深色模式；light - 浅色模式