@nota/nativescript-webview-ext

为 NativeScript 扩展 WebView 功能，增加 "x-local" 自定义协议以加载本地文件，处理 WebView 和 NativeScript 之间的事件，JavaScript 执行，注入 CSS 和 JS 文件。支持 Android 19+ 和 iOS9+。

功能

• 为 WebView 添加了对 x-local:// 的自定义协议处理器，以在 WebView 内部加载资源。
  • 注意：此功能不支持 iOS <11
• 增加对捕获 URL 的支持。
  • 允许应用在外部浏览器中打开外部链接并处理 tel 链接。
• 添加了以下功能：
  • executeJavaScript(code: string) 用于执行 JavaScript 代码并获取结果。
  • executePromise(code: string) 用于调用承诺并获取结果。
  • getTitle() 返回 document.title。
• NativeScript 和 WebView 之间的双向事件监听器
  • 从 NativeScript 到 WebView
  • 从 WebView 到 NativeScript
• 添加了注入 css 和 javascript 文件的功能。
  • 到当前页面。
  • 页面加载时自动注入。
• 填充项
  • 承诺
  • Fetch API（在 Android 上覆盖原生 API 以支持 x-local:// 和 file://）
• 允许使用 WkWebView 进行 alert、confirm 和 prompt。
• 支持
  • Android 19+
  • iOS 11+：完全支持
  • iOS <11：部分支持

安装

描述您的插件安装步骤。理想情况下，它可能类似于

tns plugin add @nota/nativescript-webview-ext

将 minSdkVersion 更新为 19 或更高

需要 Android SDK 19，更新 App_Resources/Android/app.gradle

android {
  defaultConfig {
    minSdkVersion 19 // change this line
    generatedDensities = []
  }
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

核心支持

按如下模板加载

<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:nota="@nota/nativescript-webview-ext">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <nota:WebViewExt src="https://nota.dk"></<nota:WebViewExt>
</Page>

Angular 支持

从 @nota/nativescript-webview-ext/angular 导入 WebViewExtModule 并将其添加到您的 NgModule 中。

这注册了 WebViewExt 元素。将 <WebView> 标签替换为 <WebViewExt>

Vue 支持

在您的应用程序入口文件（可能是 app.js 或 main.js）中导入 @nota/nativescript-webview-ext/vue。

这注册了 WebViewExt 元素。将 <WebView> 标签替换为 <WebViewExt>

使用

限制

对 x-local:// 的自定义协议处理器仅支持 Android 和 iOS 11+

由于 ITMS-90809，移除了对 iOS <11 的自定义协议支持。

API

NativeScript 视图

事件

WebView

在WebView内部，我们有 nsWebViewBridge 用于在 NativeScript-层和 WebView 之间发送事件。 注意： 桥接器仅在内置的 DOMContentLoaded 或 onload 中可用。

等待nsWebViewBridge可用

    window.addEventListener("ns-bridge-ready", function(e) {
        var nsWebViewBridge = e.detail || window.nsWebViewBridge;

        // do stuff here
    });

即将推出的可能功能

• Cookie助手？
• 与本地层共享缓存？

Android

• 设置
  • AppCache？
  • 用户代理？

iOS

• 设置？

演示和单元测试

运行演示

要运行演示项目，插件必须在本地构建，并且必须运行http服务器。

运行演示的最简单方法是遵循以下步骤

• 从 https://github.com/Notalib/nativescript-webview-ext.git 克隆git存储库
• 进入 src 文件夹
• 使用npm脚本
  • npm run demo.ios
  • npm run demo.android

运行单元测试

• 从 https://github.com/Notalib/nativescript-webview-ext.git 克隆git存储库
• 进入 src 文件夹
• 使用npm脚本
  • npm run test.ios
  • npm run test.android

许可协议

Apache许可协议版本2.0，2004年1月

关于Nota

Nota是丹麦为印刷残疾人提供图书馆和专业知识中心。要成为Nota的成员，您必须证明您无法阅读普通印刷文本。Nota的成员是视力受损者、阅读障碍者或其他受损者。我们的目的是确保无法阅读普通印刷文本的人能够平等地获得知识、社区参与和体验。