uniapp开发app进行流程图的预览本文使用的是logicflow 把需要的css和js下载下来 webview155

由于vue的解析库在app不支持需要使用webview

本文使用的是logicflow

docs.logic-flow.cn/docs/#/zh/

把需要的css和js下载下来

webview155.js 对应下面的链接为了使用uni的跳转方法

<script type="text/javascript" src="https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js"></script>

lflow.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>流程图预览</title>
    <script src="./vue.min.js"></script>
    <link rel="stylesheet" href="./lflow.css" />
    <!--LogicFlow core包css-->
    <link rel="stylesheet" href="./flowcore.css" />
    <!--LogicFlow core包js-->
    <script src="./logic-flow.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <div id="back">返回</div>
  </body>
  <script src="./webview155.js"></script>
  <script>
    document.querySelector("#back").addEventListener("click", () => {
      uni.navigateBack({
        delta: 1,
      });
    });
  </script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {};
      },
      watch: {},
      created() {
        const lf = new LogicFlow({
          container: document.querySelector("#app"),
          grid: true,
        });
        // console.log(location.search.split("=")[1]);
        let info = location.search.split("=")[1];
        console.log();
        let xxx = decodeURI(info);
        // console.log(JSON.parse(info));
        lf.render(JSON.parse(xxx));
        // lf.render({
        //   nodes: [
        //     {
        //       id: "1",
        //       type: "rect",
        //       x: 100,
        //       y: 100,
        //       text: "节点1",
        //     },
        //     {
        //       id: "2",
        //       type: "circle",
        //       x: 300,
        //       y: 200,
        //       text: "节点2",
        //     },
        //     {
        //       id: "3",
        //       type: "circle",
        //       x: 500,
        //       y: 700,
        //       text: "节点3",
        //     },
        //   ],
        //   edges: [
        //     {
        //       sourceNodeId: "1",
        //       targetNodeId: "2",
        //       type: "polyline",
        //       text: "连线",
        //     },
        //     {
        //       sourceNodeId: "2",
        //       targetNodeId: "3",
        //       type: "polyline",
        //       text: "连线",
        //     },
        //   ],
        // });
      },
      methods: {},
    });
  </script>
</html>

lflow.css

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: scroll;
}

#app {
  margin-top: 50px;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
}

.lf-graph {
  overflow: scroll;
}

#back {
  position: fixed;
  z-index: 1000000000;
  bottom: 20px;
  right: 40px;
  width: 140px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 25px;
  border: 2px solid black;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

uniapp的使用

点击按钮执行事件
showLflow() {
    let jsonstr = JSON.stringify({
        nodes: [{
                id: "1",
                type: "rect",
                x: 100,
                y: 100,
                text: "节点1",
            },
            {
                id: "2",
                type: "circle",
                x: 300,
                y: 200,
                text: "节点2",
            },
            {
                id: "3",
                type: "circle",
                x: 500,
                y: 700,
                text: "节点3",
            },
        ],
        edges: [{
            sourceNodeId: "1",
            targetNodeId: "2",
            type: "polyline",
            text: "连线",
        }],
    })

    uni.navigateTo({
        url: `/pages/AI/logicFlow?info=${jsonstr}`,
    });
},

页面
<template>
	<view style="width: 100%;height: 100%;">
		<web-view :src="src" :update-title="false"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: ''
			}
		},
		methods: {},

		onLoad(option) {
			console.log(option.info);
			let xxx = JSON.parse(option.info)
			this.src = `/hybrid/html/logicflow/lflow.html?info=${ encodeURI(option.info) }`
		}
	}
</script>

<style>

</style>