商城
作者 NativeScript.org
nativescript-3dtouch
由 eddyverbruggen 编写 | v1.2.2
使用 3D Touch 为您的手机主屏图标创建快速操作。
npm i --save nativescript-3dtouch

NativeScript 3D Touch 插件

已废弃：Android 7.1 添加了对应用快捷方式的支持，因此为了保持功能一致，此插件已升级以支持 Android，这意味着我认为最好将其重命名。因此，请考虑升级到 https://npmjs.net.cn/package/nativescript-app-shortcuts。

NPM version Downloads Twitter Follow

使用场景

  • 为您的 iPhone 应用添加那些花哨的主屏图标操作
  • 静态或动态添加它们
  • 可选地使用它们在您的应用内进行深度链接

支持的平台

  • iPhone 6s / 6s Plus 或更新版本，运行 iOS 9 或更新版本
  • 运行上述版本的模拟器，并启用 3D Touch 的触摸板

安装

从命令提示符进入您的应用根目录并执行

tns plugin add nativescript-3dtouch

并为您自己的 nativeScript 应用添加 TypeScript 支持

tns install typescript

然后在项目的根目录中打开 references.d.ts 并添加此行以获得此插件的自动完成和类型检查

/// <reference path="./node_modules/nativescript-3dtouch/3dtouch.d.ts" />

演示应用

想快速上手？查看 演示应用！否则，继续阅读。

您可以通过在项目根目录中键入 npm run demo.ios.device 运行演示应用（有关其他命令，请参阅 package.json）。

API

可用

检查设备是否支持。Android 设备也会报告 false，因此您可以使用跨平台。

JavaScript
// require the plugin
var ThreeDeeTouch = require("nativescript-3dtouch").ThreeDeeTouch;

// instantiate the plugin
var threeDeeTouch = new ThreeDeeTouch();

threeDeeTouch.available().then(
  function(available) {
    if (available) {
      console.log("This device is 3D Touch capable");
    } else {
      console.log("No 3D Touch capability, ask the user to upgrade");
    }
  }
);
TypeScript
// require the plugin
import {ThreeDeeTouch} from "nativescript-3dtouch";

// instantiate the plugin
let threeDeeTouch = new ThreeDeeTouch();

threeDeeTouch.available().then((available) => {
  if (available) {
    console.log("This device is 3D Touch capable");
  } else {
    console.log("No 3D Touch capability, ask the user to upgrade");
  }
});

configureQuickActions

当您的应用运行时，您可以向主屏图标添加那些花哨的快速操作。您最多可以配置四个图标，并且它们将由 iOS 缓存，直到您传入一组新的图标。因此，您不需要每次加载应用时都执行此操作，但这当然不会有害。

type 参数（请参阅下面的代码示例）是将图标与您将收到的操作事件关联的最方便方式。因此，请确保它在您的图标中是唯一的。

目前支持两种类型的图标：iconType 和 iconTemplate。

iconType

来自苹果提供的 固定图标列表，看起来很棒（向下滚动到 Objective-C 枚举并查看下面的示例如何使用它们）。

iconTemplate

可以用来提供您自己的图标。它必须是您的 Assets 目录中有效的图标模板名称。NativeScript 允许您将图标添加到 app/App_Resources/iOS 文件夹。如果您添加一个名为 Eye.png 的文件，则将其引用为 Eye。有关这些图像的更多信息，请参阅我们讨论静态操作的部分。

JavaScript
threeDeeTouch.configureQuickActions([
  {
    type: "capturePhoto",
    title: "Snag a pic",
    subtitle: "You have 23 snags left",
    iconType: UIApplicationShortcutIconTypeCapturePhoto
  },
  {
    type: "beer",
    title: "Beer-tastic!",
    subtitle: "Check in & share",
    iconTemplate: "Beer"
  }
]).then(function () {
  alert("Added 2 actions, close the app and apply pressure to the app icon to check it out!");
}, function(errorMessage) {
  alert(errorMessage);
});
TypeScript
threeDeeTouch.configureQuickActions([
  {
    type: "capturePhoto",
    title: "Snag a pic",
    subtitle: "You have 23 snags left",
    iconType: UIApplicationShortcutIconType.CapturePhoto
  },
  {
    type: "beer",
    title: "Beer-tastic!",
    subtitle: "Check in & share",
    iconTemplate: "Beer"
  }
]).then(() => {
  alert("Added 2 actions, close the app and apply pressure to the app icon to check it out!");
}, (errorMessage) => {
  alert(errorMessage);
});

捕获操作

当按下主屏图标时，您的应用会启动。您可能希望根据选择的主屏图标操作执行不同的操作（如导航到不同的页面），因此您需要一种方法来捕获此事件。

NativeScript 与 XML

在非Angular NativeScript应用程序中，我们需要扩展app.js或app.ts并导入插件，然后调用setQuickActionCallback函数。所以，在app.ts中，将其更改为如下所示：

import * as application from "application";
application.start({ moduleName: "main-page" });

变为如下：

import * as application from "application";

// import the plugin
import { ThreeDeeTouch } from "nativescript-3dtouch";

// instantiate it and call setQuickActionCallback
new ThreeDeeTouch().setQuickActionCallback(function(shortcutItem) {
    console.log("app was launched by shortcut type '" + shortcutItem.type + "' with title '" + shortcutItem.localizedTitle + "'");
    // this is where you handle any specific case for the shortcut
    if (shortcutItem.type === "beer") {
        // this is an example of 'deeplinking' through a shortcut
        let frames = require("ui/frame");
        frames.topmost().navigate("beer-page");
    } else {
        // .. any other shortcut handling
    }
});

application.start({ moduleName: "main-page" });

与Angular一起使用NativeScript

如果您正在使用Angular，最佳位置是在app.module.ts中添加处理程序，并使用NgZone帮助Angular了解您正在执行的路径更改。

import { NgZone } from "@angular/core";
import { isIOS } from "tns-core-modules/platform";
import { RouterExtensions } from "nativescript-angular";
import { ThreeDeeTouch } from "nativescript-3dtouch";

export class AppModule {
  constructor(private routerExtensions: RouterExtensions,
              private zone: NgZone) {

    if (isIOS) {
      new ThreeDeeTouch().setQuickActionCallback(shortcutItem => {
        console.log(`The app was launched by shortcut type '${shortcutItem.type}' with title '${shortcutItem.localizedTitle}`);

        // this is where you handle any specific case for the shortcut, based on its type
        if (shortcutItem.type === "page1") {
          this.deeplink("/page1");
        } else if (shortcutItem.type === "page2") {
          this.deeplink("/page2");
        }
      });
    }
  }

  private deeplink(to: string): void {
    this.zone.run(() => {
      this.routerExtensions.navigate([to], {
        animated: false
      });
    });
  }
}

配置静态操作

使用configureQuickActions，您可以配置动态操作，但如果您希望操作在从AppStore安装应用程序后立即可用怎么办呢？

您当然可以，但您需要手动编辑.plist文件。幸运的是，NativeScript允许您通过app/App_Resources/iOS/Info.plist来更改此文件。您添加到那里的任何内容都将被添加到构建过程中的最终.plist文件中。

请注意，动态操作永远不会替换静态操作，所以如果您有两个静态操作，您可以添加最多两个动态操作。更多的将被忽略。

以下是一个示例，您可以将其粘贴到.plist文件的任何位置：

<key>UIApplicationShortcutItems</key>
<array>
  <dict>
    <key>UIApplicationShortcutItemIconFile</key>
    <string>Eye</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Eye from plist</string>
    <key>UIApplicationShortcutItemSubtitle</key>
    <string>Awesome subtitle</string>
    <key>UIApplicationShortcutItemType</key>
    <string>eyefromplist</string>
  </dict>
  <dict>
    <key>UIApplicationShortcutItemIconType</key>
    <string>UIApplicationShortcutIconTypeCompose</string>
    <key>UIApplicationShortcutItemTitle</key>
    <string>Compose</string>
    <key>UIApplicationShortcutItemType</key>
    <string>compose</string>
  </dict>
</array>

这些XML标签需要一些解释

UIApplicationShortcutItemIconFile

上面第二个操作使用内置的UIApplicationShortcutIconTypeCompose图标，但第一个操作使用自定义图标：Eye。这需要文件app/App_Resources/iOS/Eye.png。根据苹果的文档，这需要是一个单色、透明、正方形的35x35图标 - 但这个大小在视网膜设备上会看起来像素化，所以如果您愿意，可以使用70x70或105x105的图标。

UIApplicationShortcutItemTitle / UIApplicationShortcutItemSubtitle

您能猜出这些是做什么的吗？只有标题是必需的。

UIApplicationShortcutItemType

这与configureQuickActions的type参数相同，所以这就是您在app.js / app.ts中配置的回调中接收到的，作为payload.type。只需使用这些信息做一些酷的事情（如路由到特定页面并加载一些内容）即可。