NativeScript-Vue-Examples

# Vue 开发人员选择 NativeScript 的技巧

·

一段时间以来，我一直是 NativeScript 的“休闲”爱好者。当它最初问世时，我对此很感兴趣，但从未真正有时间深入了解该平台。直到去年下半年，当我有一个客户想要构建演示时，我才能够真正获得有关 NativeScript 的经验。我也很幸运能够使用 NativeScript-Vue。我已经使用 Vue 已有一段时间了，并且爱上了它的简单性。对我来说，这是两全其美。我在使用 NativeScript 的实践经验的同时必须使用 Vue。

总的来说，这是一次了不起的经历。但是，在此过程中，我遇到了一些让我感到惊讶的事情，并且我想为其他希望利用他们的 Vue 经验与 NativeScript 一起工作的人分享一些技巧。我还要补充一点，我在使用 Apache Cordova 和 Ionic 的混合移动应用程序方面拥有很多年的经验。那次经历也使我的期望更加色彩缤纷，并在此过程中带来了一些惊喜。

# 外挂程式

Apache Cordova 项目做得很好的一件事就是定义了一组“核心”插件，这些插件可以与该项目的最新版本一起使用。这些插件包括相当常见的需求，例如相机，位置等。

当我刚开始从事 NativeScript-Vue 项目时，我惊讶地发现摄像头的支持并不那么稳定。需要明确的是，这可能只是我个人的看法，但是我在使用相机时经历了非常艰难的时光，我只是认为它“可以正常工作”。最终有些沮丧，所以我把沮丧变成了一篇博客文章：在 NativeScript Vue App 中使用相机。例如，我遇到了多个文档问题（我相信所有问题现在都已解决）。尽管这是在处理开源项目时遇到的一个相当普遍的问题（我们是人类，我们的自由时间有限，文档往往遭受最多的苦难），但我的期望来自科尔多瓦背景是更好的支持。

话虽这么说…我克服了。我一起工作。当我遇到文档问题时，我将其列为问题。展望未来，我知道 NativeScript 本身比 Cordova 更加“实用”，并且不对某些插件进行任何假设。

所有这些听起来似乎有些吓人，但这完全不是一个坏情况。主要我需要知道在哪里看。该 NativeScript 市场有超过一千插件选项。

NativeScript 市场

这里有很棒的搜索体验，并记下插件的列出方式：

插件详细信息

那里的那一行图标可让您快速了解该插件支持什么以及可以在其中使用什么 JavaScript 库。

如果所有这些图标都不太合理，请不要担心。如果将鼠标悬停在它们上面，则会得到一个很好的工具提示，告诉您它们的确切含义。从左到右，您有：

  • Android 支持。
  • iOS 支持。
  • Webpack 支持。
  • 演示支持（即插件存储库中有演示）。
  • 许可证信息。
  • “ N4”图标表示支持的最低 NativeScript 版本。
  • 然后，“ N6”图标代表当前支持的 NativeScript 版本。
  • TypeScript 图标表示可以进行键入。
  • 接下来的两个图标分别表示对 Angular 和 Vue 的支持。
  • 右第二是代表 Travis CI 支持的图标，最后是…
  • 最后一个图标表示这是受欢迎的插件。

还记得我说过科尔多瓦有一套他们始终确保能正常工作的插件吗？轮到我们的 NativeScript 具有类似的“已验证”插件。（您可以在上面的屏幕快照中看到 Image Picker 插件已验证。）

会检查经过验证的插件是否符合多个不同的条件，包括演示示例。实际上，插件必须通过十多个不同的要求。NativeScript 的人们已经写下了这些规则以及它们背后的思想。（作为一名开发人员，我非常感激。不仅告诉我“我必须做 X”，还告诉我为什么）。

这就是市场，但您也可以在以下位置找到 NativeScript 插件：

# 路由器

这是又短又甜的。Vue 路由器不起作用。有一个简单的手动解决方案。而已。😀 有关更多信息，我有两篇文章可以帮助您：

  • 使用 NativeScript-Vue 入门：第 1 集
  • 使用 NativeScript-Vue 入门：第二集

# JavaScript

这真的很令人惊讶。一旦我弄清楚了，它就完全有意义了，但是起初确实让我感到惊讶。

好消息是，您当然可以在 NativeScript 应用程序中编写 JavaScript。坏消息是您不能编写所有惯用的 JavaScript。

JavaScript，但不是您所知道的…

那有什么不同呢？JavaScript 语法（编写代码的核心方式）可以正常工作。您想在代码中使用花哨的时髦箭头功能，继续！

但是功能（特定于浏览器的功能）将无法正常使用，例如LocalStorage和IndexedDB。

我想这有点像当您从客户端代码移至 Node 时。当然，您不能IndexedDB在 Node 中使用，因为那是一种浏览器技术。但是对我来说，这不是立即显而易见的。

通常，您不必担心，因为通常有一种可以反映您需求的解决方案。使用LocalStorage和IndexedDB作为示例，您可以在 NativeScript 应用程序中找到用于客户端存储的多种解决方案。

# 用户界面

好的，是的，这是很大的一个。您可以将 NativeScript 的发展大致描述为：编写一些 JavaScript（您已经知道）并将其与新的 UI 语言（您不知道）结合起来。如果您看一下 NativeScript-Vue 的介绍，这里有一些不错的地方：

有什么收获

这里有两个项目。首先涉及学习 NativeScript CLI。那不是问题。我在工作中使用了大量的 CLI 工具。老实说，我无法跟踪所有信息及其工作方式，因此通常我会从somecli -?或 somecli -h或开始，somecli -wtf直到再次弄清楚。

第二部分虽然有点笨拙。使用 NativeScript 意味着放弃 HTML 并切换到新语法。不太可怕：

<StackLayout>
    <Label text="Hello World" />
</StackLayout>

我敢打赌，只要阅读一下，您就能猜出会发生什么。但是您绝对不能低估这里您需要做的“心理转变”。如果您已经了解 Vue，那就太好了，您将有机会学习 NativeScript-Vue。但是一定要给您足够的时间来熟悉 UI 组件。

与 HTML 一样，您将使组件侧重于布局，而组件则侧重于元素（例如表单字段）。像 HTML 一样，您将拥有大量的选择和样式设置功能。

只是不要低估这个学习曲线。这里有一些提示可供考虑：

使用 NativeScript Playground 和相应的本机 Preview 应用程序。这可能很明显，但是请不要忘记，当在大型应用程序中工作并碰到 UI 砖墙时，您只需创建一个新的 Playground 应用程序即可专门测试 UI 内容。使您的代码在那里工作，然后将其带回您的应用程序。附带说明一下，它在 JavaScript 方面也适用。我经常使用 CodePen 自己快速在 Vue 中构建内容，然后将代码迁移到我的 NativeScript 应用程序中。

接下来，查看“ 学习 NativeScript 布局 (opens new window)”。这是一个在线工具，可带您了解 UI 布局部分的一些基础知识：

了解 NS 布局

另一个很棒的工具是NativeScript Theme Builder (opens new window)，它为您提供了一个在线设计器，可以为您的应用程序设置主题。

主题生成器

# 练习，练习，练习！

希望以上技巧能帮助您为使用 NativeScript 做准备。最重要的是，您可以做的最好的事情就是练习，而 NativeScript Playground 非常适合这样做。

我很想听听您在学习 NativeScript 时遇到的“打 ic”-请在下面发表评论！

← 在 NativeScript-Vue 应用程序中使用 Vuex-现在使用 Cats！ →