@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 文件的功能。
  • 到当前页面。
  • 在页面加载时自动注入。
• 垫片
  • Promise
  • 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之间发送事件。注意：此桥接器仅在WebView中的DOMContentLoaded或onload时可用。

等待nsWebViewBridge可用

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

即将推出的功能

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

Android

• 设置
  • AppCache？
  • User agent？

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的成员是视力受损、阅读障碍或其他残疾的人。我们的目的是确保无法阅读普通印刷文本的人能够平等地获取知识、参与社区和体验。