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