代码模式提供了一种更高级的方式来满足更复杂的交互场景的需求。

打开新建工程中santa/pages目录下的.santa文件,进入可视化搭建。

单击操作面板中的代码模式图标,即可在页面右侧出现代码区域。
代码模式

可视化搭建使用DSL描述语言作为中间层的代码,基于该DSL进行可视化与代码模式的互转。可以简单地将DSL看作简化版的React,语法与React基本一致。

DSL将一个组件使用标签进行描述,标签的属性即组件的Props属性。属性值支持简单的数据类型,例如STRING或NUMBER。属性值也支持表达式,您可以直接输入state.xxx来获取全局数据流中的数据。

代码模式具有以下特点:

  • 在可视化视图中进行的拖拽、组件属性配置等操作,会实时更新至代码。
  • 代码中的修改会实时更新至可视化区域。
  • 在可视化视图中进行的拖拽、组件属性配置等操作,与代码模式的修改可以互相转换。