webview UserAgent请求头js通讯互调物理键监听

更新记录

1.0.5（2024-03-29）

android H5全屏视频切换成横屏播放

1.0.3（2024-03-29）

增加支持H5视频全屏功能

1.0.2（2024-03-18）

优化内部逻辑

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.7.0，Android：4.4，iOS：9	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

功能

加载远程网络H5、html(富文本)、加载本地H5
自定义userAgent、请求头
与js相互通讯调用传参
加载失败/成功/进度回调
支持alert、confirm、prompt
监听Android遥控器、物理键、软键盘事件

支持定制QQ252797991

集成插件步骤参考https://www.jianshu.com/p/830ccc503e29


[部分回调被转义无法显示，回调方法看demo]
<wl-uts-webview ref='webview' :style="'width:'+width+'px;height:'+height+'px;'" @onLoadView="onLoadView"
    @onJSData="onJSData" @="" @onKey="onKey" @onJSFunReturn="onJSFunReturn"
    @="" @onLoadError="onLoadError" @onLoadFinish="onLoadFinish"></wl-uts-webview>

使用控件的页面要用nvue

回调


> 控件加载完onLoadView

> 开始加载(文档被转义无法显示，回调方法看demo)

> 加载出错onLoadError

> 加载进度(文档被转义无法显示，回调方法看demo) 

> 加载完成onLoadFinish

> js给app发送的数据onJSData

> 调用H5函数后，该函数返回的结果onJSFunReturn

> 监听物理按钮或遥控器，Android按键事件回调onKey

接口

设置URL


var params = {}
params.url = "https://xxxxxx/index.html"
params.userAgent = "xxx" // 自定义UA
params.headers = { // 自定义请求头
    token: "xxx"
} 
this.$refs.webview.setUrl(JSON.stringify(params));

// html富文本
var params = {}
params.html = "<body>静态网站</body>"
this.$refs.webview.setUrl(JSON.stringify(params));

// 本地H5
var params = {}
params.url = "/aaa/aaa/aa.html" // html文件绝对路径
this.$refs.webview.setUrl(JSON.stringify(params));

调用H5 JS的函数,并获取函数返回值如果js函数有返回值，返回值通过onJSFunReturn回调


var funParams = {};
funParams.a = 1;
funParams.b = 2;
let js = "add(" + JSON.stringify(funParams) + ")";

var params = {}
params.js = js
this.$refs.webview.sendDataToJS(JSON.stringify(params));

//  H5函数，注意add函数需要挂在到window节点下
function add(params) {
    alert('调用了JS addh函数:' + JSON.stringify(params));
    return {
        result: params.a + params.b
    };
}

webview的H5 JS发送数据给nvue，会回调 @onJSData事件


    var params = {};
    params.msg = "你好，我是JS";
    if(IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
      } else if (ANDROID) {
          var jsonStr = JSON.stringify(params);
          window.messageHandlers.bridge(jsonStr);
     }

如果参数为空时，iOS需要传个空对象，防止出错，如：


if(IOS) {
   window.webkit.messageHandlers.bridge.postMessage({});
} else if (ANDROID) {
   window.messageHandlers.bridge();
}

返回上一个历史


this.$refs.webview.goBack()

前往下一个历史


this.$refs.webview.goForward()

重新加载刷新


this.$refs.webview.reload()

停止加载


this.$refs.webview.stopLoading()

webview UserAgent请求头js通讯互调物理键监听 webview 自定义UserAgent请求头 js通讯互调 物理键监听

更新记录

1.0.5（2024-03-29）

1.0.3（2024-03-29）

1.0.2（2024-03-18）

平台兼容性

功能

支持定制QQ252797991

集成插件步骤参考https://www.jianshu.com/p/830ccc503e29

回调

接口

静态网站

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

读写外接U盘、移动硬盘、SD卡、缓存目录、数据目录、支持android和ios

高德地图点标记导航离线地图-原生

腾讯x5webview支持离线内核

读取本地相册图片视频音频，可自定义UI界面

本地HttpServer-静态站点-getpost请求-文件上传下载-本地HLS(m3u8)视频播放

webview UserAgent请求头js通讯互调物理键监听 webview 自定义UserAgent请求头 js通讯互调 物理键监听

更新记录

1.0.5（2024-03-29）

1.0.3（2024-03-29）

1.0.2（2024-03-18）

平台兼容性

功能

支持定制QQ252797991

集成插件步骤参考https://www.jianshu.com/p/830ccc503e29

回调

接口

静态网站

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

读写外接U盘、移动硬盘、SD卡、缓存目录、数据目录、支持android和ios

高德地图点标记导航离线地图-原生

腾讯x5webview支持离线内核

读取本地相册图片视频音频，可自定义UI界面

本地HttpServer-静态站点-getpost请求-文件上传下载-本地HLS(m3u8)视频播放

Modal title

webview UserAgent请求头js通讯互调物理键监听 webview 自定义UserAgent请求头 js通讯互调物理键监听