如何在 NativeScript 中将移动应用项目转换为 Web 应用（代码共享）结构？

Question

official documentation 解释了如何将现有的 Angular Web 项目迁移到代码共享结构。

但我找不到有关如何反其道而行之的文档。即，如何将现有的 NativeScript Mobile 项目迁移到代码共享结构。

对如何将现有的移动应用项目转换为网络应用项目有任何想法吗？

Answer 1

我之前也回答过这个问题，这里是我遵循的步骤。 为 Web 和移动设备使用相同的代码库实际上非常节省时间。以下是我根据经验建议的步骤。

1. 您应该使用@angular/cli@6.1.0 或更新版本。 npm i -g @angular/cli
2. 安装nativescript-schematics。 npm i -g @nativescript/schematics
3. 创建一个新项目。 ng new --collection=@nativescript/schematics my-mobile-app（我是这样做的，然后从移动应用复制到 src/app 文件夹）。
4. 从现有项目中复制 app/src 文件夹。 （您可能需要在 nsconfig.json "appPath": "app" 中查找源文件夹）
5. 找到您正在使用移动特定组件的 .ts 文件并为其创建一个wrapper class。例如。我在移动应用程序中使用Fancy Alerts，所以我创建了一个包装器帮助器类，如 helper.tns.ts 和 helper.ts

在 helper.ts 中

public show() {
    alert('Javascript+HTML alert')  .
  }

在 helper.tns.ts 中

public show() {
    TNSFancyAlert.showWarning('Warning!', 'Message', `Ok`, 0, 300).then(() => {
         resolve('Success');
    });  
  }

5. 将所有 .html 重命名为 .tns.html 并创建特定于 Web 的 html 文件。

构建网络应用

ng serve

构建移动应用

tns run android --bundle
tns run ios --bundle

附： --bundle 是此处仅编译移动特定文件的关键。定义组件视图的 HTML 代码在 Web 和移动应用程序之间应该是不同的。