@snewbie/capacitor-web-view v0.0.4

@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。

Returns: Promise<string>

Since: 0.0.1

setCookie(...)

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

设置指定 url 的 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 浏览器实例。

Returns: Promise<WebView>

Since: 0.0.1

loadUrl(...)

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

加载指定 url 的内容。

Since: 0.0.1

evaluateJavascript(...)

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

执行指定的 JavaScript 代码。

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 浏览器开始加载页面时的监听器。

Since: 0.0.1

setOnPageFinishedListener(...)

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

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

Since: 0.0.1

setOnProgressChangedListener(...)

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

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

Since: 0.0.1

Interfaces

CreateWebViewArgs

WebViewConfig

WebViewReadyCallbackData

Type Aliases

WebViewListenerCallback

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

(data: T): void