@snewbie/capacitor-web-view

一个 Capacitor 的 web 浏览器组件。

Install

npm install @snewbie/capacitor-web-view
npx cap sync

Usage

在 Android 上，wen 浏览器组件在整个网络视图下呈现，并使用该组件在滚动事件期间管理其位置。这意味着，作为开发人员，您必须确保 Web 视图在所有层到最底层都是透明的。在典型的 Ionic 应用程序中，这意味着对 IonContent 和根 HTML 标记等元素设置透明度，以确保它可以被看到。如果你在 Android 上看不到你的 web 浏览器组件，这应该是你检查的第一件事。

web 浏览器组件本身没有样式，所以你应该根据页面结构的布局对其进行样式设置。因为我们将视图渲染到这个槽中，所以元素本身没有宽度或高度，所以一定要明确设置这些宽度或高度。

<div id="webView" class="capacitor-web-view"></div>

.capacitor-web-view {
  display: inline-block;
  width: 275px;
  height: 400px;
}

接下来，我们应该创建 web 浏览器引用。这是通过从 Capacitor 插件导入 WebView 类并调用 create 方法，然后传入所需的参数来完成的。

import { WebView } from '@snewbie/capacitor-web-view';

const webViewRef = document.getElementById('map');

const newMap = await WebView.create({
  id: 'my-web-view', // Unique identifier for this web-view instance
  element: webViewRef, // reference to the capacitor-web-view element
  config: {
    url: 'https://www.baidu.com'
  }
});

完整示例

Vue

<template>
    <div id="webView" ref="webViewRef" :style="{ display: 'inline-block', width: '275px', height: '400px' }"></div>
</template>

<script setup lang="ts">
import { onIonViewWillEnter, onIonViewWillLeave } from '@ionic/vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { WebView } from '@snewbie/capacitor-web-view';

const webViewRef = ref<HTMLElement | null>(null);
let newWebView: WebView;

onMounted(async () => {
    if (!newWebView.value) { return; }

    newWebView = await WebView.create({
        id: 'main',
        element: newWebView.value,
        config: {
          url: 'https://www.baidu.com'
        } 
    });
});

onIonViewWillEnter(async () => {
  newWebView?.show()
  newWebView?.enableTouch()
})

onIonViewWillLeave(async () => {
  newWebView?.hide()
  newWebView?.disableTouch()
})

onUnmounted(() => {
  newWebView?.destroy()
})
</script>

API

• getCookie(...)
• setCookie(...)
• removeAllCookies()
• hasCookies()
• create(...)
• loadUrl(...)
• evaluateJavascript(...)
• destroy()
• show()
• hide()
• enableTouch()
• disableTouch()
• setOnPageStartedListener(...)
• setOnPageFinishedListener(...)
• setOnProgressChangedListener(...)
• Interfaces
• Type Aliases

getCookie(...)

getCookie(url: string, key?: string | undefined) => Promise<string>

获取指定 url 的 cookie。

| Param | Type | Description | | --------- | ------------------- | ------------------------------------- | | url | string | 要获取 cookie 的 url。 | | key | string | 要获取的 cookie 的 key。如果不指定，则返回所有 cookie。 |

Returns: Promise<string>

Since: 0.0.1

setCookie(...)

setCookie(url: string, key: string, value: string) => Promise<void>

设置指定 url 的 cookie。

| Param | Type | Description | | ----------- | ------------------- | ------------------ | | url | string | 要设置 cookie 的 url。 | | key | string | 要设置的 cookie 的 key。 | | value | string | 要设置的 cookie 的值。 |

Since: 0.0.1

removeAllCookies()

removeAllCookies() => Promise<void>

移除所有 cookie。

Since: 0.0.2

hasCookies()

hasCookies() => Promise<boolean>

检查是否存在 cookie。

Returns: Promise<boolean>

Since: 0.0.2

create(...)

create(options: CreateWebViewArgs, callback?: WebViewListenerCallback<WebViewReadyCallbackData> | undefined) => Promise<WebView>

创建 web 浏览器实例。

| Param | Type | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | options | CreateWebViewArgs | | callback | WebViewListenerCallback<WebViewReadyCallbackData> |

Returns: Promise<WebView>

Since: 0.0.1

loadUrl(...)

loadUrl(url: string) => Promise<void>

加载指定 url 的内容。

| Param | Type | | --------- | ------------------- | | url | string |

Since: 0.0.1

evaluateJavascript(...)

evaluateJavascript(script: string) => Promise<string | null>

执行指定的 JavaScript 代码。

| Param | Type | | ------------ | ------------------- | | script | string |

Returns: Promise<string | null>

Since: 0.0.1

destroy()

destroy() => Promise<void>

销毁 web 浏览器实例。

Since: 0.0.1

show()

show() => Promise<void>

显示 web 浏览器。

Since: 0.0.1

hide()

hide() => Promise<void>

隐藏 web 浏览器。

Since: 0.0.1

enableTouch()

enableTouch() => Promise<void>

设置 web 浏览器允许被触控。

Since: 0.0.1

disableTouch()

disableTouch() => Promise<void>

设置 web 浏览器禁止被触控。

Since: 0.0.1

setOnPageStartedListener(...)

setOnPageStartedListener(callback?: WebViewListenerCallback<void> | undefined) => Promise<void>

设置 web 浏览器开始加载页面时的监听器。

| Param | Type | | -------------- | --------------------------------------------------------------------------------------- | | callback | WebViewListenerCallback<void> |

Since: 0.0.1

setOnPageFinishedListener(...)

setOnPageFinishedListener(callback?: WebViewListenerCallback<void> | undefined) => Promise<void>

设置 web 浏览器页面加载完成时的监听器。

| Param | Type | | -------------- | --------------------------------------------------------------------------------------- | | callback | WebViewListenerCallback<void> |

Since: 0.0.1

setOnProgressChangedListener(...)

setOnProgressChangedListener(callback?: WebViewListenerCallback<{ newProgress: number; }> | undefined) => Promise<void>

设置 web 浏览器加载进度变化时的监听器。

| Param | Type | | -------------- | ----------------------------------------------------------------------------------------------------------- | | callback | WebViewListenerCallback<{ newProgress: number; }> |

Since: 0.0.1

Interfaces

CreateWebViewArgs

| Prop | Type | Description | Default | Since | | ----------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------ | ----- | | id | string | web 浏览器实例的唯一标识符。 | | 0.0.1 | | config | WebViewConfig | web 浏览器的初始配置设置。 | | 0.0.1 | | element | HTMLElement | The DOM element that the Google Map View will be mounted on which determines size and positioning. | | 0.0.1 | | forceCreate | boolean | 如果已经存在具有提供的id的 web 浏览器，则销毁并重新创建 web 浏览器实例。 | false | 0.0.1 |

WebViewConfig

| Prop | Type | Description | Default | Since | | ---------------------- | ------------------- | ------------------------------------------------------- | ------------------ | ----- | | width | number | Override width for native map. | | 0.0.1 | | height | number | Override height for native map. | | 0.0.1 | | x | number | Override absolute x coordinate position for native map. | | 0.0.1 | | y | number | Override absolute y coordinate position for native map. | | 0.0.1 | | devicePixelRatio | number | Override pixel ratio for native map. | 1.00f | 0.0.1 | | url | string | 指定要加载的 URL，为空时将不进行加载动作。 | | 0.0.1 |

WebViewReadyCallbackData

| Prop | Type | | --------------- | ------------------- | | webViewId | string |

Type Aliases

WebViewListenerCallback

The callback function to be called when web-view events are emitted.

(data: T): void