uniapp使用webview不占全屏

一、背景介绍

对于一些需求较为复杂的小程序，可能会要求用到原生的Webview来展示特定的网页、应用或者是小程序。但是，因为原生的Webview会占满整个屏幕，而且只能在小程序的子页面中使用，这种方式并不是很好。为了解决这个问题，我们可以在uniapp中使用一个叫做web-view的组件。这个组件可以在小程序中嵌入一个Webview，同时又不会占满整个屏幕。

二、web-view组件的使用方法

1. 在page.json中注册组件

首先，在你的page.json文件中注册web-view组件，像这样：

{
  "usingComponents": {
    "web-view": "/path/to/uni/web-view"
  }
}

其中，"/path/to/uni/web-view"是指web-view的实际路径，这取决于你的项目结构和文件组织方式。

2. 在页面中使用web-view组件

接下来，在你的页面中使用web-view标签，像这样：

其中，":src" 属性代表你要展示的网址或者网页的地址。"style"属性代表web-view的样式。在这个样式中，你可以设置web-view的高度（height），这里我设置的是80%的显示高度。当然，你也可以设置宽度、边距等等。设置完成后，你的web-view就可以按照你的需求进行展示了。

3. 在样式中优化web-view的显示

如果你希望更好地控制web-view的显示效果，你可以在样式文件中进行设置。这里提供一些常用的设置：

web-view{
  zoom: 1.0;
  overflow: auto;
}

这里，"zoom"属性代表web-view中的缩放比例，"overflow"属性代表web-view内部内容的显示方式。根据实际需要进行调整即可。

三、web-view的问题和解决办法

1. web-view中点击链接会直接打开小程序

在web-view页面中，如果用户点击了链接，页面会直接跳转到小程序中，而非在web-view中打开新网页。这个问题比较严重，因为它影响了整个页面的浏览体验。下面我们来看看解决方法。

解决办法：

/**
 * 该方法用于拦截web-view中的链接
 * 可以在某个页面的onLoad中调用该方法即可
 */
interceptUrl() {
  if(!navigator.userAgent.toLowerCase().match(/micromessenger/)) {
    return;
  }
  const currentPage = getCurrentPages().pop();
  if(!currentPage) {
    console.error('current page is not found!');
    return;
  }
  const args = currentPage.options || {};
  const query = Object.keys(args).map(key => `${key}=${args[key]}`).join('&');
  const hash = currentPage.route;
  const currentUrl = encodeURIComponent(`${hash}?${query}`);
  window.location.href = `https://your.tld.com/wx?con=web_h5&target_url=${currentUrl}`;
}

在interceptUrl()方法中，判断当前的环境是否为小程序，然后构建一个当前页面的URL，并使用window.location.href属性进行跳转。这样就可以将web-view中的链接拦截下来，并在新的页面中打开它们了。

2. web-view中滑动卡顿或者闪烁

在web-view中，如果用户快速滑动或者页面含有大量图片等元素，可能会导致web-view页面出现滑动卡顿或者闪烁。接下来，我会给出一些解决方法。

解决办法：

/**
 * 该方法用于优化web-view的显示
 * 可以在某个页面的onLoad中调用该方法即可
 */
optimizeWebView() {
  if(!navigator.userAgent.toLowerCase().match(/micromessenger/)) {
    return;
  }
  const bridge = uni.requireNativePlugin('WebViewPlugin');
  bridge.subscribe('onWebViewLoaded', (data) => {
    const scroll = data.webView.scroll;
    bridge.invoke('setOption', {
      data: {
        'setTopHeight': 44,
        'offsetTop': scroll.top,
        'scrollHeight': scroll.height
      },
      success: () => {
        console.log('success');
      },
      fail: () => {
        console.error('fail');
      },
      complete: () => {
        console.info('complete');
      }
    });
  });
}

在optimizeWebView()方法中，首先判断当前环境是否为小程序。然后，调用uni.requireNativePlugin方法加载WebViewPlugin插件。接着，设置一些参数，比如滚动的高度、偏移量等等。最后，调用bridge.invoke方法，将参数传递给WebViewPlugin插件。这样就可以优化web-view的显示效果了。

四、总结

使用web-view组件来展示web页面或者应用程序非常方便，不过还存在一些问题。文章中提到了这些问题，并给出了详细的解决方法。希望在实际项目中能够对大家有所帮助。