FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

文档中心
  • 介绍
  • 开发
  • 小程序 SDK
  • 常见问题
  • 数据
  • 设计
  • 运营

# FinClip Studio 操作指引

FinClip Studio 是面向开发者推出的「小程序桌面端集成开发环境」。自 2021 年起就一直陪伴来自不同平台的小程序开发者完成小程序开发、调试、预览、上传等各类功能。

升级说明

随着 FinClip IDE 中的各类功能逐渐增多，我们也在其中逐渐增加了小程序兼容性检查、小程序开发、真机调试预览、小程序一键转 App、小程序云开发等各类插件或能力，以便能够为开发者在开发小程序的过程中提供更加周到的体验与帮助。

在 2022 年，我们发现已有的 FinClip IDE 在性能与体验上有较为明显的限制，随着小程序开发者使用程度与场景逐渐深入，我们发现原有的 FinClip IDE 在编辑器交互体验上不够完整，在新版本 FinClip Studio 中整体重做了开发者工具，提供更加接近 vscode 的代码编辑器使用体验，并且原生支持 vscode 插件集成，默认集成了小程序代码提示、代码补全、js link 、代码方法提醒、git 扩展、系统终端交互等现代编辑器具备的功能。

请注意，本文档为最新版本 FinClip Studio 的操作指引，如果您希望查看老版本的操作说明，请点击这里。

image.png

# 1. 启动页

在启动界面，可以选择曾经打开过的小程序项目，项目首页为小程序最后打开页面的截图，方便快捷的找到想要打开的项目。

image.png

# 1.1 新建项目

此界面选择项目目录，类型，模版 以及 App ID，其中 App ID 是可选项，本地开发可以暂时先不填，上传到小程序开放平台的话需要登录并和后台小程序 App ID 进行关联操作。 image.png

# 1.2 打开已有项目

打开已有工程只需在项目目录选择已经存在的小程序工程，一般来说，该目录是存在 project.config.json 或者 fide.project.config.json 的目录，注意有一些代码框架的根目录并非小程序的根目录，请注意甄别。

项目打开前，会提示使用兼容性检查工具对小程序进行检查，下面会对该功能进行详细介绍。 image.png

# 1.3 兼容性检查

FinClip Studio 的兼容性检查功能会扫描代码的全部组件、API 调用，对于部分暂不支持或者需要适配的接口，会给出相应的提示。 image.png

# 1.4 多开项目

FinClip Studio 现在支持项目多开，在打开项目后。 菜单 -> 文件 -> 创建工程 按照这个操作路径，可以重新打开启动页，在这里打开多个工程。

# 1.5 登录

FinClip Studio 支持多种登录方式，账号登录、短信登录、FinClip 扫码登录 image.png

对于私有化部署的用户，在登录界面点击 "配置服务器" 选择服务器地址。 image.png

# 2. 菜单栏

菜单栏中包括了小程序开发过程中的常用功能，本文中将向您介绍如下重点功能

# 2.1 帮助 -> 构建 Npm

对应微信开发者工具的构建 npm 功能，将项目工程中的 node_modules 转换为小程序用的 miniprograme_modules

# 2.2 帮助 -> 删除用户数据并重启

对于偶尔遇到功能异常，缓存问题等，这里提供一个便捷的重置 FinClip Studio 的途径，就是删除应用本地数据并重新启动，此方法可以解决大部分缓存异常导致的问题。

# 2.3 帮助 -> 上传日志

此功能会将 FinClip Studio 运行和小程序编译相关日志上传到我们的服务器，以便更好更快的解决您遇到的问题。

# 3. 工具栏

左侧三个按钮为控制主界面模块的显示/隐藏状态的切换，其中至少需要一个模块的显示。 文档可以快速打开此 FinClip Studio 操作指引文档网页。 image.png

# 3.1 自定义编译条件

自定义编译条件可以指定带参数并以某个界面为小程序启动页面。并且该设置会同步到预览和真机调试之中。

编辑器默认的编译方式会将小程序的入口配置为首页，如您希望在调试过程中使用具体路由与参数进行调试，则可以使用该功能，如将启动页面配置为“/pages/user”，将页面参数配置为“type=new_login”，那么通过该方式编译后，小程序的进入首页则会变为“/pages/user?type=new_login”，可直接模拟进入新用户登录注册的页面中。

image.png

# 3.2 预览

预览功能需要登录后使用，它会生成一个二维码，使用 FinClip App 扫码后可以在手机中预览当前 FinClip 小程序。 针对部分内网用户，其中 baseURL 可以指定到您自己实现的代理服务器，这样也能完成预览流程。 image.png

# 3.3 真机调试

真机调试可以针对运行在凡泰助手上的小程序，使用 devtool 开发者工具进行调试，以便帮助开发者更好的定位问题和开发。 elements 面板可以查看小程序的元素状态，css 等。 console 面板可以查看小程序的输出日志，在此处访问全局变量，直接调用 API 调试查看效果，或者对运行中代码进行断点调试等。 image.png image.png image.png

# 3.4 上传小程序

此处可以将当前小程序直接上传到 FinClip 平台。 image.png

# 3.5 生成 APP

小程序生成 App 功能可以帮助开发者，将已有小程序代码导出为 iOS 与 Android 中可用的安装文件（或项目工程）。开发者不再需要掌握完善的移动应用开发与打包技能，只需要将主要的精力放在小程序中完成产品设计与功能实现，就能够获得能够上架应用商店，或者直接在手机等智能设备中安装的 App。 具体使用参考链接 https://www.finclip.com/mop/document/develop/developer/convert/convert-app.html#_1-%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D (opens new window)

# 4. 详情

点击详情可查看当前正在编译的小程序详细信息，其中分别包括了当前小程序的基本信息，本地设置，编译设置与备案域名信息（仅在登录后展示）：

基本信息：小程序的基本信息，如 App ID，项目名称，本地目录，线上最新版本，编译后代码大小； 本地设置：本地小程序基础库版本，UA 信息； 编译设置：配置保存文件时是否需要编译； 已备案域名列表：当您在登录状态下，会加载出您在 FinClip 中设置的域名信息，如小程序在本地预览与上传后出现资源加载失败的场景，请检查此处。

# 4.1 编译设置

编译设置共支持如下 7 个功能的调整：

# 4.1.1 修改编译库版本

点击修改可修改当前编译库版本

# 4.1.2 保存文件时跳过编译

FinClip Studio 默认会在保存文件时自动编译并重新加载小程序，勾选此项会跳过这个步骤，每次需要手动点击工具栏的编译按钮才会进行编译操作。

# 4.1.3 ES6 转 ES5

勾选此项，在编译时会自动把 ES6 语法使用 babel 转换为 ES5 语法，以获得更好的使用兼容性。取消勾选此项可能会导致真机小程序加载失败的问题。

# 4.1.4 样式自动补全

在预览、真机调试、上传时使用 autoprefixer (opens new window) 对 样式类自动补全前缀，以对不同的浏览器内核的真机做样式兼容性适配 autoprefixer 的 browsers 参数为 [ 'iOS >= 8', 'Chrome >= 37', ]，勾选此项会增大代码包体积。

# 4.1.5 压缩样式

在预览、真机调试、上传时使用 cssnano (opens new window) 对 wxss 文件进行压缩。

# 4.1.6 压缩代码

在预览、真机调试、上传时使用 UglifyJS 或者 Terser 对 js 文件进行代码压缩。

# 4.1.7 混淆代码

在预览、真机调试、上传时使用 UglifyJS 或者 Terser 对 js 文件进行代码混淆。

image.png

# 5. 代码编辑

编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。

# 5.1 文件操作

新建页面有两种方式

  1. 在目录树上右键，选择新建 Page，将自动生成页面所需要的 fxml、ftss、js、json
  2. 在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件

# 5.2 自动保存

编辑代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件状态，但需要注意的是，只有用户主动保存文件，修改内容才会真实的写到硬盘上。 如果设置中开启了 “自动保存”（文件 -> 自动保存），工具在修改文件时会自动保存到硬盘中，无需手动保存的效果。

# 5.3 自动补全

相比于旧版 FIDE 开发者工具， FinClip Studio 提供了较为完善的自动补全功能

  • js 文件编辑会帮助开发补全所有的 API 及相关的注释解释，并提供代码模板支持
  • fxml 文件编辑会帮助开发者直接写出相关的标签和标签中的属性
  • json 文件编辑会帮助开发者补全相关的配置，并给出实时的提示

# 5.4 代码 Link

在 fxml 中，按住 Ctrl 点击绑定的方法，可以快速 link 到对应 js 文件中的定义处。 image.png

并且在代码补全的时候，FinClip Studio 也会自动扫描对应页面的 js 文件中可用的方法，提升开发效率。 image.png

对于 data ，也可通过 ctrl（command） + 点击快速找到定义和修改的位置 image.png

# 5.5 编辑器扩展

FinClip Studio 自带一个小型应用市场，虽然比不上 vscode 官方的规模那么大，但最常用的那些编辑器插件在这里也是可以找得到的，FinClip Studio 底层使用了 Theia 作为开发框架，对 vscode 插件支持度还是比较高的，对于想使用的插件，也支持从 VSIX 文件直接安装。

这里是 Theia 开发框架对于 vscode 插件 api 的支持情况：https://eclipse-theia.github.io/vscode-theia-comparator/status.html (opens new window)

FinClip Studio 更新频率为 2 周一次版本更新，会尽量同步 Theia 官方的的版本，保持对 vscode 的兼容性。

image.png

# 5.6 Git 状态展示

如果所在的小程序工程目录（project.config.json 所在目录）存在 Git 仓库，编辑器可以展示目前的 Git 状态。 关于 Git 相关的概念不清楚的同学，可以使用搜索引擎查找相关的概念进行了解。 FinClip Studio Git 扩展本质上是将 git 的命令封装成了一些可以点击操作的功能，了解 Git 基本概念的话，这些交互是非常好理解和上手的。

# 5.6.1 目录树

如图所示，当某些文件存在变动时，目录树的文件右侧将展示相应的图标来表明这一状态。当某一处于收起状态的目录下存在有变动的文件时，此目录的右侧亦会展示一个圆点图标表明此情况。 文件图标状态的含义如下： image.png

图标 含义
A 新文件（Added, Staged）
M 文件有修改（Modified）
C 文件有冲突（Conflict）
D 文件被删除（Deleted）

对于修改中的文件，可以在左侧选择源代码管理，点击查看当前文件具体修改的内容 image.png

点击右下角，支持快速切换分支，创建分支等操作 image.png

当合代码发生代码冲突时，可以在代码编辑器界面看到冲突，手动解决冲突后，点击合并更改处的 + 号，git 进入暂存状态，可以继续其他 git 操作 image.png

# 6. 调试工具

# 6.1 视图

小程序实际渲染结构和小程序组件是比较接近的，在这里可以看到实际的 DOM 结构，此处目前是原生的 devtool 调试器，目前正在对这一块进行开发中，开发后的效果同微信开发者工具一致，在此处显示 FXML 树的结构。 这里既可以通过在视图中高亮对应的元素，也可以通过点击视图左侧箭头，通过元素在视图中找到对应的 Dom 节点。 image.png

# 6.2 日志

点击日志面板，可以直接看到小程序的运行 log，此处也可以直接调用小程序 API ，更便捷的开发与调试。 image.png

# 6.3 网络

网络面板用于观察和显示 request 、uploadFile 、downloadFile 、websocket 等 API 的请求情况 image.png

# 6.4 资源

资源面板可以对小程序进行断点调试。 APP.js 是编译后实际运行的代码。 更具小程序 page 所在代码目录，可以找到 Source Map 映射的源代码 js。 在 APP.js 和 Source Map 映射的源代码 处 均可以进行断点调试。

image.png

# 6.5 存储

用于显示当前项目使用 storage 相关接口存储的数据存储情况。 可以直接在 Storage panel 上对数据进行删除（按 delete 键）、新增、修改 image.png

# 6.6 编译日志

在此处查看小程序的编译日志 image.png

# 6.7 自定义 API

如果小程序里需要调用一些宿主 App 提供的能力，而 FinClip 小程序 SDK 未实现或无法实现时，就可以通过注册自定义 API 来实现，使得小程序里也能够调用 App 中注册的 API 了。

关于 FinClip 自定义 API 机制请参考链接文档：

FinClip Studio 会自动扫描 FinClipConf.js 中的自定义 API 配置，添加到 自定义 API 面板中 在 自定义 API 面板中，可以指定自定义 API Mock 的返回值与返回类型 勾选启动，调用对应的自定义 API 就会返回指定的 Mock 值，从而可以在 FinClip Studio 中调通相关逻辑。

image.png

# 6.8 低代码开发能力

您可以在新建项目时选择「低代码」模板了解使用。也可以点击这里查看低代码工具详细引导。

与市面上常见的低代码开发工具不同，FinClip Studio 提供的低代码工具更面向于研发人员使用，旨在加速研发人员的开发过程，从而帮助相关项目与应用的开发更加简单。

# 直连数据源

低代码工具可在不侵入客户架构的情况下，直接连接数据源（API、DB），任何的后端数据都变成了 JS 变量，可以随意转换、并配置到任意的视图组件。

# 可视化建模工具

低代码工具自带直观和灵活的可视化建模组件，如表格、图表、表单、按钮等多项组件。开发人员更可通过拖拉拽的方式配置各种组件，无需重复编写复杂的代码。

# 7. FinMuse (AI Copilot)

FinMuse 是一款基于 FinClip 小程序的 AI 智能助手，可以帮助开发者快速实现小程序的功能。

点击侧边栏的 FinMuse，在聊天面板中输入文字即可进行对话，使用 shift+enter 可以换行。

image.png

# 引用文件或者网站

输入 @ 引用相关文件或者网页，回答结果会更准确。

image.png

# 使用快捷键引用代码块

选中代码块，按下快捷键 cmd+l (MacOS) / ctrl+l (Windows)，即可在聊天中直接引用。 引用代码片段后，在聊天窗口中输入 /edit 命令，可以自动修改引用的代码。

image.png

# 快速编辑当前选中的代码

选中代码块，按下快捷键 cmd+i (MacOS) / ctrl+i (Windows)，即可直接修改所选代码。

image.png

# 自定义引用的网站

在聊天窗口中输入 @docs，按下回车，选中 Add Docs 选项，可以自定义引用文档。 本操作对电脑性能有要求，当新增文档时，会在本地启动多个进程爬取网站内容，并在本地生成 embeding。

image.png

# 自定义命令

在聊天框中输入 / 选择 Build a custom prompt，会在当前项目根路径下创建 .prompts/new-prompt-file.prompt 文件，文件名称为命令名称。

image.png

image.png

© FinClip with ❤ , Since 2017