SuperApp：使用脚手架

前提条件

请确保已下载并安装以下工具的最新版本：

• Visual Studio Code

• Node

初始化脚手架

1. 在 VS Code 侧边栏中选择 SuperApp Miniapp Develop Tool 插件。

2. 在当前窗口中点击 创建小程序，VS Code 将弹出模板选择页面。

   1. 插件内置提供 7 个模板，支持 React、Vue、Angular 三大主流前端框架，同时也提供不依赖任何框架的空白模板。

3. 选择模板后，系统将弹出文件保存对话框（下图以 macOS 为例）

   1. 在对话框中自定义应用名称，并选择项目存储目录。

   2. 点击 Create，即可完成脚手架项目的初始化。

4. 初始化完成后，插件将自动打开生成的项目工程。

安装项目依赖

1. 执行npm install，添加项目依赖。添加后的工程目录如图所示。

2. 工程目录结构

   • public目录是公共资源目录。

   • srcipts构建脚本。

   • src目录是开发源文件目录。里面包含了几个子目录及文件：

     • assets：放置图片，如logo等。

     • components：组件文件目录。

     • index.js：项目入口文件。

   • package.json 项目配置文件。

   • node_modules npm加载的项目依赖模块。

   • dist 使用npm run build命令打包后会生成该目录。

JSAPI接入说明

1. 在VS Code插件中对Windvane JSAPI相关的代码设置了代码片段提示，在 .js 或 .ts 文件中，输入 WV 后，编辑器将自动提示相关 API。

2. 选择目标 JSAPI 后，插件会自动插入对应的代码片段，帮助您快速完成 API 接入。