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

Question

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

但是我找不到有关如何进行其他操作的文档。也就是说，如何将现有的NativeScript Mobile项目迁移到代码共享结构。

关于如何将现有的移动应用程序项目转换为Web应用程序项目的任何想法？

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');
    });  
  }

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

构建网络应用

ng serve

构建移动应用

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

P.S。 --bundle是仅编译移动专用文件的关键。 Web和移动应用程序之间定义组件视图的HTML代码应该不同。