手把手第九篇：你好，FinClip

刘咸安 -

在上期文章中，我们主要聊了聊在小程序开发过程中，如何使用组件提升开发效率。本期文章中，我们将再次将目光转回 FinClip，与大家再次介绍产品相关的信息与内容。

本期文章属于《手把手系列教学》的第九篇，如果你还不太了解这一系列，可以点击 这里 查看详情。

一、什么是 FinClip 小程序

说起 FinClip 小程序，我们不得不先谈谈 FinClip，避免读者朋友对于 FinClip 造成误解。

FinClip 是一款与“微信小程序”、“百度快应用”等提供类似小程序技术的平台。它由能渲染与执行小程序的客户端引擎、统一管理小程序上下架的中心、支撑小程序服务器端运行的云端设施三部分组成，同时还包括我们向指定行业提供的监管与合规工具（如金融行业合规监管工具）共同组成。

而 FinClip小程序是一种面向企业应用、有企业自主管控运行的小程序技术，由凡泰极客研发。它与互联网主流小程序技术极其类似、代码兼容程度高。任何企业的 App，均可以通过嵌入一个小组件（见“运行沙箱”）而立刻获得运行小程序的能力。本文如不作特别说明，“小程序”特指 FinClip 小程序。

二、FinClip小程序有何优势

那么 FinClip 小程序具体有何优势呢，总结为以下几点。

  1. 多端上线：FinClip 小程序可以同步上线多个宿主端（宿主：即小程序可上线的 APP），为开发者节省大量的人力和时间；
  2. 完整的生态圈：FinClip 小程序拥有与之配套的开发工具（FIDE）、与之配套的移动端开发助手（FinClip Mobile Assistant）、与之配套的文档中心（Document Center）、以及与之配套的 FinClip 应用商店（一个管理 FinClip 小程序上下架的管理中心，并兼具审核、监控、数据收集分析等能力）等；
  3. 兼容度高：FinClip 小程序它与互联网主流小程序技术极其类似、代码兼容程度高。因此上手 FinClip 小程序所需学习成本较低，同时由于与互联网主流小程序极其类似且代码兼容程度高，因此将已有的其它平台的小程序（如微信小程序）转移到 FinClip 上所需的成本也相对较低；
  4. 合规引流：由于 FinClip 解决“金融行业应用嵌入第三方网络空间”的安全合规问题，合规引流。因此 FinClip 小程序可以轻松连接金融服务场景；
  5. 完善的功能链：FinClip 小程序拥有灰度发布、数据统计、证书管理、域名管理等多项较为完善的功能。

三、FinClip小程序运行逻辑
1. 运行时架构

FinClip 小程序编程模型是分为多个页面，每个页面有自己的 template、CSS 和 JS，实际在运行的时候，业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中，每个页面的 template 和 CSS 是运行在各自独立的 WebView 里面，页面之间是通过函数 NavigateTo 进行页面的切换。

每个 WebView 里面的页面和公共的 JavaScript 引擎里面的逻辑的交互方式是通过消息服务，页面的一些事件都会通过这个消息通道传给 JavaScript 引擎运行环境，这个运行环境会响应这个事件，做一些 API 调用，可调到客户端凡泰小程序提供的一些能力，处理之后会把这个数据再重新发送给对应的页面渲染容器来处理，把数据和模板结合在一起来，在产生最终的用户界面。

下图是对运行时架构的基础介绍：

2. 分离视图层与逻辑层

在 FinClip小程序 中，视图层通常与逻辑层分离。视图层 View 负责渲染小程序页面，包括 Web 组件和原生组件渲染，可以将其视为混合渲染。例如，Web 组件渲染可以由 WebView 处理，但 WebView 不支持某些 Web 组件渲染，或者是性能受限；小程序还依赖于某些原生组件，例如地图、视频等。

逻辑层 Service 是用主要用于执行小程序的 JS 逻辑。主要负责小程序的事件处理、API 调用和生命周期管理。扩展的原生功能通常来自宿主原生应用程序或操作系统，这些功能包括拍照、位置、蓝牙、网络状态、文件处理、扫描、电话等。它们通过某些 API 调用。当小程序调用原生 API 时，它会将 API 调用传递给扩展的原生功能，以便通过 JSBridge 进一步处理，并通过 JSBridge 从扩展的原生功能获取结果。Service 为每个 Render 建立连接，传输需要渲染的数据以进一步处理。

如果事件由小程序页面中的组件触发，则此页面将向 Service 发送事件以进一步处理。同时，页面将等待 Service 发送的数据来重新渲染小程序页面。

渲染过程可被视为无状态，并且所有状态都将存储在 Service 中。

视图层和逻辑层分离有很多好处

方便多个小程序页面之间的数据共享和交互。 在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验。 Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染，这有助于提高渲染性能。

同时因为 JS 在 Service 层执行，所以 JS 里面操作的 DOM 将不会对 View 层产生影响，所以小程序是不能操作 DOM 结构的，这也就使得小程序的性能比传统的 H5 更好。

对双线程模拟感兴趣的同学可进一步参考我们在掘金中发布的这篇文章，或者点击这里查看本文相关的示例代码。

3. 多重渲染环境

FinClip小程序在渲染环境之间使用原生页面堆栈管理，页面切换由原生代码驱动。因此，在页面中的手势操作和页面之间的切换可以实现与原生应用完全相同的流畅体验。

综上所说，由于视图层和逻辑层的隔离，视图层可以独立渲染。不受 JavaScript 逻辑代码的阻碍，可以大大提高页面的渲染速度。

4.预构建和复用运行时环境

FinClip小程序的运行时环境通常在启动应用程序之前预先构建，从而缩短了启动时间。预构建的内容包括渲染环境、静态资源、开发人员定义的预取请求和小程序运行时容器。

小程序激活后，它将接管预构建的渲染环境，然后我们继续为缓存池预构建新的渲染环境以备下一次使用。渲染环境数量有一个限制，当任何渲染环境关闭或超出数量限制时，最早打开的渲染环境将被销毁。当小程序退出时其运行时将被销毁，而应用程序环境和资源可以复用。

5. JavaScript框架预设和热更新

FinClip 小程序的运行时环境包含两大部分，其一是原生代码提供的基本功能，其二是一个框架，包括开发人员 API 和一些由 JavaScript 实现的组件。JavaScript 框架内置于原生应用程序中，并将在执行小程序之前提前加载到小程序运行时环境中。JavaScript 框架可以热更新（在使用期间重新加载），带来了很多性能提升的潜力。

6. FinClip小程序打包

使用FinClip小程序的构造器，用户只需在首次打开小程序时下载软件包即可，之后无需再次下载小程序中的静态资源（页面 /JavaScript/CSS），这样加载和跳转页面就会更快。此功能可改善用户操作体验并节省网络流量。

同时，FinClip小程序有一个预下载机制，可以提前下载小程序软件包，或者单独预载第一页，并在下载过程中并行执行流解压，以最大限度地减少小程序启动阶段和耗时，提升初次打开首页的性能表现。

7. FinClip小程序销毁机制

通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁，移动端小程序的销毁机制如下：

  • 当小程序占用系统资源过高，可能会被系统销毁或被客户端主动回收。
  • 在 iOS 上，最多允许有 5 个小程序 同时存在，如果超过 5 个会销毁最久未被使用的那个小程序。此外当客户端收到内存告警时，会主动进行所有后台小程序的销毁。
  • 在 Android 上，最多允许有 5 个小程序 同时存在，如果超过 5 个会销毁最久未被使用的那个小程序。此外当内存不足时，系统会直接回收内存，销毁后台长时间未使用的小程序。

桌面端只要小程序没有关闭，小程序会一直处于运行状态，如果关闭了，会直接销毁。

四、FinClip 对比微信小程序的兼容性

  1. 语法：语法上高度兼容微信小程序语法；
  2. API：除了与微信服务器交互的相关 API 外（比如登录、主题、App 更新、转发、支付、人脸识别等等），我们支持绝大多数 API ，不在此作一一介绍（具体参考这里）；
  3. 组件：与微信组件对齐，不在此作一一介绍（具体参考这里）；
  4. 目前 FinClip 暂不支持以下类型的小程序或功能：

五、FinClip 小程序从零到一实战

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

首先请登录 https://finclip.com/#/login?type=register ，在分别输入团队名称，邮箱与密码后，点击底部的按钮，即可完成注册。

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

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

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

第二步，开发工具 FIDE 下载

我们可以点击链接下载最新版FIDE工具：https://www.finclip.com/mop/document/develop/developer/fide-update-log.html

第三步，新建小程序项目

下载安装完成后，打开FIDE，输入前文中注册的账户与密码，即可登录 FIDE。

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

  1. 项目名称：给你的项目起个名字，建议使用英文，比如 HelloWorld（注意，项目名称不能重名）；
  2. 目录：给你的项目找个家，选择一个空的文件夹用于存放小程序的项目文件；
  3. APP ID：当你登录后，这里会显示出所有已创建的小程序 APP ID，因为我在上文中的「准备第一步，注册平台账号并创建小程序」中已经完成了小程序创建，因此就直接选择了这个小程序；

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

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

第四步，编写小程序

本文不在此作过多介绍，可参考以下文章：

从零到一，我也能写小程序
看了这篇文章，即使让我现在就从头写一个能够正常运行的小程序，也没有原本想象中的那么难了。
FinClip 产品博客王字
开发小程序的正确方式
工欲善其事必先利其器，在开发小程序之前，不妨让我们先来了解清楚，什么是正确的方式与工具。
FinClip 产品博客王字
手把手第四篇：在小程序中写出 Hello World
在学会了写出自己的第一个移动应用之后，不妨来试试看写出自己的第一个小程序，而且真的没有那么难。
FinClip 产品博客蒋雪

第五步，将小程序上传到 FinClip

按照上文中的管理后台，在注册登录后，点击首页或左侧的「小程序管理」，进入到已经新建好的小程序详情中，进行小程序的提审与上架操作。

选中版本并点击「下一步」后，就到了补充审核信息的步骤了。如果我们的小程序比较简单，也不包括登录逻辑，则可以直接点击下一步对所有信息进行二次确认。

在审核通过后，点击「审核版本」卡片右侧的「版本上架」，就可以将小程序上架在 FinClip.com 中了。

点击「审核版本」左侧的「线上版」按钮，即可获得一个可以公开的二维码，任何人均可通过 FinClip APP 扫码体验。

祝你成功！

本期教程我们一起对 FinClip 进行了初步认识。在下一期文章中，我们将会聊聊各大厂商 SDK 对比使用的知识，敬请期待。