本文正在参与#稀土掘金×凡泰极客小程序体验有奖征文活动#，走进FinClip，轻松实现小程序产品梦。活动指路👉juejin.cn/post/709941…
早在几个月前，我便开始关注到了FinClip ，并在我的解锁FinClip上开发图表新姿势一文中介绍了FinClip的使用体验。
在六月初，FinClip又发布了2.0重磅升级，宣称：其 提供了在物联网设备中运行小程序的全面支持，小程序不仅可以运行在手机，电脑等终端设备中，也可以运行在智能电视，车载系统之中。
你以为这就完了？坐下！这些都是基操！FinClip还支持小程序反向生成App，What？就离谱！
看完让我大受震惊，不禁感叹技术更新迭代之快！但作为一名合格的前端人，终身学习才是硬道理，下面带大家开始FinClip的学习之道，完成一个简单炫酷的FinClip图表开发！
1 开发流程
1.1 注册成为开发者
用户到FinClip官网完成注册，只需要简单的手机接收验证码即可完成注册流程
1.2 创建App应用
用户在FinClip小程序开放平台中完成App的创建
1.3 下载FIDE
FIDE开发者工具：FinClip 小程序开发者工具，可用来完成从小程序设计，调试直至预览和上传的一系列操作
1.4 新建应用
- 打开FIDE工具，并且用注册的账户完成登陆操作
- 新建应用
1.5 熟悉 FinClip 开发界面
如图，FinClip代码编辑器和微信旗下的小程序开发者工具十分相似，不仅如此，代码的结构和风格都完全遵循主流小程序的设计理念，这也极大减少了新用户的上手难度。
主要的文件：
- index.fxml：前端html代码页面
- index.js：前端js的逻辑交互
- index.ftss：前端css （值得注意的是，样式不能类似sass/less一样嵌套，如果嵌套可以正常编译，但不会生效）
1.6 编写index.fxml代码
<!--index.fxml-->
<view class="charts">
<canvas canvas-id="afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL" id="afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL" type="2d" class="charts" bindtouchend="tap"/>
</view>
1.7 编写index.ftss样式
/*index.ftss*/
.charts {
width: 750rpx;
height: 500rpx;
}
由于canvas绘制需要大小，所以给父容器设定宽高
1.8 引入uCharts.js
- 下载uCharts
- 引入对应包
在app.js根目录下新建一个js_sdk文件夹，并且引入官网u-chart.js插件
1.9 编写index.js样式
- 引入插件并且声明对象
import uCharts from '../../js_sdk/u-charts.js';
var uChartsInstance = {};
该部分代码在index.js的Page函数上方引入
- Page函数代码
Page({
data: {
cWidth: 750,
cHeight: 500,
pixelRatio: 2,
},
onReady() {
//这里的第一个 750 对应 css .charts 的 width
const cWidth = 750 / 750 * ft.getSystemInfoSync().windowWidth;
//这里的 500 对应 css .charts 的 height
const cHeight = 500 / 750 * ft.getSystemInfoSync().windowWidth;
const pixelRatio = ft.getSystemInfoSync().pixelRatio;
this.setData({ cWidth, cHeight, pixelRatio });
this.getServerData();
},
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2016","2017","2018","2019","2020","2021"],
series: [
{
name: "目标值",
data: [35,36,31,33,13,34]
},
{
name: "完成量",
data: [18,27,21,24,6,28]
}
]
};
this.drawCharts('afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL', res);
}, 500);
},
drawCharts(id,data){
const query = ft.createSelectorQuery().in(this);
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = res[0].width * this.data.pixelRatio;
canvas.height = res[0].height * this.data.pixelRatio;
uChartsInstance[id]=new uCharts({
animation: true,
background: "#FFFFFF",
canvas2d: true,
categories: data.categories,
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
context: ctx,
extra: {
column: {
type: "group",
width: 30,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
},
height: this.data.cHeight * this.data.pixelRatio,
legend: {},
padding: [15,15,0,5],
pixelRatio: this.data.pixelRatio,
series: data.series,
type: "column",
width: this.data.cWidth * this.data.pixelRatio,
xAxis: {
disableGrid: true
},
yAxis: {
data: [
{
min: 0
}
]
}
});
}else{
console.error("[uCharts]: 未获取到 context");
}
});
},
tap(e){
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
}
})
2 运行页面
2.1 多图表渲染
在原有的前端元素上面 新增一个同样的元素，但canvas的id和canvas-id不同
<view class="charts">
<canvas canvas-id="afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL" id="afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL" type="2d" class="charts" bindtouchend="tap"/>
</view>
<view class="charts">
<canvas canvas-id="afMCYQMEmXXVAjNQFJvvfxbLBHuxNEOL" id="afMCYQMEmXXVAjNQFJvvfxbLBHuxNEOL" type="2d" class="charts" bindtouchend="tap"/>
</view>
在js上写多一个新的渲染配置
drawChart2s(id,data){
const query = ft.createSelectorQuery().in(this);
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = res[0].width * this.data.pixelRatio;
canvas.height = res[0].height * this.data.pixelRatio;
uChartsInstance[id]=new uCharts({
animation: true,
background: "#FFFFFF",
canvas2d: true,
categories: data.categories,
color: ["#FAC858","#EE6666","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
context: ctx,
extra: {
column: {
type: "group",
width: 30,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
linearType: "custom",
seriesGap: 5,
linearOpacity: 0.5,
barBorderCircle: true,
customColor: [
"#FA7D8D",
"#EB88E2"
]
}
},
height: this.data.cHeight * this.data.pixelRatio,
legend: {},
padding: [15,15,0,5],
pixelRatio: this.data.pixelRatio,
series: data.series,
type: "column",
width: this.data.cWidth * this.data.pixelRatio,
xAxis: {
disableGrid: true
},
yAxis: {
data: [
{
min: 0
}
]
}
});
}else{
console.error("[uCharts]: 未获取到 context");
}
});
},
调用
this.drawChart2s('afMCYQMEmXXVAjNQFJvvfxbLBHuxNEOL', res);
最终显示效果
3 发布与审核
3.1 上传小程序
3.2 提交审核
- 在FinClip小程序开放平台中的左侧菜单中选中 小程序管理=》我的小程序
- 选中对应小程序，点击详情
- 在详情下方的审核版本中，选择新增审核
- 填写信息后提交
待审核成功后，即可发布。至此，你的小程序就已经完成了！！
4 功能反馈与建议
4.1 CSS提示
在ftss文件中编写CSS样式时，提示不够智能，例如：我想在某个样式中新增background背景色，但输入ba开头时，编译器自带的智能补全不够友好
由于CSS属性很多，普通开发者很难去全部都熟记于心，我认为官方有必要把这块完善，给开发者带来更佳的体验
4.2 编译BUG
在我补全上面的样式，并且Ctrl+S保存之后，编译器自动编译了一遍，然而编译后的文件却没有显示新增样式
此时，用户需要手动点击工具栏的编译，样式才会生效
我发现不仅是编写css有此问题，js、fxml上编写代码保存自动编译后也会偶尔有这样的问题，如此体验确实不友好，因为用户在保存后发现有编译日志里有提示重新编译的行为，以致于用户确信其的代码是有加入编译后的文件，然而功能却和想象中有所差异，此时就会误以为是自身的代码原因，如此一来就会白白花费大量的工作在排查上！
4.3 发布审核之慢
很早便提交了小程序版本的审核，然而次日后却依旧没有审核通过，不知道是不是因为休息日或者是个人小程序的原因，以至于审核速度很慢
4.4 FinClip管理小程序
官网资源下载中心下的凡泰助手（FinClip的App），其中一项号称：通过「管理小程序」查看账户下的所有小程序状态
起初觉得还是很方便，因为如果在外面，通过手机便能查看小程序的发布审核等状态，还是很便利的，于是便在手机下载了相应的软件，找到管理小程序中的相应小程序，打开详情后却发现：不知道是因为什么原因，能查看到的信息十分有限
连十分有必要的发布审核状态都没能查到，希望官方能加强完善这块的信息，争取给用户提供最大的便利
5 动手打造炫酷小程序
在uni-app平台，我便使用过uCharts图表插件完成了炫酷的可视化报表小程序开发
- 效果图
相信你看了效果之后肯定也会为之心动，既然如此，为何不自己打造一款属于自己的精美可视化小程序呢！
参考案例仓库：ReportPlus
希望大家可以根据仓库的案例，在FinClip下打造属于自己的一款可视化图表小程序，这样既能在学习到FinClip开发的同时，又能收获到可视化小程序的开发技能，简直一举两得！
