能力介绍

waft应用/卡片支持相互嵌套，其使用方式类似web的iframe方式。waft也提供了iframe组件，在当前的页面中嵌套其他卡片或全屏应用。
image.png

iframe组件使用

属性 值 描述
width rpx/px 宽度
height rpx/px 高度
srcdoc render指令协议 waft容器接受的render指令协议
src url地址 http/https协议或waft://协议

srcdoc方式

srcdoc是通过拼接原始的render指令协议来加载一个waft应用的方式，示例：

  1. <div class="wrapper">
  2.   <iframe class="my-iframe" srcdoc="{{srcdoc}}"/>  
  3. <div>
  1. export class Index extends Page {
  2.   constructor(props: Props){
  3.     super(props);
  4.     const obj = new JSONObject();
  5.     const srcdoc = `
  6.       {
  7.         "path":"pages/index/index",
  8.         "iaId": 100,
  9.         "query":{},
  10.         "context":{},
  11.         "id":"my_card",
  12.         "title":"hello world",
  13.         "bundle":"https://ailabs-iot.aligenie.com/waft-test/iframe/test_hello.wasm",
  14.         "dataSource":{},
  15.         "md5":"e303146e5339cc07837be7232a9a7ba0"
  16.        }
  17.     `;
  18.     obj.set("srcdoc", srcdoc);
  19.     this.setState(obj);
  20.   }
  21. }

src方式

iframe的src模式，waft将通过包管理机制从云端获取包信息后加载。
待对外开放，敬请期待。