组件概要

什么是组件

组件是组成页面的基本单元。页面是大量组件的有机组合,像一颗倒立的树,俗称组件树。组件树最底端的组件叫根节点。每个组件都会分配一个组件ID来唯一定位该组件,当组件在组件树里的位置发生变化时它的ID也会相应变化。

同步展示

在众触编辑器的预览区中,通过右键可选中任一叶子组件,左侧的组件树会找到对应的叶子组件并把所有父组件都展开,也可以看到兄弟组件;同时它与所有祖宗组件构成一条组件路径展示在上方;右侧的属性面板也会展示该组件的属性,属性面板是编辑组件最主要的区域。
点击样式面板可以看到只作用于此组件的样式,特别地,这些样式是通过组件ID作用于组件元素;点击CSS面板可以看到此组件用到的CSS,不展示对组件无影响的CSS,如果是根节点,将展示此页面的所有内部CSS

遍历组件

可以通过父子关系/兄弟关系遍历所有页面中用到的组件。在组件树中通过组件左侧的+/-展开/收起子组件,也可以通过其上方的搜索框输入类名/ID找到相关组件;在组件路径中可以点击任一节点直达祖宗组件;在属性面板中有个父组件图标可选中父节点,还有在其子组件区选择子节点

移动组件

在组件树中可以直接拖拽一个组件到合适的位置;在属性面板的子组件区可以对子组件排序,还可以用下方的按钮来复制/拆包/删除组件。顾名思义,拆包就是拆除包裹,移除该组件而保留它的子组件。

添加组件

最左侧有个组件面板,里面分类罗列了各种组件。把鼠标移到(hover)其中一个组件上就会出现///的按钮组,点击其中一个按钮就会把该组件添加到当前选中组件的对应位置上。/表示的是兄弟组件;表示作为子组件添加到组件内部,如果该组件不允许有子组件则不显示此按钮;表示作为父组件把当前组件包裹起来。
也可以从属性面板的“添加组件”下拉框中给当前组件快速添加常用组件。
另外还可以从资源面板中选择一个资源快速添加已上传的图片/视频组件。

跨页/跨应用复制组件

在顶部工具栏中有一对复制粘贴按钮,可以把其它页面甚至其它应用中的一个/块组件复制进剪贴板然后粘贴到当前组件下;在组件面板的剪贴板栏里有新近复制进剪贴板组件块,可以选择其中一个添加到当前组件的前/后/内位置。这些复制的组件块除了它们各自的样式外还包括原来页面上能影响到它们的页面内部CSS,当然外部CSS就不包含在里面了。

绑定事件

在属性面板可以给组件绑定多个/多种事件,每个事件是并行执行的。比如页面onReady时想多次调用数据库API,可以把有前后依赖关系的API按照依赖关系放在同一个onReady里,没有依赖关系的API放到另一个onReady里。
通常可以用$event来取得事件对象,用$el来取得触发事件的元素element,即$event.currentTarget。

onRequest:后端收到用户请求新页面的元数据时发生。此时只适合准备数据组件要用到的数据源,因为这些数据会参与服务器端渲染,将对快速呈现动态页面和SEO有利。除此之外的工作都不应该放在此处。
onInit:新页面初始化时发生,此时已经取得新页面的元数据,但还没开始渲染。
onReady:新页面根据元数据首次渲染就绪后发生,此时是进一步获取数据库数据/加载外部资源的最佳时机。

组件颗粒度

众触组件可大可小,灵活多变。小的覆盖了基础html元素,比如导入一个第三方页面,html元素可以一一对应完美复原;大一点的可以覆盖某个功能,比如上传/扫码支付;甚至可大到一个页面只需用一个组件/插件即可完成,比如登录插件/数据库管理插件。

Make in ZC APP Platform