NativeScript URL Handler 插件

请随意 捐赠

或捐赠比特币: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D

也可通过 greenaddress

用法

只需将应用链接添加到您的应用中，参见下面的 iOS 和 Android 指令，并注册 URL 数据的处理程序。

请参阅此示例以了解 Angular

import { Component, OnInit } from "@angular/core";
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Component({
  selector: "gr-main",
  template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {
    constructor() {
    } 
    
    ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
        });
     }
}

以及纯 NativeScript

var handleOpenURL = require("nativescript-urlhandler").handleOpenURL;

handleOpenURL(function(appURL) {
  console.log('Got the following appURL', appURL);
});

或作为 TypeScript

import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

handleOpenURL((appURL: AppURL) => {
  console.log('Got the following appURL', appURL);
});

注意：请参阅 demo 应用以了解示例用法。首先在应用主中添加 handleOpenURL!

安装

$ tns plugin add nativescript-urlhandler

或者如果您想使用开发版本（夜间构建），这可能不稳定！

$ tns plugin add nativescript-urlhandler@next

Android

将 myapp 替换为您想要的方案，并将启动模式设置为 singleTask

<activity android:name="com.tns.NativeScriptActivity" ... android:launchMode="singleTask"...>
        ...
    <intent-filter>
    <data android:scheme="myapp" /> 
    <action android:name="android.intent.action.VIEW" /> 
    <category android:name="android.intent.category.DEFAULT" /> 
    <category android:name="android.intent.category.BROWSABLE" /> 
    </intent-filter>

例如

<activity android:name="com.tns.NativeScriptApplication" android:label="@string/app_name" android:launchMode="singleTask">
  <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" /> 
      <data android:scheme="myapp" android:host="__PACKAGE__" />
  </intent-filter>
</activity>

android:launchMode="singleTask" 告诉 Android 操作系统以新的活动实例启动应用，或使用现有的一个。没有这个，您的应用将启动多个实例，这是不好的。

iOS

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.yourcompany.myapp</string>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

常见问题解答

回调处理

"handleOpenURL" 回调必须在应用程序初始化之前调用，否则您将在控制台中看到此错误

    No callback provided. Please ensure that you called "handleOpenURL" during application init!

Webpack

TypeScript 配置

如果您的 Webpack 构建失败，请尝试将您的 tsconfig 修改为以下内容

    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]

HTTPS 意图

此库还支持 HTTPS 意图，您可以为其定义一个主机。以下是在 Android 上使用自定义和 HTTPS 方案的示例

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="my-app" />
</intent-filter>
<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="https" android:host="my-website.com" />
</intent-filter>

假设您在网站上放置了一个 <a href="https://my-website.com/check-our-app">查看我们的移动应用</a> 链接来打开您的移动应用。因为 https 意图也与移动浏览器相关联，当用户点击此链接时，将出现一个弹出窗口让用户在浏览器和您的移动应用之间进行选择以打开此链接。

另一方面，如果您设置了 android:scheme="my-app"，并且只有您的应用会响应，那么在网站上放置一个 <a href="my-app://check-our-app">查看我们的移动应用</a> 链接，将避免此弹出窗口并直接打开您的移动应用。