Float Web View

/ Title: floatWebView Description: floatWebView /

立即使用

论坛示例

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

模块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及更高版本

悬浮窗内接口

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

show,hide,remove,offset,size,noTouch,noLimit,center,canFocus,followTouch,stickSide

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

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及更高版本