如何在APK/IPA容器加载网页时隐藏smart app banner

你可以从以下3种可行方案中选择适配你的Vue项目：

方案1：复用现有exclude规则，通过UA正则匹配APP WebView环境 #

安卓系统内置WebView的默认User-Agent会携带wv标识，iOS WKWebView也有专属特征，你可以直接修改已有的exclude规则meta标签即可实现APP内隐藏：

<meta name="smartbanner:exclude-user-agent-regex" content=".*(wv|iPhone OS.*Mobile\/[0-9A-Za-z]+$).*">

上述正则可以覆盖绝大多数默认配置的安卓、iOS套壳APP WebView场景，无需修改其他业务代码。如果你的套壳APP自定义过UA，你可以自行在正则中补充APP专属的UA标识字段即可。

方案2：Vue项目中动态初始化Smart Banner #

你可以把Smart Banner的初始化逻辑放在环境判断之后，仅在非APP环境下才加载初始化组件：

1. 先新增WebView环境判断工具方法：

// 判断是否在APP内置WebView中打开
const isAppWebview = () => {
  const ua = navigator.userAgent.toLowerCase()
  // 匹配安卓WebView、iOS WebView特征
  return /wv/.test(ua) || /iphone os.*mobile\/\w+$/.test(ua)
  // 如果有自定义UA字段也可以加在判断条件里，比如你的APP UA带MyApp就加 || ua.includes('myapp')
}

2. 在App.vue或者对应页面的mounted钩子中执行判断：

mounted() {
  // 仅非APP环境下初始化Smart Banner
  if (!isAppWebview()) {
    // 在这里执行原有的Smart Banner初始化逻辑，或者动态插入对应的meta标签
    const meta = document.createElement('meta')
    meta.name = 'smartbanner:enabled'
    meta.content = 'true'
    document.head.appendChild(meta)
    // 原有初始化smart banner的代码写在这里
  }
}

方案3：渲染后强制隐藏（兜底方案） #

如果上述两种方案都无法适配你的场景，你可以在判断为APP环境时，直接通过CSS隐藏横幅元素：

mounted() {
  if (isAppWebview()) {
    const style = document.createElement('style')
    // 替换为你实际使用的smart banner元素的类名/ID
    style.innerHTML = '.smartbanner { display: none !important; }'
    document.head.appendChild(style)
  }
}

内容的提问来源于stack exchange，提问作者Jack