本文将通过具体的 Widget 操作示例，帮助您快速掌握 Widget 的使用方式。
Widget 本质上是一种特殊类型的页面。拥有自身独立的 Scope，在页面中，通过 Widget 渲染器可以将 Widget 应用在页面中，实现独立的逻辑闭环，提升应用搭建和维护的效率。
一、创建 Widget
在“页面&布局&Widget”面板，可以创建 Widget。创建后设计器将默认进入 Widget 编辑模式，搭建新创建的 Widget。在 Widget 列表，可以重命名、克隆、删除 Widget。
二、Widget 组件与代码
在 Widget 编辑模式，您可以向 Widget 内添加组件与代码，相关能力与页面保持一致。
作用域：Widget 内的元素可互相访问，并可直接访问全局 Scope 元素。但不能直接访问其他 Widget 及其页面元素。
容器布局：在 Widget 内，所有容器默认为“弹性布局”，网格布局在 Widget 内不适用。
三、入参与模拟参数
入参是 Widget 接收外部数据的方式，接收到的入参可在 Widget 内的组件、代码以及事件（挂载、卸载前）等模块上消费。
模拟入参：为了方便 Widget 搭建，适配不同的入参形式，基于入参的类型定义，可设置模拟入参。模拟入参仅用于 Widget 编辑模式，不是入参的默认值。
Widget 内入参为只读状态，可直接消费，下图为 Text 组件渲染了入参。
在修改了入参变量后，Widget 内对入参的引用需要同步更新。
模拟入参仅用于 Widget 编辑模式，不是入参的默认值。
四、事件
下表列举了 Widget 渲染生命周期内所透出的事件。您可以监听合适的事件设置回调响应，以实现 Widget 的渲染逻辑。
事件名称 | 事件描述 |
挂载（mounted） | 在 Widget 加载完成时触发，可以⽤来初始化数据或设置状态。 |
卸载前（willUnmount） | 在 Widget 卸载前触发 |
五、事件声明
事件声明用于 Widget 定义向外部通信的消息格式。在定义一个事件声明后，Widget 需要在合适的逻辑中触发该事件声明，在页面中的 Widget 渲染器中，将接收到该事件，举例说明：
1、在 Widget 内声明了“付款”事件，事件 ID 为“pay”。
定义“付款”事件所传递的参数类型为“string”，代表要付款的商品 ID。
2、对付款按钮，增加点击事件，触发“付款”事件，并将 id（作为参数传入的）作为事件参数传出。
在这个例子中，也可以使用脚本触发事件：mobi.sendEvent('pay', id);
3、在 Widget 渲染器中，绑定并渲染 widget1，并传递参数，{ "id": "666" }，增加对“付款”事件的回调响应
在 Widget 的事件回调相应中，使用“eventParams”可以拿到事件传参。
六、画布预览宽度
在 Widget 编辑模式，可以调整画布预览宽度，模拟 Widget 在实际渲染时的宽度值，方便搭建还原。
