返回博客首页
← 所有文章

NativeScript 和 NativeScript Playground 的强大功能

2018年9月5日 — 作者:Todor Totev

事情的起因很简单,一个客户问了一个简单的问题:“我可以在 NativeScript Playground 中使用蓝牙吗?

我当时的第一反应是:“不可能!蓝牙需要应用权限,并且需要与平台 API 的一个神秘部分进行交互,这应该是不可能的……或者至少非常困难!

让我来解释一下我为什么会这样反应。Playground 的魔力在于它使用了配套应用,我们将其发布到 iOS App StoreGoogle Play。这个应用必须遵守两家商店的所有规则,因此,它不像您在自己的设备上开发和测试的代码那样灵活。但是,它包含了一些最实用的 NativeScript 插件,因此涵盖了开发应用时需要执行的各种任务。

因此,NativeScript 的第一个强大功能是,借助 Playground 及其配套应用,您可以快速且轻松地编写代码并进行实验,解决您当下的实际问题。

但是,我仍然需要回答最初的问题。我首先查看了配套应用的权限。这些权限在构建时编码在 AndroidManifest.xmlinfo.plist 中,一旦应用发布就无法更改。令我兴奋的是,Playground 应用已经拥有了所需的蓝牙权限。

nativescript playground companion app permissions

这是一个好兆头。这意味着应该可以与操作系统的蓝牙 API 进行交互。

NativeScript 插件来帮忙!

开发人员使用平台 API 的推荐方法是使用 NativeScript 插件

NativeScript 的第二个强大功能是其插件生态系统的广度。

已经有 可用于蓝牙的插件。我检查了一下,发现它在 Playground 应用中默认没有包含。当您在设备上扫描项目的 QR 码并在 Playground 中打开“设备”窗格时,您可以看到 Playground 应用中可用的插件。

companion app plugins

令我高兴的是,Playground 有一个很不错的功能,允许我添加 NPM 模块。每个 NativeScript 插件都是一个 NPM 模块,所以我也能添加插件!为此,我点击了资源管理器窗格中的“+”号,并选择了“添加 NPM 包”。不过有一个重要的限制,在对话框中已经明确说明了。

目前不支持添加依赖于 CocoaPods 或 Android 库或需要更改 App_Resources 的 {N} 插件,并且可能无法按预期工作。

请记住,Playground 应用发布在商店中,其内部的原生代码无法更改!

通常,NativeScript 插件包含一些用 Objective-C/Swift 和 Java/Kotlin 编写的原生代码,以及 JavaScript 部分,该部分向您在应用中编写的 NativeScript 代码公开通用 API。但是,这并非总是必需的。

使用NativeScript 的第三个强大功能,您可以直接从 JavaScript 访问平台代码,无需任何中间环节!如果您正在与 Android 和 iOS 平台 API 交互,这将非常有效,这正是我遇到的情况!

因此,我查看了蓝牙插件的源代码,很高兴地发现其中没有原生代码。它很简单,很乏味(乏味的代码就是美丽的代码!),就像这样用 TypeScript 编写的代码:

/**
* Bluetooth LE scan callbacks. Scan results are reported using these callbacks.
* https://android-docs.cn/reference/android/bluetooth/le/ScanCallback.html
*/

@JavaProxy('com.nativescript.TNS_ScanCallback')

// tslint:disable-next-line:class-name

export class TNS_ScanCallback extends android.bluetooth.le.ScanCallback {

看起来我可以在网页上测试代码时使用蓝牙!

开始编写代码!

我快速创建了一个简单的应用,用于扫描附近的设备。其核心代码是从插件文档中复制粘贴的。

onButtonTap(): void {
   console.log("Start scanning");
   bluetooth.startScanning({
       serviceUUIDs: [],
       seconds: 2,
       onDiscovered: (peripheral) => console.log("Peripheral found with UUID: " + peripheral.UUID)
   }).then(
       () => console.log("scanning complete"),
       (err) => console.log("error while scanning: " + err)
   );
}

我运行了它,惊奇地发现我的办公室里有多少设备。

bluetooth devices

结语

就是这样!我很高兴能够对客户的问题给出肯定的答复。在这个过程中,我发现了如何轻松地使用 NativeScript 的强大平台 API。

所有这些都不需要安装任何平台 SDK 或工具,可以直接解决我需要解决的问题。我只是阅读了文档并编写了一些 TypeScript 代码,直接在浏览器中完成。

如果您对完整的应用感兴趣,可以在 我的 NativeScript Playground 项目 中查看。