返回博客首页
← 所有文章

使用 NativeScript Playground 让生活更轻松

2017年10月10日 — 作者：Sebastian Witalec
playground

NativeScript 团队发布了一个非常棒的小工具，它将改变世界。好吧……也许不是整个世界，但至少它将帮助我们分享 {N} 代码示例。这个工具叫做 Playground，顾名思义，它充满了“乐趣和游戏”。

在深入探讨如何使用它来简化你的生活之前，让我先快速概述一下。

一句话概括 NativeScript Playground 是什么？

{N} Playground 是一种解决方案，允许你在网页客户端 play.nativescript.org 上编写 {N} 代码，并借助 NativeScript Playground 应用 (Android，iOS) 和 NativeScript Preview 应用 (Android，iOS) 部署到你的设备上。

设置

NativeScript Playground 网页客户端

第一个惊喜来了。

开始编写代码无需任何设置。你只需要一个现代的网页浏览器和脸上带着微笑（最后一个是可选的，但不可避免的）。

只需确保你的浏览器支持 Monaco 编辑器即可。

你的智能设备 (Android)

你只需要安装

你的智能设备 (iOS)

你只需要安装

如何使用它

选择你的模板

当你导航到 https://play.nativescript.org/ 时，你会看到 3 个不同的模板供你选择。

playground-templates

扫描代码

选择模板后，系统会提示你使用 NativeScript Playground 应用扫描二维码。这将打开 NativeScript Preview 应用中的应用。

playground-scan-the-code

进行更改

现在你可以更改代码了。你可以轻松编辑所有可用的文件（html、css 和 ts）。当你准备好后，只需保存文件（⌘ + S 或 CTRL + S），这将自动并立即更新 Preview 中的应用。

如果你问。不！你不需要一遍又一遍地扫描代码。

编辑 UI

你可以手动插入所有 html 标签，或者更好地从左侧窗格的 组件列表 中拖动它们。这将自动生成必要的代码。如果你拖动一个按钮，Playground 还会在 TypeScript 文件中生成一个 onButtonTap 函数。

打印到控制台日志

我见过的几乎每个 {N} 应用都在到处使用 console.log()。但是，如果你不使用终端 (Mac) / 控制台窗口 (Windows)，你如何访问终端？答案是，你不需要，因为 Playground 有一个 日志 面板，它打印来自 NativeScript Preview 应用的所有 console.log() 消息。我已经测试过它，即使你一次性在 console.log 中打印 1000 多行，它也能正常工作。

Playground 实战

它太快了，让人难以置信。

I-love-Playground


限制

调试

目前无法使用 Playground 调试你的代码。但谁知道呢……Playground 团队人才济济，如果有一天他们添加了使用 Chrome Dev Tools 进行调试的功能，我也不会感到惊讶。

插件

你可能已经注意到，每当你进行更改时，应用都会非常快地刷新。这是因为我们只同步了应用代码。但是，我们没有重新构建完整的应用包。这意味着你无法将 NativeScript 插件添加到 Playground 项目中。

我上次检查时，Playground 有以下插件

  • nativescript-accelerometer
  • nativescript-geolocation
  • nativescript-pro-ui
  • nativescript-theme-core
  • rxjs

所以你仍然可以玩一些插件。

Playground 的用途是什么？

这可能会让你有点惊讶，但 Playground 不是设计成一个完整的 IDE 或开发工作室。顾名思义，它是一个允许你玩 NativeScript 的解决方案。快速尝试一些东西并快速查看结果。

话虽如此，这仍然是一个非常强大的工具，它可以帮助你解决很多问题。

"帮我解决代码问题"

如果你遇到问题需要帮助。获得良好答案的最佳方法是分享你的代码。

然而，麻烦就从这里开始了。因为人们通常只会分享一小部分代码，而忽略了重要部分的一半；或者如果你将项目上传到 GitHub，那么任何愿意帮助你的人仍然需要克隆你的仓库并构建项目（但这可能需要相当长的时间）。

这就是 Playground 派上用场的地方。

只需创建一个新项目并添加更改以重现问题。然后按下 分享 按钮，Playground 将创建你的代码的 快照，并且你会看到一个新的 URL。任何拥有该 URL 的人都可以访问你的 快照。

如果他们找到了解决你问题的有效方案，那么他们可以按下 分享 按钮创建一个新的代码片段并与你分享。

这不仅仅是理论上的工作方式。我已经帮助过很多人，他们与我分享了他们的 Playground 代码片段。

Playground-Share

动手操作

Playground 也是一个非常强大的工具，可以帮助任何人快速上手 NativeScript。过去，安装和配置所有工具可能需要一个小时左右，但有了 Playground，任何人都可以在 5 分钟内开始使用 NativeScript。

如果你是一位高级 NativeScript 开发人员，那么你可以使用 Playground 来教其他人如何构建移动应用。

研讨会、教程、文档

承接上一点，我们将使用 Playground 来帮助我们分享知识。所以，你可能会在任何地方看到大量的 Playground 二维码。无论是在研讨会、教程还是文档中。这仅仅是我们与你分享小巧代码示例的最简单、最快捷的方式。

Vue

Vue

不要告诉任何人（我在跟谁开玩笑呢？），你甚至可以在 Playground 中使用 NativeScript Vue。太疯狂了！对吧？

只需打开此网址 https://play.nativescript.org/?template=play-vue，你就可以开始了。

要了解有关 NativeScript Vue 的更多信息，请阅读 @tjvantoll 撰写的 native-ios-android-vue-nativescript 文章。

结语

尝试一下 Playground，你就会立即明白我们为什么对此如此兴奋。

我们仍在开发它，希望为 Playground 添加更多酷炫的功能。例如，我们很快就会计划添加一个允许你添加新文件的功能。

你有什么建议可以帮助我们将其打造成为每个人都能使用的更好工具吗？也许有你想让我们添加的插件？在评论区告诉我们吧。