背景需求：在小程序中渲染activiti流程图，并在流程图中点击某个节点时跳转小程序中对应的页面。

    小程序框架：uniapp

接到这个需求时，分解为了几步：

1.调研：bpmn、gojs等已有框架能否在小程序端实现?

——fail：生成流程图的web端需要对应使用同一套框架，而web端采用的还是activiti自带的配置页面，且没有需求要修改web端实现。

2.调研：小程序能否兼容svg且实现点击事件效果？

——fail：虽然目前小程序使用cax组件已可以支持svg渲染，但由于我们的项目使用的是uniapp，在使用小程序组件时不兼容。具体问题在这个issue下提及： 如何不使用小程序组建的形式在小程序中使用，我想在uniapp中使用应该怎么做？ · Issue #81 · dntzhang/cax · GitHub

3.调研：有无uniapp的组件能实现svg点击效果且兼容微信小程序？

——fail：无。

4.调研：echarts能否实现该需求？

——fail：

示例如：ECharts Gallery - 画一个流程图 (makeapie.com)

刚开始调研时发现此流程图虽然丑了一点，但还是可以勉强实现该需求。然后开始着手开发，开发中遇到一个无法解决的问题：uniapp插件市场中的mpvue-echarts，并不是echarts。该散点图的数据较为复杂，在mpvue-echarts中实现时出现报错且无法解决。而该数据格式在echarts中实现是可以渲染的。

5.调研：在h5中实现该需求？

——OK，需要H5支持获取到svg中节点id并能跳转至小程序中

具体实现步骤，以Vue项目为例：

（一 ）html代码部分：

html部分，用一个容器存放svg

（二）script代码部分：

1 在原有svg基础上增加个性化显示属性

对节点进行个性化样式处理及渲染至页面中

2 为svg节点增加点击事件效果

提前注册handleClick事件到window上:

注册点击事件

handleClick事件通过wx.miniProgram.navigateTo方法，从当前H5页面跳转至该节点绑定的小程序页面中；

跳转小程序

3 为svg中的子节点绑定事件

刚开始我是使用以下代码为节点绑定事件，在测试阶段是可以运行的。

let btnTakePhotoDom =document.getElementById(`svg-${ id }`);

const code = shape.properties.overrideid

btnTakePhotoDom.setAttribute("v-on:click", `this.handleClick('${ code }')`);

但项目后期产品用ios手机验证时，发现svg无法在其设备上展示。在safari浏览器上调试时，报错：undefined没有找到setAttribute函数；

排查了一上午，解决safari兼容问题，最终解决：

拿到svg的字符串后，先渲染至页面中 =》 为要绑定事件的子节点增加标识id及绑定事件 =》 dom监听点击事件判断id触发对应的事件

渲染至页面中 为svg子节点增加标识符及增加点击事件监听 全局监听点击事件

最终实现效果

web端流程图显示效果（activiti原生效果） 小程序中流程图显示效果--且可以跳转至对应的页面中