面向 .NET 开发人员的 NativeScript

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

与听起来可能相反,NativeScript 不是一种编程语言——事实上,它只是使用您可能已经知道的语言:JavaScript、CSS 和 XML。 NativeScript 是一个使用 JavaScript 构建跨平台真正原生移动应用程序的框架!

没有 DOM,没有交叉编译,也没有混合移动 WebView 渲染。您拥有单一的 JavaScript、XML 和 CSS 代码库,可以制作跨平台运行的本机应用程序。 NativeScript 作为一个平台是 开源的 ,并通过 命令行界面 (CLI) 提供免费的开发人员工具。

现在,听起来 NativeScript 主要是为了迎合 JavaScript 开发人员的需求——可以这么说,你知道,那些紧身牛仔裤的潮人。尽管您可能尊重非 Microsoft 开发人员,但也许您不是其中一员。也许您是 Microsoft 堆栈中的 .NET 开发人员并为此感到自豪。如果是这样,您就有充分的理由 - 它是最丰富的开发人员生态系统之一,并且拥有一些最好的可用工具。

事实证明,NativeScript 对 .NET 开发人员有很多很多的吸引力。您将享受各种可能性。让我们开始吧。

本文是为 .NET 开发人员解压 NativeScript 的第 I 部分。在第二部分中,我们将讨论 UI 组合和更多工具。

熟悉 Visual Studio

现在免费的 CLI 工具可能很流行,但您可能整天都在 Visual Studio 中度过。通过付费的 Telerik Platform 订阅(或免费试用),您可以在 Visual Studio 中构建整个 NativeScript 应用程序,而无需离开您最喜欢的 IDE 的舒适环境。

NativeScript 应用程序包含三个主要组件——JavaScript 中的业务逻辑、XML 中的 UI 标记和 CSS 样式。而且 Visual Studio 非常擅长支持 JavaScript、XML 和 CSS——这种配合是自然而然的。

只需注册或登录到 https://platform.telerik.com 并点击 入门 ,然后 点击下载 。选择 AppBuilder NativeScript 并下载/安装 AppBuilder Extension for Visual Studio 。一切就绪。

在 VS 中构建您的 NativeScript 应用程序

当您执行 File > New Project 时,您将看到所有 NativeScript 项目模板。

在 Visual Studio 中创建 NativeScript 项目后,您会看到一个看似熟悉的项目结构。所有 NativeScript 模块 都位于一个 tns_modules 文件夹中, App_Resources 包含您的平台特定图标,而 app 文件夹包含您的所有代码。

您可能会注意到简单的 MVVM 类型约定——如果您有一个 main-page.xml (UI 标记),NativeScript 会自动将它与一个 main-page.js (代码隐藏)配对,并且通常有一个 主视图-model.js (查看模型)在同一文件夹中。

进入 Visual Studio 后,您将获得使用 JavaScript、XML 和 CSS 编写代码的所有常用帮助,例如语法突出显示和代码完成。

需要引入一些包依赖?正如预期的那样,您将在 package.json 编辑中获得 Visual Studio intellisense,如下所示:

NativeScript 使您可以访问所有本机平台 API。您还可以获得强大的 应用程序生命周期管理 控制,包括以下应用程序生命周期事件 – launch suspend resume exit lowMemory uncaughtError 。在任何时候,您都可以 保留 恢复应用程序设置 ——通过 应用程序设置 NativeScript 模块直接访问设备文件系统。

几乎任何你可以在原生应用程序上做的事情,你都可以通过 NativeScript 模块和抽象来完成——只需通过一个服务于多个平台的代码库。

从 VS 部署你的 NativeScript 应用程序

准备好试用 NativeScript 应用程序后,请使用 Visual Studio AppBuilder 菜单 。您可以在本机模拟器上或直接在设备上运行您的项目。

如果您要部署到模拟器,您可以选择在原生 Android 模拟器 GenyMotion 甚至是 Microsoft 制造的 Android 模拟器 上运行您的 Android 项目。要从 Visual Studio 将 iOS 应用程序部署到本机模拟器,您必须将远程 OSX 计算机配置为构建主机。

然而,重要的是要声明, 您不必拥有 Mac 即可为 iOS 构建 !您只需选择使用现有的 iOS 设备并直接部署到这些设备即可。如果您是现有的 Telerik 平台订阅者,只需使用云 iOS/Android 构建。您可以将您的应用程序构建为本机应用程序包,或通过每个平台上可用的相应 NativeScript 配套应用程序 部署它。

云构建会生成一个简单的二维码,其中包含指向您的应用程序包的链接,其中包含您的所有代码和资产。方便吧?是的,您可以与您的应用测试人员共享此二维码。

安装后,您不必为每次代码更改都部署整个应用程序包。只需用三个手指点击并按住应用程序——最新的位会通过名为 LiveSync 的 功能下载到您的设备。

那么,如何从您的设备扫描二维码呢?当然,您可以使用任何 QR 码扫描仪,但 NativeScript Companion 应用程序实际上内置了一个。只需用两根手指从左边缘滑动即可,如下所示。

扫描二维码后,应用程序包将被拉下并部署到 NativeScript Companion 应用程序外壳中,如下面的屏幕截图所示,它加载了默认的 Hello World 应用程序。

针对通用 API 画布的 JavaScript

NativeScript 模块 提供对本机平台 API 的访问。您可以编写纯 JavaScript 来调用任一平台上的 API。

NativeScript 使用流行的 CommonJS 模块格式,允许您简单地 require 您需要的任何 NativeScript 模块。所有设备、平台或用户界面功能都位于单独的模块中。

例如,下面的代码示例显示了如何使用相机拍摄照片——NativeScript 处理将此与相应的本机 API 调用进行通信。


 var cameraModule = require("camera");
var imageModule = require("ui/image");
cameraModule.takePicture().then(function(picture) {
    console.log("Result is an image source instance");
    var image = new imageModule.Image();
    image.imageSource = picture;
});

TypeScript 中的业务逻辑

现在直截了当的 JavaScript 可能不是你的舒适区。 .NET 开发人员通常喜欢面向对象编程中的类型安全,不喜欢像 JavaScript 这样的动态语言带来的一些“怪异”。

值得庆幸的是,如果您是 .NET 开发人员,那么有一个更好的选择。您可以完全使用 TypeScript 编写您的应用程序业务逻辑代码!

如果你有 C# 背景,你会对 TypeScript 感到宾至如归,它最近受到了 很多人的喜爱 。 TypeScript 具有典型的面向对象编程范例,如类、接口、访问修饰符和扩展。

有时,小事情会造成很大的不同,例如下面一些示例中所示的 TypeScript 语法。


 var cameraModule = require("camera");
var imageModule = require("ui/image");
cameraModule.takePicture().then(function(picture) {
    console.log("Result is an image source instance");
    var image = new imageModule.Image();
    image.imageSource = picture;
});

以下是如何在 NativeScript 应用程序中编写 TypeScript 代码来获取设备地理位置。


 var cameraModule = require("camera");
var imageModule = require("ui/image");
cameraModule.takePicture().then(function(picture) {
    console.log("Result is an image source instance");
    var image = new imageModule.Image();
    image.imageSource = picture;
});

获取你最喜欢的代码编辑器,如 Visual Studio 或 Visual Studio Code ,并使用它们为你的 NativeScript 移动应用程序编写 TypeScript。您还可以获得 NativeScript 定义文件( NativeScript 存储库中的 *​​.d.ts 文件 ),这些文件会显示一些本机 API 元数据,为您提供代码完成功能 – 适用于 iOS/Android 的 TypeScript intellisense 让您的编码变得更加容易。

结论

NativeScript 的承诺很简单——您可以使用单一的 JavaScript、XML 和 CSS 代码库构建真正的原生跨平台应用程序。 NativeScript 为 Visual Studio 开发人员提供了大量工具——从构建应用程序到测试和部署的一切。不喜欢 JavaScript?好的,您可以使用 TypeScript 编写您的应用程序业务逻辑。开发人员的选择是一件好事,.NET 开发人员非常喜欢 NativeScript。