FinClip凡泰极客小程序初体验

本文正在参与#稀土掘金×凡泰极客小程序体验有奖征文活动#，走进FinClip，轻松实现小程序产品梦。活动指路👉juejin.cn/post/709941…

前言

目前小程序的开发已经很普遍了，大家比较熟悉的就是原生小程序的开发，或者Taro,uni-app比较主流的跨多端的前端开发框架。今天我们要介绍的是FinClip，那么它是什么又和Taro,uni-app有什么不同呢

一、首先FinClip是什么

1.支持多平台终端兼容

无论是手机，电脑，还是IoT都是可以使用的。自带多终端小程序 SDK，简单集成后即可在 iPhone，Android，Windows，Linux，macOS 平台下的应用中运行你的小程序。

2.集成，打包体积小

移动 App 集成 FinClip SDK 后，安装包的体积仅仅增大了不到 3MB，让用户在安装 App 时不再为庞大的体积惊讶。这使得APP 更轻量。

3. 开发，设计到调试一站式服务

IDE 支持小程序在线编译 ，细致的开发文档和“手把手教程”快速带你入门，预览代码效果的 App 。

4. 支持微信小程序原生语法

FinClip 天然支持微信小程序语法 WXML，无需使用第三方跨端跨框架解决方案，即可编译运行已有微信小程序代码，上手简单。

5. 灰度发布与统计回归

FinClip提供了面向业务与运营的灰度发布功能，可以针对不同人群、不同地域设置不同条件，具备超级APP才拥有的“千人千面”灵活效果。

6.小程序全生命周期管理

在 FinClip 管理后台中，可以一键完成小程序上下架，应用关联， 黑白名单域名设置等多种功能，也能够快速查看小程序统计与相关数据，做到了始终以小程序为核心。

二、 FinClip与Uniapp、Taro的比较

一. FinClip 是一款轻应用平台，也是企业数字化转型的连接器。FinClip 的定位并非一款跨端应用研发框架，而是一款轻应用（小程序属于轻应用的一个子类）技术平台，它由运行小程序的宿主环境、FinClip 管理后台、一系列的开发与监控工具组成

二. uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

三. taro是多端统一开发框架，支持用 React(3.x也支持Vue) 的开发方式编写一次代码，生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用.

三、 FinClip的轻体验

初次使用，先感受下 www.finclip.com

• 1 废话不多说，先注册，新建一个小程序

刚开始还没有具体的代码，一路next,然后再编辑

• 2 下载FinClip 开发工具（类似微信开发者工具）打开FinClip

APP ID那一项初次打开选择登录以后会有 ` 在finclip的小程序开放平台种刚刚新建的小程序的appid 选中完成以后就开始编译

这里编译的速度还是很快的， FinClip的小程序启动以后，在编辑器修改代码，会自动热更新

1. FinClip的小程序的目录结构 (assets文件是手动添加)

2. 首先每个页面也是由四个文件组成,这点和原生小程序基本一致，js页面逻辑，fxml页面结构，ftss样式表，和json配置文件

3. 生命周期和事件也基本遵循原生小程序的那一套，对于一些基础的api做了一层包装，wx.方法的时候现在基本是以ft.开头

4. app.json中配置，这里和微信原生小程序基本一致，要严格遵循json的语法格式

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/index",
    "pages/circle/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "凡泰程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color":"#7B7B7B",
    "selectedColor":"#C471F5",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath":"./assets/images/main.png",
        "selectedIconPath":"./assets/images/mainSelected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "资料库",
        "iconPath":"./assets/images/data.png",
        "selectedIconPath":"./assets/images/dataSelected.png"
      },
      {
        "pagePath": "pages/circle/index",
        "text": "朋友圈",
        "iconPath":"./assets/images/circle.png",
        "selectedIconPath":"./assets/images/cicleSelected.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath":"./assets/images/my.png",
        "selectedIconPath":"./assets/images/mySelected.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

四、预览和发布

花了点时间用FinClip做了个主页部分分别在FinClip小程序开发工具和FinClip APP真机预览的效果图

1. 首先开发工具里上传代码

2. 在小程序开放平台就可以看到我提交的小程序

3. FinClip APP中管理小程序中可以看到我的小程序

FinClip小程序开发工具预览效果

FinClip APP真机预览的效果

五、反馈和建议

1.对于 finclip的小程序开放平台（logo模糊的问题）

在你刷新的那一瞬间，你可以清楚的发现这个logo是由清晰瞬间到模糊的，于是我去查找这个问题，这张logo的尺寸是320*120，这里缩放了2倍导致图片糊掉了

解决方法 给这个logo图，加如下代码

image-rendering: -webkit-optimize-contrast; 
image-rendering: crisp-edges; 

瞬间就清晰了。这虽然是个小问题，作为前端不能容忍

2.对于 finclip的小程序开放平台（滚动条的问题）

外层的滚动条需要优化，我点了多个的菜单发现，外侧的滚动条无用处 (所以在body中是可以隐藏的）

3.对于编译失败的时候应该 抛出的异常部分做红色处理，因为全是灰色不太好锁定问题文件

4.我们在写ftss样式表的时候，通常热更新不能及时刷新页面，我本来写错单词，然后改正后，编译依然是失效的，要手动刷新编译按钮

5.可能新的产品社区占时不够完善，我暂时在VScode里面未找到相关插件对ftss做智能提醒，这就在写样式的时候很难受

6.无论是finclip的小程序开放平台还是finclip App对于用户账号电话的显示都应该做*号处理

优点

1.首先如果是了解原生开发的用户，上手finclip更容易，使用finclip的开发工具要比微信开发者的功能更多，配合finclip小程序开发平台，更能快速的搭建小程序

2.和我们平时常用的Taro和uniapp发展的领域也不同，finclip拥有自己的开发者平台，在以后的运用中更广。

3.finclip支持多平台终端兼容，自带多终端小程序 SDK，简单集成后即可在 iPhone，Android，Windows，Linux，macOS 平台下的应用中运行你的小程序。

4.原生的小程序也可以运行在finclip平台，很赞！

结语

期待finclip给我们带来更多的体验