回调返参使用
为了实现跨平台通用的插件机制,Fresns 采用「内联框架」为操作逻辑,让插件作为独立模块运行(或者独立部署运行),插件与插件之间使用「命令字」进行通讯,客户端使用回调返参来处理内联框架中的反馈,从而决定后续操作。
使用场景
- 在浏览器当前页面,以 Modal 方式弹出内联框架层
iframe
访问插件页面。 - 在浏览器新标签页(新窗口),访问插件页面。
- 在 App 里,以视图组件
WebView
访问插件页面。 - 在微信小程序,以容器组件
web-view
访问插件页面。
使用流程
- 第 1 步、客户端自定义命名对扩展操作进行埋点(API 中扩展插件的访问地址);
- 第 2 步、用户点击埋点按钮后,客户端实时处理 URL 路径中的变量名,替换为变量值;
- 第 3 步、用户在插件页进行相应操作,操作后插件凭
postMessageKey
标识参数,向父级发送 postMessage 消息; - 第 4 步、客户端接收插件页的
postMessage
消息并处理后续业务功能。
内置依赖
Fresns 主程序内置了 iFrame Resizer 扩展包。
/static/js/iframeResizer.min.js
/static/js/iframeResizer.contentWindow.min.js
postMessage 说明
插件页完成操作后,会通过 postMessage
通讯向客户端返回如下 Object 格式的数据,客户端凭定义的 postMessageKey
标识名定位后续业务功能。
json
{
"code": 0, // 处理状态,0 表示成功,其余为失败状态码
"message": "ok", // 失败时的提示信息
"action": {
"postMessageKey": "fresnsEditorUpload", // 路径中 postMessageKey 变量值
"windowClose": true, // 是否关闭窗口或弹出层(modal)
"reloadData": false, // 是否重载数据
"redirectUrl": "" // 是否重定向新页面
},
"data": {
// 如果功能同 API 一样,则返回与 API 一致的数据格式
// 例如上传文件,返回内容同 /api/v2/common/upload-file data 一致
}
}