uni-app中uniapp-x的web-view组件如何设置默认UserAgent为PC版，自定义UA？

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app中uniapp-x的web-view组件如何设置默认UserAgent为PC版，自定义UA？

自定义User Agent
如需自定义User Agent，在项目的 manifest.json 中 "app-plus" -> "useragent" 进行配置无效

{  
    "app-plus": {  
        "useragent": {  
            "value": "myua",  
            "concatenate": true  
        }  
    }  
}

不知道有没有其他方法，求教


Harmonyos Next教程
1 回复

在uni-app中，uni-app-x 的 web-view 组件允许嵌入外部网页内容。为了设置默认的 UserAgent 为 PC 版或自定义 UA，你可以通过修改 web-view 组件的配置项来实现。不过需要注意，uni-app 本身没有直接提供设置 UserAgent 的属性，但你可以通过一些变通的方法来实现。

一个常见的方法是使用 plus.webview 对象（这是 5+ App 的 API，适用于打包成原生应用的情况），在创建 webview 时设置 CustomUserAgent 属性。以下是一个示例代码，展示如何在 uni-app 中通过原生扩展的方式设置自定义 UserAgent。

示例代码

  1. 在 manifest.json 中配置原生扩展模块

确保你的 manifest.json 中已经启用了 5+ App 相关的原生模块，特别是 webview 模块。

"plus": {
    "distribute": {
        "apple": {},
        "google": {}
    },
    "runtime": {
        "engine": {
            "mode": "crosswalk" // 或者其他模式
        }
    },
    "usingComponents": true,
    "permissions": {
        // ... 其他权限配置
    }
}
  1. 在页面的脚本中创建并配置 webview

由于 web-view 组件不支持直接设置 UserAgent，你需要使用 plus.webview API 来创建一个新的 webview 并设置其 UserAgent。

// 在页面加载完成后执行
onLoad: function() {
    plus.webview.create('https://example.com', '_blank', {
        top: '0px',
        left: '0px',
        width: '100%',
        height: '100%',
        CustomUserAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 MyCustomUA'
    }, function(e, w) {
        // 设置当前窗口的子 webview 为新创建的 webview
        plus.webview.currentWebview().append(w);
    });
}

在上面的代码中，我们创建了一个新的 webview 并设置了 CustomUserAgent 属性，然后将其附加到当前窗口。

注意事项

  • 上述方法仅适用于通过 HBuilderX 打包成原生应用的情况。如果是纯 H5 环境，则无法直接修改 UserAgent。
  • CustomUserAgent 属性可能会因平台或浏览器内核的不同而有所差异，请根据实际环境进行调整。
  • 使用自定义 UserAgent 可能违反某些网站的服务条款，请确保你有权这样做。

通过这种方式，你可以在 uni-app 中为 web-view 组件设置自定义的 UserAgent。

回到顶部