Float Web View

/ Title: floatWebView Description: floatWebView /

create eval show hide remove offset size noTouch noLimit center canFocus followTouch stickSide 悬浮窗内方法 event

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例（模块demo论坛帖链接），示例中包含示例代码、知识点讲解、注意事项等，供您参考。

作者联系方式QQ：503870798 ；有不解的地方可以随时咨询，同时欢迎提供有效意见和建议

模块demo论坛帖：https://community.apicloud.com/bbs/thread-173419-1-1.html

概述

简介

本模块主要是为创建一个悬浮窗，Android7.0版本以上适用。编译的时候，记得使用升级环境编译。悬浮窗内容为html页面

模块接口

create

创建一个悬浮窗，悬浮窗为一个html网页，该网页有一个floatWebView的对象，包含了功能相同的show，hide，remove，offset，size，noTouch，noLimit，center，canFocus，followTouch，stickSide方法，以及event方法用于和APP交互

create({params}, callback(ret, err))

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

url：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗html地址，支持http:// 和 widget:// 路径

w：

  • 类型：整数
  • 默认值：屏幕宽度*0.6
  • 描述：（可选项）悬浮窗的宽度

h：

  • 类型：整数
  • 默认值：屏幕高度*0.6
  • 描述：（可选项）悬浮窗的高度

x：

  • 类型：整数
  • 默认值：0
  • 描述：（可选项）悬浮窗坐标x方向偏移量

y：

  • 类型：整数
  • 默认值：0
  • 描述：（可选项）悬浮窗坐标y方向偏移量

noTouch：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）悬浮窗不可触摸，不能拦截触摸事件

noLimit：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）悬浮窗不限制在屏幕内

center：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）悬浮窗居中，默认为false，也就是悬浮窗在左上方

followTouch：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）悬浮窗是否跟随触摸控制移动

stickSide：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）悬浮窗是否需要自动贴边，只有在followTouch为true是生效

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 描述：返回执行结果，或者响应悬浮窗中js调用event方法的交互事件
  • 返回执行结果的内部字段：
    {
  status: true,           //布尔类型；操作成功状态值，true|false
  msg: "OK",     //字符串类型；文字描述
}
  • 响应悬浮窗中js调用event方法的交互事件的内部字段：
    {
  status: true,           //布尔类型；操作成功状态值，true|false
  msg: "event",     //字符串类型；表示此次回调为浮窗中js调用event方法
  eventName: "msg",      //字符串类型；浮窗中js调用event方法传递的eventName，用于区分不同事件
  data: {},  //JSON 对象类型；表示此次event传递的数据
}

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
},function(ret){
    if (ret.msg=='event') {
        switch (ret.eventName){
            case 'msg':
            tips(ret.data?JSON.stringify(ret.data):'测试event');
            break;
        }
    }
});

可用性

Android系统

可提供的1.0.0及更高版本

eval

悬浮窗内执行js代码，效果类似于js的eval方法

eval({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：需要js代码的悬浮窗的名字

jsstring

  • 类型：字符串
  • 默认值：无
  • 描述：需要执行的js代码

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.eval({name:"test",jsstring:'alert("提示弹窗")'})

可用性

Android系统

可提供的1.0.1及更高版本

show

显示悬浮窗，悬浮窗创建后默认是显示的

show({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：需要显示的悬浮窗的名字

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.show({name:"test"})

可用性

Android系统

可提供的1.0.0及更高版本

hide

隐藏指定悬浮窗

hide({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：需要隐藏的悬浮窗的名字

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.hide({name:"test"})

可用性

Android系统

可提供的1.0.0及更高版本

remove

移除指定悬浮窗

remove({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：需要移除的悬浮窗的名字

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.remove({name:"test"})

可用性

Android系统

可提供的1.0.0及更高版本

offset

设置指定悬浮窗的偏移量

offset({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

x：

  • 类型：整数
  • 默认值：0
  • 描述：悬浮窗坐标x方向偏移量

y：

  • 类型：整数
  • 默认值：0
  • 描述：悬浮窗坐标y方向偏移量

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.offset({name:"test",x:300,y:300})

可用性

Android系统

可提供的1.0.0及更高版本

size

设置指定悬浮窗的大小

size({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

w：

  • 类型：整数
  • 默认值：0
  • 描述：（悬浮窗的宽度

h：

  • 类型：整数
  • 默认值：0
  • 描述：悬浮窗的高度

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.size({name:"test",w:300,h:300})

可用性

Android系统

可提供的1.0.0及更高版本

noTouch

设置指定悬浮窗是否无法触摸

noTouch({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

noTouch：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否无法触摸

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.noTouch({name:"test",noTouch:true})

可用性

Android系统

可提供的1.0.0及更高版本

noLimit

设置指定悬浮窗是否可以显示到屏幕外

noLimit({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

noLimit：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否可以显示到屏幕外

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.noLimit({name:"test",noLimit:true})

可用性

Android系统

可提供的1.0.0及更高版本

center

设置指定悬浮窗是否居中

center({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

center：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否居中，如果为true，会重置偏移量offset为{x:0,y:0}

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.center({name:"test",center:true})

可用性

Android系统

可提供的1.0.0及更高版本

canFocus

设置指定悬浮窗是否可获得焦点，通常获取焦点后，悬浮窗可以和软键盘发生交互，但被覆盖的应用会失去焦点，具体表现例如：游戏将失去背景音乐

canFocus({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

canFocus：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否可获取焦点

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.canFocus({name:"test",canFocus:true})

可用性

Android系统

可提供的1.0.0及更高版本

followTouch

设置指定悬浮窗是否跟随触摸移动

followTouch({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

followTouch：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否跟随触摸移动

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.followTouch({name:"test",followTouch:true})

可用性

Android系统

可提供的1.0.0及更高版本

stickSide

设置指定悬浮窗是否自动贴边，近在会跟随触摸移动时生效

stickSide({params})

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

stickSide：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否自动贴边

示例代码

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});
floatWebView.stickSide({name:"test",stickSide:true})

可用性

Android系统

可提供的1.0.0及更高版本

悬浮窗内接口

和同名模块接口功能相同，下面仅仅列举一下size方法的使用

悬浮窗内接口的传参不同于模块接口，传入参数必须为json字符串，也就是需要使用JSON.stringify编译一次，具体看示例

floatWebView.size( JSON.stringify({params}) )

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

w：

  • 类型：整数
  • 默认值：0
  • 描述：（悬浮窗的宽度

h：

  • 类型：整数
  • 默认值：0
  • 描述：悬浮窗的高度

示例代码

APP中

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
});

悬浮窗中

var data = {name:"test",w:300,h:300};
floatWebView.size( JSON.stringify(data) );

可用性

Android系统

可提供的1.0.0及更高版本

event

悬浮窗给APP发送事件，用于和APP进行交互行为

floatWebView.event( JSON.stringify({params}) )

params

name：

  • 类型：字符串
  • 默认值：无
  • 描述：悬浮窗的名字

eventName：

  • 类型：字符串
  • 默认值：无
  • 描述：事件名称

data：

  • 类型：JSON对象
  • 默认值：无
  • 描述：传递的数据

示例代码

APP中

var floatWebView = api.require('floatWebView');
floatWebView.create({
    name:"test",
    url:"widget://html/test.html",
},function(ret){
    if (ret.msg=='event') {
        switch (ret.eventName){
            case 'msg':
            tips(ret.data?JSON.stringify(ret.data):'测试event');
            break;
        }
    }
});

悬浮窗中

var data = {name:"test",eventName:"msg",data:{"text":"APP响应了事件"}};
floatWebView.event( JSON.stringify(data) );

可用性

Android系统

可提供的1.0.1及更高版本