开发小程序的正确方式

2022-03-09 作者: 王字 Wannz

工欲善其事必先利其器，在开发小程序之前，不妨让我们先来了解清楚，什么是正确的方式与工具。

如同我们在一文中所说，小程序的开发并不需要配置任何开发环境，只需要安装官方的 IDE 工具即可。

在本文中，我们将会结合 FinClip 官方小程序开发工具 FIDE 与移动端应用 FinClip，介绍开发小程序前需要知道的基础信息，以及 FIDE 及 FinClip APP 的界面介绍，功能与使用技巧。

本文为「从认识小程序到研发」系列的第二篇文章，前文为《小程序的昨日与今天》。

开发前准备，共分 7 步

第一步，注册平台账号并创建小程序

FinClip 注册页面

既然是在讨论 FinClip 小程序的开发与使用，那第一步当然需要前往 FinClip.com 注册一个小程序账号，请登录，在分别输入团队名称，邮箱与密码后，点击底部的按钮，即可完成注册。

FinClip 管理后台首页

在完成账号注册后，系统会自动跳转到 FinClip 小程序开放平台的管理后台中。在管理后台中我们提供了许多与小程序，应用，安全相关的配置项，开发者可以根据自己的实际需要进行相关的配置。

创建小程序

与常见的其他小程序平台不同，FinClip 支持一个用户账户下拥有多个小程序进行使用与体验（在 FinClip.com 中，体验版用户支持免费体验最多 99个小程序），因此我们需要先点击「管理后台-首页-小程序列表」中的「创建小程序」，在补充小程序的名称，用途与简介内容后，就可以完成小程序的创建了。

当然，点击管理后台中左侧「目录-小程序管理-我的小程序」，并在之后的页面中点击「创建小程序」，也能够达到一样的目的。

小程序使用提示

创建完成后，我们会看到「小程序使用提示」的弹窗，告诉我们使用小程序的基本步骤。不过别担心，在后文中我们也会分别介绍其中的内容。

第二步，下载 FIDE

FIDE（即 FinClip Integrated Development Environment）是由 FinClip 官方推出的小程序开发工具，这款开发工具是我们为了帮助开发者更简单、高效地调试小程序，所开发的小程序开发调试工具。

FIDE 更新日志

我们可以在这里了解版本更新日志，并下载最新版的 FIDE 工具。

由于我的系统环境为 macOS，因此在后文中也会以 macOS 下的 FIDE 做配图介绍，但不要担心，不论是 Windows 还是 macOS，二者在不同系统下的体验与功能都是一致且没有区别的。

macOS 端安装应用，需要将 IDE「拖拽」到右侧的「文件夹中」

第三步，下载 FinClip APP

既然我们是在做小程序开发的准备，当然需要准备移动端的 APP 进行体验与预览，因此我们需要在手机中下载「FinClip」移动应用。

FinClip（凡泰助手）介绍

iPhone 用户直接在 App Store 中搜索「FinClip」，结果中第一个「FinClip-凡泰助手」就是我们所需要的应用。扫描上图中的二维码跳转到应用商店也能够获取应用；
Android 用户需要在手机浏览器中点击「」，或者使用「扫一扫」扫描上图中的二维码进行下载，下载安卓系统中对应的版本。

第四步，新建小程序项目

在下载完毕后，我们打开对应的安装文件，完成 FIDE 的安装即可。

FIDE - 登录界面

打开后，分别点击右上角的「 1-登录按钮」，输入前文中注册的账户与密码，即可登录 FIDE。

如果你已经下载了移动应用「FinClip」并完成了账户登录的话，也可以点击「2-切换登录方式」，使用扫码的方式进行登录。

FIDE - 创建小程序

登录后，我们点击「新建按钮」开始创建小程序，创建时我们需要分别输入图中的三部分内容，即：

完成信息填写后，点击下面的「确定」按钮，完成项目创建。

如果你选择的目录中已经有小程序相关的代码文件，FIDE 则会提示你「该目录为非空目录，将保留原有文件创建项目」。

第五步，认识 FIDE

FIDE - 窗口结构介绍

我们分别按照从上到下，从左到右的顺序，将 FIDE 分成如上图中的 5 个区域，这些区域分别是：

在顶部的工具栏中，各按钮的对应功能介绍如下：

FIDE - 工具栏

而在 FIDE 右下角的「调试器」中，则主要有如下功能：

FIDE - 调试器

为了保持 FIDE 的使用与获得最新的功能体验，请保证您所使用的 FIDE 是最新版。FIDE 集成了自动更新功能，会在每次打开时检测最新版本，当然也可以通过点击 FIDE 首页左侧的蓝色版本号数字，进行手动检查更新。

开发第三步，正式开始编写小程序

在这里，我们同样以前文新建的「HelloWorld」小程序的文件空间示例，进行讲解。

小程序目录结构

我们可以在「小程序代码根目录」下看到一共 5 个文件，这 5 个文件是小程序应用级别的文件，分别是：

app.ftss 小程序全局公共样式文件
app.js 小程序逻辑文件
app.json 小程序配置文件
fide.project.config.json 项目配置文件
sitemap.json 小程序索引 sitemap

此外则是与这 5 个文件平行的两个文件夹，分别是「pages」与「utils」，其中的「pages」文件夹是用来存储小程序中每个页面的具体目录。

如上图所示，我们会看到「pages」目录下还分别有「index」和「logs」2个目录，其实是用来指代「index」和「logs」2个页面中的对应文件。在每个页面中，分别由以下 4 个文件组成（以 index 页面为例，实际每一个页面目录中所有的文件名必须要相同）：

index.ftss 页面样式文件
index.fxml 页面结构文件
index.js 页面逻辑文件
index.json 页面配置文件

其中的 ftss ，其实就是 fantai stylesheet 的意思

如果我们将这 4 个文件与大家熟悉的前端技术进行对比，则会更加容易理解：

ftss 文件类似我们常见的 CSS 文件，其实小程序的样式语言就是通过 CSS 进行编写的，只不过将 .css 的后缀变为了 .ftss 用以区分；
fxml 文件类似我们熟悉的 HTML 文件，用来配置页面的标签与骨架。但小程序与 HTML 不同的则是不可以使用 HTML 中的标签，而只能使用小程序中封装好的组件；
js 文件类似在前端中常见的 JavaScript 文件，用来编写小程序中的页面逻辑；
json 文件则是用来配置页面中样式与行为。

而在另一个「utils」目录中，则主要用来存放一些公共的 js 文件。

第六步，认识 FinClip APP

FinClip（凡泰助手）界面示意

当我们在应用商店中获取并下载「FinClip APP」到自己的手机后，会在登录后看到如上图所示的 4 个页面，分别为「首页」，「互动页」，「资讯页」与「我的」。

我们将为您重点介绍「首页」与「互动页」中的相关内容。

FinClip（凡泰助手）快捷入口

点击页面左上角和右上角的 2 个按钮，还可以分别进入「小程序中心」与「扫码」页面，在小程序中心中，会展示用户近期所访问过的小程序内容，而扫码页则可以用来登录 FIDE 或扫描小程序预览码，进行测试等。

FinClip（凡泰助手）- 首页介绍

点击「首页」中的「热门小程序」可以打开相关的小程序，体验 FinClip 中各类小程序的实现效果与实际作用，点击「示例演示」则可以查看 FinClip 中小程序的各类组件演示，预览不同接口下的具体实现方式。

FinClip（凡泰助手）- 互动页介绍

在「互动」页中，通过分别点击不同的卡片，将可以直接体验到「搜索能力/灰度发布/支付功能」等不同 FinClip 小程序中所特有的功能，帮您更进一步的了解 FinClip 小程序的相关特性与能力。