在 Soui 中嵌入 MiniBlink 初体验(一)：支持百度 ECharts 开源可视化库显示

一、引言

最近在工作中遇到了这么一个需求：

产品想要让我们的桌面客户端中显示复杂的图表，类似下图所示的样子（图片来自网络），不排除后期会增加更多复杂图标的可能性，因此我们需要考虑如何实现这种需求，并能够支持其需求的扩展性

那么，看到这个需求，我脑海里进行了一系列的思考：

1. 我们能不能使用 SOUI 原生界面来制作？

答案是肯定的。至少在我现有的实力和时间精力来说，这是不可行的。

2. 那么，我们能不能考虑嵌入浏览器，然后使用 Web 技术完成呢？

通过同事的建议，我找到了百度的开源可视化库 ECharts。看了下文档，觉得这个库做的非常的好，而且稳定更新了很多版本了，非常适合使用 Web 技术跨平台的需求。因此，我选择了它。

3. 那么，在我们现在使用的 Soui 框架中，我们选择什么技术嵌入浏览器呢？

在我接触 Soui 的过程中，一共接触了 3 种嵌入浏览器的方法，分别是 wke 、cef 和这篇博客使用的 miniblink 方式。wke 因为比较老了，对于 H5 的支持并不好，有些需求就无法满足了（这是 SOUI 官方 Demo 中自带的嵌入浏览器的方式）；cef，嵌入浏览器的学习门槛较高，要熟练使用还需要很多时间去探索（关于 cef 我有专门探索过一段时间，在这里因为项目的特殊性，不能使用 cef）；最后，选择了国人一位高人开发的 miniblink。

MiniBlink 是一个全新的、追求极致小巧的浏览器内核项目（厚颜无耻的使用了作者的话 ）。其兼容了 wke 的接口，自己实现了渲染层，并集成了 node，是基于 blink 内核的。本人对于 MiniBlink 还并不了解，此处只是作为一个使用者来看待它的。

上述提到的技术的相关链接如下：
想要了解 wke 请点击这里
想要了解 Soui 请点击这里
想要了解 MiniBlink 请点击这里
想要了解 Cef 请点击这里

这一篇博客中借鉴了 Soui 群里的一位大神的 SouiAndMb 代码，想要获取的同学可以去 Soui 群里下载，群号为 229313785。

想要获取这篇博客中使用到的实验代码，请看这里：
wangying2016/ECharts-In-Soui

二、咦？wke 居然不能完全支持 ECharts！

为了偷懒，当然是尽量能少写代码就少写代码咯：）

因此，我这里直接使用了 Soui 官方 Demo 中的那个默认使用了 wke 内核的嵌入浏览器。现在我们使用嵌入浏览器来打开百度 ECharts 的官方示例。

结果是非常尴尬的 T_T

比如说：

这是 Soui 使用 wke 内核显示的 ECharts 饼图

而这是 Chrome 中显示正常的 ECharts 饼图

但 wke 也不是什么都不能显示出来，比如说折线图还是可以 Hold 住的：

这是 Soui 使用 wke 内核显示的 ECharts 线图

而这是 Chrome 中显示正常的 ECharts 线图

可见，对于 wke 来说，ECharts 有些是显示不出来的，那么这是为什么呢？

因为 wke 太老了，很多 H5 的特性都没能支持，而 Chrome 是支持 H5 最好的浏览器。

也就是说，ECharts 在显示某些图表的时候，使用到了 H5 的新特性，导致我们比较老的 wke 内核无法支持其显示。

那，接下来我们肯定就要寻找一款能够支持 H5 的嵌入浏览器内核了。

注：这一块的探索代码在 ECharts In Soui 解决方案中的 ECharts In Soui with Wke，很明显最后的结果是失败的。

三、在 Soui 中嵌入 MiniBlink

通过网友推荐，我接触到了 MiniBlink 这一个强大的国人开发的库。其轻巧、对于 H5 的良好支持给我留下了深刻的印象。

此处，正好 Soui 群里有位前辈研究过 Soui 中嵌入 MiniBlink 的方法。这里我直接下载了他的包进行了研究。

这里，我从使用 Soui 向导创建一个 Soui 新项目开始，手把手总结如何在 Soui 中嵌入 MiniBlink 浏览器：

1. 新建一个 Soui 项目，此处我命名为了 ECharts In Soui with MiniBlink。
此时，我们的Soui 项目是空的，运行出来只是一个简单的窗口而已，我们要达到显示 ECharts 的目标，还需要编写一个封装了 MiniBlink 的浏览器控件。

2. 编写封装了 MiniBlink 的浏览器控件。
a. 在项目目录下创建一个 controls 文件夹，用来放置我们的 SMiniBlink 浏览器控件。
b. 这里，我直接参考了 Soui 群里前辈封装的 SMiniBlink 代码（想要获取的同学，可以直接查看我在 GitHub 上托管的项目，或者进入 Soui 群下载 SouiAndMb 文件即可）
c. 注意，SMiniBlink.h 需要包含一个 wkedefine.h 的头文件，这是 MiniBlink 自带的头文件，我们需要包含进去。在项目目录下创建一个 miniblink 文件夹，将 wkedefine.h 放置进去。同时，修改 SMiniBlink.h 中包含 wkedefine.h 的目录为 ../miniblink/wkedefine.h。建立好的文件目录结构如下：

d. 为了使我们的控件可以使用，我们还需要进行控件的注册：打开 ECharts In Soui with MiniBlink.cpp 文件，将

SWkeLoader wkeLoader;
theApp->RegisterWindowClass<SWkeWebkit>();

注册代码加入到 Run Application 之前。同时，为了让其能访问到 SWkeLoader 这个类（定义在 SMiniBlink 中，控制浏览器控件的生命周期），我们还需要包含我们的浏览器控件类

#include "controls/SMiniBlink.h"

3. 至此，我们已经可以通过编译了。但是，MiniBlink 使用到了 node.dll 动态链接库，如果程序访问不到这个文件，就会报错。因此，我们还需要拷贝 node.dll 到当前的编译目录（解决方案目录下的 Debug 文件夹中）。

4. 编写 xml 代码使用我们定义的浏览器控件：完成了这步，运行代码你就可以看到一个百度搜索界面了，我们进去搜索 ECharts 打开示例代码，就能看到 ECharts 的显示了

<wkeWebkit pos="0,0,-0,-0" url="http://www.baidu.com/" name="wke_test"/>

如图，这就是我们 Soui 使用了 MiniBlink 显示出来的 ECharts 饼状图效果：

嘿嘿，至此，我们就完成了一个支持百度 ECharts 浏览器的嵌入啦：）

四、总结

到目前为止，我完成了 Soui 中嵌入 MiniBlink 的任务，却留下了很遗憾的一个问题未能解决，那就是：

当我在本地编写 Html 文件，调用 ECharts 库想要进行图表的显示时。通过 Soui 中的 MiniBlink 浏览器控件来打开界面，会发现 ECharts 的渲染失败；但是直接点击 Html 文件通过 Chrome 浏览器打开，就可以看到 ECharts 的渲染效果。

这是项目 ECharts In Soui with Miniblink 中打开本地的 Html 文件试图显示 ECharts 的结果：

这是使用 Chrome 直接打开 Html 文件的效果：

可见啊，本地仿佛就没有自动去拉取 ECharts 的 js 库一样，直接忽略了后面的柱形图表的显示，而后者加载出来了。

不管怎么样，尽管打开本地 Html 网页显示 ECharts 还需要继续调研，但是通过访问网页显示 ECharts 还是没有问题的（这是当然的咯，MiniBlink 支持 H5 嘛 T_T）

探索总是有益处的，比如说这次去探索了下 MiniBlink 在 Soui 中的嵌入，认识到了这个小巧的库能够带来的喜悦感。

最后，感谢 Soui 和 MiniBlink 的作者和大神们，这是一次愉快的探索过程。

To be Stronger ：）

ps: 想要获取本篇博客的实验代码的同学，可以看看这里（尽管没有解决本地 Html 加载显示 ECharts 的问题 T_T 如果你有什么线索，一定要提供给我，在此谢谢了哈~~~）
wangying2016/ECharts-In-Soui