更新记录

1.0.0（2026-01-16）

• 加载远程网络H5、html(富文本)、加载本地H5
• 支持iOS、Android、harmony
• 自定义userAgent、请求头
• 支持cookie设置、获取、删除
• 支持火气title、url，前进，后退，刷新等
• 与h5/js相互通讯调用传参
• 加载失败/成功/进度回调
• 支持alert、confirm、prompt
• 监听Android、鸿蒙遥控器、物理键、软键盘事件

平台兼容性

uni-app x(3.6.15)

其他

webView加载本地或远程h5

功能

• 加载远程网络H5、html(富文本)、加载本地H5
• 支持iOS、Android、harmony
• 自定义userAgent、请求头
• 支持cookie设置、获取、删除
• 支持火气title、url，前进，后退，刷新等
• 与h5/js相互通讯调用传参
• 加载失败/成功/进度回调
• 支持alert、confirm、prompt
• 监听Android、鸿蒙遥控器、物理键、软键盘事件

uniapp项目请使用https://ext.dcloud.net.cn/plugin?name=wl-uts-webview

集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027

咨询或定制请点击上面"进入交流群"按钮私聊作者

<wl-uts-webviewx :style="'width:'+width+'px;height:'+height+'px;'" @onEvent="onEvent"
    :params="params"></wl-uts-webviewx>

接口

总体采用业务组数的方式更新组件属性，会自动遍历执行业务

let params = {}
params.businessArray = [
    {
        business: "",
        params: {}
    }
]
let paramsStr = JSON.stringify(params)
绑定组件属性
const params = ref('')
params.value = paramsStr

• 设置URL

let url = "https://www.baidu.com"

{
    business: "setUrl", // 设置链接地址
    params: { 
        url: url, // url可以是云端地址(如https://www.baidu.com)，也可以是本地文件路劲(如：/xxx/xxx/xxx/index.hmtl)
        // userAgent: "xxx", // userAgent
        headers: { // 请求头
            token: "xxx"
        }
    }
}

• 设置可访问路径，鸿蒙加载本地h5文件的时候需要设置通用访问文件路径，不然会有跨域报错，仅支持鸿蒙

let rootPath = UTSWebModel.getResourcePath('/static/loginSys')
url = "file://" + rootPath + "/index.html";
let pathList = new Array<string>()
pathList.push(rootPath)
pathList.push(rootPath + "/css")
pathList.push(rootPath + "/images")
pathList.push(rootPath + "/js")
businessArray.push({
    business: "pathAllowingUniversalAccess", // 鸿蒙加载本地h5文件的时候需要设置通用访问文件路径，不然会有跨域报错
    params: {
        pathList: pathList
    }
})

• 获取标题title

获取结果再onEvent回调里getTitle

{
    business: "getTitle"
}

• 获取当前url链接

获取结果再onEvent回调里getUrl

{
    business: "getUrl"
}

• 向前

{
    business: "goForward"
}

• 后退

{
    business: "goback"
}

• 停止加载

{
    business: "stopLoading"
}

• 刷新重新加载

{
    business: "reload"
}

• 设置cookie

harmony: 本地file协议的页面里获取的cookie为空字符串，需要服务器里获取 android: 本地file协议的页面可以设置和获取cookie，但是file协议的页面里js无法读写cookie

如果加载的是本地H5文件操作cookie会有诸多问题，请使用本地httpServer插件https://ext.dcloud.net.cn/plugin?id=15876，将h5放到本地服务里，webview加载本地服务连接的方式来操作

let cookies = []
switch (uni.getSystemInfoSync().platform) {
    case 'ios': {
        cookies.push({
            name: "name",
            value: "uniappcookie",
            path: "/",
            domain: "192.168.2.46" // 域名或IP
        })
    }
    break;
    default:
    {
        cookies.push({
            value: "name=uniappcookie;Path = /;",
            url: localUrl.value
        })
    }
        break;
}

{
    business: "setCookie",
    params: {
        cookies: cookies,

    }
}

• 获取cookie

获取结果再onEvent回调里getCookie

```javascript

{
    business: "getCookie",
    params: {
        url: localUrl.value
    }
}

• 删除所有cookie

{
    business: "clearAllCookie"
}

• 是否可以前进

{
    business: "canGoForward"
}

结果在onEvent里canGoForward

• 是否可以后退

{
    business: "canGoBack"
}

结果在onEvent里canGoBack

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

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

let params = {}
params.js = js

{
    business: "sendDataToJS",
    params: params
}

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

// windows节点下的全局函数
window["add"] = (params)=>{

}

• webview里H5 JS发送数据给nvue，会回调onEvent事件里的onJSFunReturn

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);
} else {
    // 鸿蒙这里的bridgeObj固定这个变量
    bridgeObj.bridge(JSON.stringify(params));
}

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

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

• 嵌入式Android系统，如Android TV，遥控器无法聚焦问题，需要加入下面3个业务，仅支持android

// 防止一些嵌入式Android定制系统无法聚焦导致Android遥控器无法控制问题
businessArray.push({
    business: "requestFocus"
})
businessArray.push({
    business: "setFocusable",
    params: {
        isFocusable: true
    }
})
businessArray.push({
    business: "setFocusableInTouchMode",
    params: {
        isFocusableInTouchMode: true
    }
})

回调事件onEvent

    function onEvent(e : UniNativeViewEvent) {
    let detail = e.detail
    console.log(`onEvent detail:${JSON.stringify(detail)}`)
    let opt = detail["opt"]
    let paramsValue = detail["params"]
    let params = {}
    if (paramsValue != null) {
        if (typeof paramsValue! == "string") {
            params = JSON.parseObject(paramsValue! as string)!
        } else if (paramsValue! instanceof UTSJSONObject) {
            params = paramsValue! as UTSJSONObject
        }
    }
    switch (`${opt}`) {
        case "canGoForward":
            {
                let obj = params as UTSJSONObject
                let value = obj["value"]
            }
            break;
        case "canGoBack": {
            let obj = params as UTSJSONObject
            let value = obj["value"]
        }
            break;
        case "onLoadView": {

        }
            break;
        case "": {
            // android: "detail":{"params":{"progress":10},"opt":""}
            // 0～100
            // let progress = params.progress
        }
            break;
        case "onJSData": {
            // android: "detail":{"params":"{\"msg\":\"你好，我是JS\"}","opt":"onJSData"}
            let paramsValue = {}

            switch (uni.getSystemInfoSync().platform) {
                case 'android':
                    // android返回的params是字符串
                    paramsValue = JSON.parseObject(`${params}`)!
                    break;
                case 'harmonyos':
                    paramsValue = JSON.parseObject(`${params}`)!
                    break;
                // ios
                default:
                    {
                        paramsValue = params as UTSJSONObject
                    }
                    break;
            }
            let msg = paramsValue["msg"]
            showToast(`${msg}`)
        }
            break;
        case "getUrl": {
            let obj = params as UTSJSONObject
            let url = obj["url"]
            if (url != null) {
                showToast(`${url}`)
            } else {
                showToast("url为空")
            }
        }
            break;
        case "getTitle": {
            let obj = params as UTSJSONObject
            let title = obj["title"]
            if (title != null) {
                showToast(`${title}`)
            } else {
                showToast("title为空")
            }
        }
            break;
        case "onJSFunReturn": {
            // android: "detail":{"params":{"value":"{\"result\":3}"},"opt":"onJSFunReturn"}
            // ios: "detail":{"params":{"value":{"result":3}},"opt":"onJSFunReturn"}
            if (params != null) {
                let obj = params as UTSJSONObject
                let value = obj["value"]
                if (value != null) {
                    let valueObj = {}
                    switch (uni.getSystemInfoSync().platform) {
                        case 'android':
                            // android返回的params是字符串
                            valueObj = JSON.parseObject(`${value}`)!
                            break;
                        case 'harmonyos':
                            valueObj = JSON.parseObject(`${value}`)!
                            break;
                        // ios
                        default:
                            valueObj = value! as UTSJSONObject
                            break;
                    }
                    let result = valueObj["result"]
                    if (result != null) {
                        showToast(`函数返回:${result!}`)
                    }
                }

            }

        }
            break;
        case "getCookie": {
            let obj = params as UTSJSONObject
            let cookie = obj["cookie"]
            if (cookie != null) {
                showToast(`${cookie}`)
            } else {
                showToast("cookie为空")
            }
        }
            break;
        case "onKey": {
            let obj = params as UTSJSONObject
            let keyCode = obj["keyCode"] as number
            switch (uni.getSystemInfoSync().platform) {
                case 'harmonyos': {
                    switch (keyCode) {
                        case 17: {
                            // 音量-

                        }
                            break;
                        case 17: {
                            // 音量+
                        }
                            break;
                        default:
                            break;
                    }
                }
                    break;
                case "android": {
                    switch (keyCode) {
                        case 25: {
                            // 音量-
                            let action = obj["action"] as number
                            switch (action) {
                                case 0: {
                                    // 按下
                                }
                                    break;
                                case 1: {
                                    // 抬起    
                                }
                                    break;
                                default:
                                    break;
                            }
                        }
                            break;
                        case 24: {
                            // 音量+
                        }
                            break;
                        default:
                            break;
                    }
                }
                    break;
                default:
                    break;
            }

        }
            break;
        default:
            break;
    }
}