UI（界面）

设置标题及相关属性

功能说明

用于界面的标题内容及颜色的配置。

此 JSAPI 与 UI 相关。

Android：具体实现在 TMFDemo 中。

功能接口

TMFJSBridge.invoke('setTitle', {title,titleColor}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
title string 标题内容 N /
titleColor string 标题颜色 N '#FFFFFF'

代码示例

<div>
<button onclick='tmf_setTitle();'>点击设置标题及相关属性</button>
<script>
function tmf_setTitle() {
    TMFJSBridge.invoke('setTitle', {
        title       : 'Title',      // string，可选，标题
        titleColor  : '#666666',    // string，可选，标题颜色
    }, function (res) {
                // callback
    });
}
</script>
</div>

注意事项

设置标题时，标题颜色需要传入有效字符串（16进制256颜色），也可以默认不设置颜色。

选择列表

功能说明

用于弹出选择内容的列表。

功能接口

TMFJSBridge.invoke('actionSheet', {title, message, buttons, cancelButton, destructiveButton}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
title string 标题内容 N ''
message string 列表详情内容 N '#FFFFFF'
buttons array 按钮标题列表 Y []
cancelButton string 取消按钮文案 默认索引为0 N /
destructiveButton string 删除按钮文案 默认索引为 -1 N /
出参 类型 描述
clickedButtonIndex integer 点击按钮的索引号 buttons 从 1 往下递增

代码示例

<div>
<button onclick='tmf_actionSheet();'>点击弹出选择列表</button>
<script>
function tmf_actionSheet() {
    TMFJSBridge.invoke('actionSheet', {
        title               : 'Title',                     // string，可选，标题
        message             : 'Message',                   // string，可选，信息
        buttons             : [ 'Eat', 'Drink', 'Play' ],  // array，必选，按钮列表
        cancelButton        : 'Cancel',                    // string，可选，取消按钮
        destructiveButton   : 'Delete',                    // string，可选，删除按钮（iOS）
    }, function (res) {
        clickedButtonIndex  : res.clickedButtonIndex,   // integer，点击按钮的索引
    });
}
</script>
</div>

注意事项

  • 使用选择列表功能时，需要指定所需的所有选择的标题内容，通过字符串数组传入 buttons 参数。
  • 接收到用户操作时，会进行回调，回调中 clickedButtonIndex 将给出用户点击的选择索引，根据索引处理相应的选择事件。

警告框

功能说明

用于弹出警告框。

功能接口

TMFJSBridge.invoke('alert', {title, message, okButton}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
title string 标题内容 N ''
message string 警告信息内容 N ''
okButton string 确定按钮文案 Y /
出参 类型 描述
clickedButtonIndex integer 点击按钮的索引号 buttons 从 1 往下递增

代码示例

<div>
<button onclick='tmf_alert();'>点击弹出警告框</button>
<script>
function tmf_alert() {
    TMFJSBridge.invoke('alert', {
        title       : 'Title',      // string，可选，标题
        message     : 'Message',    // string，可选，信息
        okButton    : 'OK',         // string，必选，确定按钮
    }, function (res) {
        clickedButtonIndex  : res.clickedButtonIndex,   // integer，点击按钮的索引
    });
}
</script>
</div>

注意事项

  • 使用警告框时，需要指定确定按钮的标题。
  • 接收到用户操作时，会进行回调，回调中 clickedButtonIndex 将给出用户点击的选择索引，根据索引处理相应的选择事件。
  • 警告框是模态弹窗，因此需要业务处理完当前逻辑后再进行下一个操作。

确认框

功能说明

用于弹出确认框。

功能接口

TMFJSBridge.invoke('confirm', {title, message, okButton, cancelButton}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
title string 标题内容 N ''
message string 警告信息内容 N ''
okButton string 确定按钮文案 Y /
cancelButton string 取消按钮文案 Y /
出参 类型 描述
clickedButtonIndex integer 点击按钮的索引号 buttons 从 1 往下递增

代码示例

<div>
<button onclick='tmf_confirm();'>点击弹出确认框</button>
<script>
function tmf_confirm() {
    TMFJSBridge.invoke('confirm', {
        title           : 'Title',      // string，可选，标题
        message         : 'Message',    // string，可选，信息
        okButton        : 'OK',         // string，必选，确定按钮
        cancelButton    : 'Cancel',     // string，必选，取消按钮
    }, function (res) {
        clickedButtonIndex  : res.clickedButtonIndex,   // integer，点击按钮的索引
    });
}
</script>
</div>

注意事项

  • 使用确认框时，需要指定确定按钮的标题及取消按钮的标题。
  • 接收到用户操作时，会进行回调，回调中 clickedButtonIndex 将给出用户点击的选择索引，根据索引处理相应的选择事件。
  • 确认框是模态弹窗，因此需要业务处理完当前逻辑后再进行下一个操作。

设置右上角按钮

功能说明

用于界面右上角按钮的配置。

此 JSAPI 与 UI 相关。

Android：具体实现在 TMFDemo 中。

功能接口

TMFJSBridge.invoke('setOptionMenu', {title, titleColor}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
items 数组 - - -
index int 按钮下标 Y 0
title string 按钮标题内容 N ''
titleColor string 按钮标题颜色 N '#FFFFFF'
action function 按钮动作回调 N -

代码示例

<div>
<button onclick='tmf_setOptionMenu();'>点击设置右上角按钮</button>
<script>
function tmf_setOptionMenu() {
     TMFJSBridge.invoke('setOptionMenu', {
        items:[
            {
               index       : 0 ,
               title       : '关闭网页（set）',   // string，可选，标题
               titleColor  : color,   // string，可选，标题颜色
               action      : function(res){
                    alert(JSON.stringify(res));
                    tmf_closeContainer();
               }
            },
            {
              index       : 1 ,
              title       : '复制链接（set）',   // string，可选，标题
              titleColor  : color,   // string，可选，标题颜色
              action      : function(res){
                  alert(JSON.stringify(res));
              }
            },
            {
              index       : 2 ,
              title       : '在浏览器打开（set）',
              titleColor  : color,
              action      : function(res){
                  alert(JSON.stringify(res));
              }
            }
    ]}, function (res) {
                  // callback
    });
}
</script>
</div>

注意事项

设置右上角按钮标题时，标题颜色需要传入有效字符串（16进制256颜色），也可以默认不设置颜色。

显示右上角按钮

功能说明

用于设置界面右上角按钮显示。

此 JSAPI 与 UI 相关。

Android：具体实现在 TMFDemo 中。

功能接口

TMFJSBridge.invoke('showOptionMenu', {}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /

代码示例

<div>
<button onclick='tmf_showOptionMenu();'>点击显示右上角按钮</button>
<script>
function tmf_showOptionMenu() {
    TMFJSBridge.invoke('showOptionMenu', {
    }, function (res) {
        // callback
    });
}
</script>
</div>

隐藏右上角按钮

功能说明

用于设置界面右上角按钮隐藏。

此 JSAPI 与 UI 相关。

Android：具体实现在 TMFDemo 中。

功能接口

TMFJSBridge.invoke('hideOptionMenu', {}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /

代码示例

<div>
<button onclick='tmf_hideOptionMenu();'>点击隐藏右上角按钮</button>
<script>
function tmf_hideOptionMenu() {
    TMFJSBridge.invoke('hideOptionMenu', {
    }, function (res) {
        // callback
    });
}
</script>
</div>

显示加载中

功能说明

用于显示加载中界面。

功能接口

TMFJSBridge.invoke('showLoading', {title, detail}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
title string 加载界面标题 N ''
detail string 加载界面内容 N ''

代码示例

<div>
<button onclick='tmf_showLoading();'>点击显示加载中</button>
<script>
function tmf_showLoading() {
    TMFJSBridge.invoke('showLoading', {
        title       : 'Loading...',   // string，可选，标题
        detail      : '',   // string，可选，内容
    }, function (res) {
        // callback
    });
}
</script>
</div>

注意事项

展示的加载中界面是独立且唯一的，如果需要加载新的加载中界面，请先调用 hideLoading 接口隐藏之前的加载中界面。否则，会直接替换掉当前显示的加载中界面。

隐藏加载中

功能说明

用于隐藏加载中界面。

功能接口

TMFJSBridge.invoke('hideLoading', {}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /

代码示例

<div>
<button onclick='tmf_hideLoading();'>点击隐藏加载中</button>
<script>
function tmf_hideLoading() {
    TMFJSBridge.invoke('hideLoading', {
    }, function (res) {
        // callback
    });
}
</script>
</div>

注意事项

  • 隐藏加载中界面是全局唯一的，使用 hideLoading 接口会隐藏加载中界面。
  • 加载中界面需要主动隐藏，请在业务加载事件结束后调用隐藏加载中界面的接口。

弱提示

功能说明

用于弹出 Toast。

此 JSAPI 与 UI 相关。

Android：具体实现在 TMFDemo 中。

功能接口

TMFJSBridge.invoke('showToast', {title, detail, duration}, callback)
入参 类型 描述 必选 默认值
callback function 返回值回调函数 Y /
title string 弱提示标题 N ''
detail string 弱提示详情内容 N ''
duration double 弱提示持续时长 N 2.0

代码示例

<div>
<button onclick='tmf_showToast();'>点击展示弱提示</button>
<script>
function tmf_showToast() {
    TMFJSBridge.invoke('showToast', {
        title       : 'Success',   // string，可选，标题
        detail      : '',   // string，可选，内容
        duration    : 2.0,  // double，可选，toast 出现的时间，单位 s，默认为 2.0s
    }, function (res) {
        // callback
    });
}
</script>
</div>

注意事项

弱提示是全局独立唯一的，不可以同一个时间弹出多个弱提示，当弹出下一个弱提示时，会取消掉上一个弱提示。

Copyright © 2013-2023 Tencent Cloud. all right reserved，powered by GitbookUpdate Time 2023-08-31 14:46:07

results matching ""

    No results matching ""