更新时间：2023-06-12 GMT+08:00
工作流如何与页面交互
工作流中一个重要的内容就是用户任务，而用户任务所有的交互都是通过页面实现的。在工作流中，使用页面与普通的页面开发有一定的区别。本节将要讲解的内容需要用户有一定的页面开发基础，如果没有相关的背景知识，可以先从 标准页面 和 高级页面开始学习。
图1 工作流与页面交互
工作流与页面的交互模式采用了业界“依赖反转”的设计模式。一般情况下，页面之间的跳转应该在页面的事件代码中定义，但在页面上是无法确定下一步应该做什么，因此，又需要依赖工作流进行页面的跳转，即“依赖反转”。这种做法的好处在于，可以复用页面而无需考虑页面的下一步是什么。
在标准页面中与工作流交互
在标准页面的自定义事件中，内置了一些交互的API：
- 获取变量：context.$工作流.loadVariables(): Promise
- 提交任务、流程： context.$工作流.submitTask(variables: {[key: string]: any}): Promise
- 修改变量： context.$工作流.putVariables(variables: {[key: string]: any}): Promise
图2 在标准页面的事件代码中与工作流交互
在标准表单中与工作流交互
标准表单是标准页面的一个简化子集，标准表单实际上是一个带内置了与工作流相关的动作等的页面母版，用户在使用标准表单时只需要关注表单的内容而不需要关注页面是如何交互的。但是也正因为表单内置了此类动作，其界面也相对固定，无法定制。
在高级页面中与工作流交互
在高级页面中也提供了类似的API，但由于高级页面使用了懒加载的方式，其API表达为闭包形式：
- 获取变量： $工作流(op => op.loadVariables(variables))
- 提交实例： $工作流(op => op.submitInstance(variables))
- 提交任务： $工作流(op => op.submitTask(variables))
- 更改变量： $工作流(op => op.putVariables(variables))
图3 在高级页面组件的事件中与工作流交互
另外，在高级页面的自定义组件的JS文件中，也可以通过以下代码即可触发名称为“test工作流”的工作流流程，并将“test1”作为“val”变量的值传到工作流流程中。
$工作流(op => op.submitInstance({
"name": "test工作流",
"variables":{
"val": "test1"
}
}))
父主题： 工作流
