2.0 升级常见问题
代码兼容性检查
1、find 系列接口 已废弃,请使用 findAsync 等接口代替, 示例如下:
ts
const adapt_findAll = async (node: any, cb?: (node: any) => boolean) => {
if (pixso.apiVersion === "1.0.0") {
return node.findAll(cb);
} else {
return (await (node as any).findAllAsync()).filter(cb);
}
};2、2.0 插件 iframe 改为 null origin iframe ,从 UI 向插件代码传递数据时,需要显示指定 parentOrigin 为 *
ts
window.parent.postMessage({ pluginMessage: "这是一条消息" }, "*");3、升级 @pixso/plugin-cli 到 1.0.8 及以上版本 (错误事例(提示调试的插件内容缺失))
bash
npm install @pixso/plugin-cli@latest -D4、localStorage 等 Web API 在 null origin iframe 中不可用,请使用 pixso.clientStorage 代替,如果是第三方库使用的 localStorage,可使用以下兼容方案
ts
// ui.html
<!DOCTYPE html>
<html>
<head>
<title>plugin</title>
<script>
// localStorage polyfill - 必须在所有其他脚本之前执行
// 在 data: URLs 或 document.write 注入的页面中,localStorage 会抛出 SecurityError
(function() {
let needsPolyfill = false;
try {
localStorage.getItem('test');
} catch (e) {
needsPolyfill = true;
}
if (needsPolyfill) {
const memoryStorage = {};
Object.defineProperty(window, 'localStorage', {
value: {
getItem: function(key) {
return memoryStorage[key] || null;
},
setItem: function(key, value) {
memoryStorage[key] = String(value);
},
removeItem: function(key) {
delete memoryStorage[key];
},
clear: function() {
for (const key in memoryStorage) {
delete memoryStorage[key];
}
},
key: function(index) {
const keys = Object.keys(memoryStorage);
return keys[index] || null;
},
get length() {
return Object.keys(memoryStorage).length;
}
},
writable: true,
configurable: true
});
}
})();
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>其他问题
1、mainfest 中的 host 配置已废弃
ts
// 旧配置,已不支持
"main": {
"sandbox": "dist/main.js",
"host": "dist/host.js"
}
// 新配置
"main": "dist/main.js"