为了满足在uniapp上也能进行webview的流程页面操作与显示，需要对流程页面，特别是record/index.vue进行修改与适配。
一、对各个内容的宽带进行调整
主要是样式的调整
<el-col :span="16" :offset="4" 都修改成<el-col :span="24" :offset="2"
对于审批等操作的弹出的对话框里的宽度也要进行调整进行调整
style="width: 85%" 主要是宽度样式进行调整
同时对流程显示的图要能支持水平滚动，所以样式要做调整
.el-loading-mask {//设置流程图上面的一层屏蔽层，否则影响其它窗口操作 background-color: initial; z-index: 200; position:relative; //支持相对 overflow:auto; //支持滚动 }
二、对返回操作进行修改
因为要适配app，h5与微信小程序，所以需要知道当前是在哪个平台上进行操作，所以需要uniapp进行平台参数的传递。
同时要引起微信与uni，
import wx from 'weixin-js-sdk' import * as uni from "@dcloudio/uni-webview-js"
这边接收到后进行分别处理，代码如下：
/** 返回页面 */ goBack() { // 关闭当前标签页并返回上个页面 //this.$store.dispatch("tagsView/delView", this.$route); // 关闭当前标签页并返回上个页面 console.log("goBack types=",this.types); console.log("goBack platform=",this.platform); if(this.platform === "weixin") { setTimeout(() => { if (this.types == 999) { console.log(23232); /*wx.miniProgram.navigateTo({ url: "/pages/toDoProcess/toDoProcess" });*/ wx.miniProgram.navigateBack(); } else if (this.types == 888) { /*wx.miniProgram.navigateTo({ url: "/pages/toDoProcess/newProcess" });*/ wx.miniProgram.navigateBack(); } else { wx.miniProgram.navigateBack(); //window.close(); } }, 500); } else if (this.platform === "app") { setTimeout(() => { if (this.types == 999) { console.log(23232); // uni.redirectTo({ // url: "/pages/toDoProcess/toDoProcess" // }); uni.navigateBack({ delta: 1 }); } else if (this.types == 888) { //uni.redirectTo({ // url: "/pages/toDoProcess/newProcess" //}); uni.navigateBack({ delta: 1 }); } else { uni.navigateBack({ delta: 1 }); //window.close(); } }, 500); } else if (this.platform === "h5") { this.$router.go(-1); } else { this.$router.go(-1); } //this.$router.go(-1) },
三、当然目前还剩下一个二次登录问题，因为通过webview进行访问，后续再进行解决
四、效果图
流程图也可以拖动进行查看
