当前位置：首页 > news >正文

低代码开发平台：飞帆制作网页并集成到自己的网页中

news 来源：原创 2025/6/22 16:07:12

应用场景：

有时，我们的网页使用了某个模版，或者自己写的 html、css、javascript 代码。只是网页中的一部分使用飞帆来制作。这样的混合网页如何实现呢？

其实很容易，来体验一下飞帆提供的功能！

还记得这个网页吗？用飞帆来画 echarts 图：

https://fvi.cn/711

查看这个网页的源代码：

只有 39 行代码。

将这个代码只修改 vue.min.js 和 fvi.js 的地址，前缀加上 http://fvi.cn

进入可复制、运行代码：

https://andi.cn/page/622109.html

就是说，飞帆中网页源代码给我们启示了。我们只需要照葫芦画瓢，就能将飞帆制作的网页作为一部分集成到我们的网页中。

上面的 39 行代码，我们来梳理一下过程：

引入 vue.min.js 和 fvi.js 两个 js 库；
构建一个 Vue 的实现，包括 <div id="app">，new Vue，大家会使用 Vue2 的话，对这个就很熟悉了。不会用 Vue2 也没关系，咱参考代码照葫芦画瓢；
定义一个组件 components，代码中为 'fvi-div': fvi.div，前面的名称大家随意，后面为 fvi.div 就行，比如可以是：'xyz': fvi.div 这样；
在 data 中定义 elements；
在网页 html 元素中加入 <fvi-div></fvi-div> 或者是 <xyz></xyz> 根据第 3 步取的名称；
传入 elements 元素，像 :elements="elements" 这样；
在 created 函数中，加载飞帆网页：fvi.load(this.elements, 711) 这样。

如果用飞帆制作了多个网页，将这多个网页作为一部分集成到自己网页中如何实现？

同样很容易，比如下面这两个用飞帆制作的网页：

https://fvi.cn/717

https://fvi.cn/711

我们首先给出代码，进入后可复制、运行代码：

https://andi.cn/page/622110.html

只需要修改这几个地方：

将 data 中的 elements: [] 修改为 elements: {711: [], 717: []}，你要集成哪几个飞帆的网页就写几个，多写也行，但没必要浪费；
在 created 函数中，加载飞帆网页由 fvi.load(this.elements, 711) 修改成 fvi.load(this.elements) 这样，反而更简单了，不用传第 2 个参数，因为 elements 中已经带了需要加载的网页的编号；
在 html 中不再是传入 :elements="elements" 而是更具体的 :elements="elements[711]" 即指定是哪个网页。

注意代码中，可以定义 <fvi-div> 的 style，实际上，此时飞帆的网页会作为一个 div 嵌入到你的网页中，所以将 <fvi-div> 作为 <div> 来使用。如果你知道怎么查看网页的元素，实际上它就是渲染成了一个 <div> 标签。