UIWebBrowser

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

UIWebBrowser 是一个可加载 html 文件的 webView。调用 open 接口相当于打开了一个 frame。开发者可通过相应的参数设置、更改、重置该 “frame” 的大小、位置。

注意

1、UIWebBrowser插件打开的页面不支持YonBuilder移动开发平台提供的api接口和插件类接口以及apiready接口

2、UIWebBrowser支持alert接口和console接口(ios不支持console)

open

打开插件

open({params}, callback(ret))

params

path:

  • 类型:字符串
  • 描述:打开的页面所加载的 html 文件路径,支持本地、网络协议(http://、fs://、widget://)

rect:

  • 类型:JSON 对象
  • 描述:(可选项)插件的位置及尺寸
  • 内部字段:
{
    x: 0,       //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
    y: 0,       //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
    w: 320,     //(可选项)数字类型;插件的宽度,支持auto;默认:所属 Window 或 Frame 的宽度
    h: 220      //(可选项)数字类型;插件的高度,支持auto;默认:w - 100
}

button:

  • 类型:JSON对象
  • 描述:(可选项)插件上的控制按钮配置,本参数可不传,若不传则不显示控制按钮
  • 内部字段:
{
      normal: '',         //字符串类型;按钮常态下的背景图标路径
      highlight: '',      //(可选项)字符串类型;按钮点击状态下的高亮背景图标路径,若不传则同 normal
      selected: '',       //(可选项)字符串类型;按钮点击后的背景图标路径,若不传则同 normal
      width: 40,          //(可选项)数字类型;按钮的宽;默认:50
      height: 20,         //(可选项)数字类型;按钮的高;默认:30
      position: 'bottom'  //(可选项)字符串类型;按钮的位置,取值范围如下:
                          // bottom:紧贴插件视图下边缘居中(左右方向)显示
                          // top:紧贴插件视图上边缘居中(左右方向)显示
}

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:插件依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)插件是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',     //字符串类型;交互事件类型,取值范围如下:
                           // show:打开插件并显示在屏幕上
                           // click:点击按钮事件
    buttonState: 'selected'//字符串类型;按钮的点击状态,取值范围:selected(点击状态)、normal(未点击状态)
}

示例代码

var obj = api.require('UIWebBrowser');
obj.open({
    rect: {
        x: 0,
        y: 0,
        w: 320,
        h: 190
    },
    path: '../UIWebBrowser-con.html',
    fixedOn: api.frameName,
    fixed: true,
    button: {
        normal: 'widget://res/UIWebBrowser/normal.png',
        highlight: 'widget://res/UIWebBrowser/highlight.png',
        selected: 'widget://res/UIWebBrowser/selected.png',
        title: 'test',
        width: 55,
        height: 30,
        position: 'bottom'
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏插件

hide()

示例代码

var UIWebBrowser = api.require('UIWebBrowser');
UIWebBrowser.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的插件

show()

示例代码

var UIWebBrowser = api.require('UIWebBrowser');
UIWebBrowser.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭插件

close()

示例代码

var UIWebBrowser = api.require('UIWebBrowser');
UIWebBrowser.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setRect

重设插件的 rect

setRect({params})

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)插件的位置及尺寸
  • 内部字段:
{
    x: 0,       //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:原值
    y: 0,       //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:原值
    w: 320,     //(可选项)数字类型;插件的宽度;默认:原值
    h: 220      //(可选项)数字类型;插件的高度;默认:原值
}

animation:

  • 类型:布尔
  • 描述:(可选项)重设 rect 时,是否带动画效果
  • 默认:true

示例代码

var UIWebBrowser = api.require('UIWebBrowser');
UIWebBrowser.setRect({
    rect: {
        x: 0,
        y: 0,
        w: 320,
        h: 420
    },
    animation: true
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSelected

设置按钮选中/取消状态

setSelected({params})

params

selected:

  • 类型:布尔
  • 默认值:true
  • 描述:(可选项)是否要将指定索引的按钮设置为选中状态

示例代码

var UIWebBrowser = api.require('UIWebBrowser');
UIWebBrowser.setSelected({
    selected: true
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

是否仍需要帮助? 请保持联络!
最后更新于 2024/12/2