小模块基础用法
小模块的作用
小模块支持用户在iVX中零代码制造“轮子”。制作好的小模块，使用起来和普通的iVX组件方法一致，也具备属性、方法和事件三要素。小模块的制作方法和搭建一个普通的应用类似，我们可以将小模块理解为一个可以被嵌入在其他应用中，并可以独立更新的“子应用”。应用内小模块的制作与使用
小模块有两个创建入口，在组件栏“自定义”标签下，可以选择创建一个应用内小模块，或一个云端小模块。两者的创建流程类似，我们以创建应用小模块来举例：
点击“新建”按钮之后，我们进一步选择前端小模块，来创建一个前端小模块。小模块创建后，会在对象树中额外出现一个“小模块”根，当前应用中所有的小模块定义，都存放在这个小模块根下。
小模块根下可以有多个小模块容器，每个小模块容器下，放置一个小模块的定义。每个小模块可以理解为一个独立的“子应用”，相互之间没有关联，切换不同的小模块，可以对当前小模块的逻辑进行编辑。
每个小模块容器下，有三个默认的容器：公共数据，公共方法和自定义事件，这三个容器分别用来定义小模块的属性、方法和事件，我们在后续的章节中会详细说明。在这里，我们先向小模块中添加几个基础的组件：
如上图所示，我们在小模块中添加了一个行，一个文本和一个输入框，同时，将小模块的名称改为“输入小模块”。执行完以上操作之后，我们切换回到主项目前台根下，可以在组件栏“应用内小模块”下，找到我们刚刚制作的小模块，点击它，就可以将它添加至应用中了：
添加至应用中之后，输入小模块呈现为一个普通组件的样式，不能像小模块根下一样展开。和其他组件一样，一个应用中每个小模块可以添加多次：
接下来，我们回到小模块根下，对小模块的定义进行一点修改：
上图中，我们在姓名旁边添加了一个红色的星号。此时，如果切换回应用，我们会发现之前添加的三个小模块，全部都添加了星号：
这是由于我们在小模块根下，修改了小模块的定义，因此在当前应用中所有使用到该定义的小模块实例，也会一并修改。
这里，我们强调一下小模块系统中两个重要的概念：小模块定义和小模块实例。
- 小模块定义，对应小模块的“制作状态”，指的是我们在小模块根下添加的小模块内部内容，一个应用中，同一个小模块的定义只能有一份。
- 小模块实例，对应小模块的“使用状态”，指的是我们在应用中（前台或后台根下）添加的小模块组件，一个应用中，一个小模块定义可以对应多个小模块实例，当小模块定义修改时，所有小模块实例同步修改。
上传与下载云端小模块
在本地制作完小模块之后，可以将其上传至云端，上传至云端之后，可以在不同应用以及同企业的不同子账号之间共享小模块。
在“自定义”标签下的“云端小模块”目录下，可以看到所有自己或企业内其他子账号上传的小模块：
这些小模块，可以直接像普通组件一样，添加至应用中。注意，每次添加一个新的云端小模块，iVX编辑器实际上执行了以下几个步骤：
- 从云端下载小模块定义
- 将小模块定义添加至应用中
- 添加一个小模块实例
由于云端小模块下载之后，就成为了应用内小模块，因此，修改下载之后的云端小模块的定义，并不会影响到云端的小模块定义。如果需要同步修改云端小模块定义，则需要手动点击“更新云端小模块”。注意，针对企业用户，只有当前子账号创建的云端小模块，下载到本地之后，才会出现“更新云端小模块”按钮：
小模块的属性、方法和事件
小模块属性
小模块的属性，用于配置小模块内部的数据与行为。我们继续在上节输入框小模块的基础上，添加三个属性：“标题”，“内容”与“必填”：- “标题”即输入框左边的提示文本，我们希望用户可以使用小模块时自由的设置它的内容；
- “内容”即输入框的内容，它允许用户对输入框的内容进行预设，并在输入完成后，实时读取到用户输入的内容；
- “必填”即输入框是否允许为空，如果必填，就会显示红色的小星号，并在输入框失焦时，发现是如果内容为空，就报一个错。
当用户在小模块实例中设置这些属性的值的时候，等同于设置这些公共变量值。因此要在小模块定义中实现这些属性的功能，我们只需要将对应的功能与这些公共变量进行绑定或关联即可。
首先，我们来制作标题属性，标题属性唯一的作用是设置左侧文本的内容，因此，我们只需要将文本内容绑定“标题”这个公共变量：
绑定完成，我们在小模块实例中尝试一下填写标题属性为“年龄”，舞台上的显示就会对应变化了：
注意，上图中其他两个小模块的标题部分，从之前的“年龄”变成了空，原因是在添加小模块实例时，我们还没有定义“标题”这个属性，因此小模块实例中这个属性默认就是空的。如果我们希望小模块实例添加时，某个属性值不为空，那么可以在小模块定义中的对应公共变量里，填上一个初始值，比如，我们给“标题”变量填上一个值“邮箱”，那么新添加的小模块，标题就会默认显示为“邮箱”。但之前已经添加过的小模块，该属性并不会修改，因为初始值只是在添加小模块的时候生效，不会影响到已经存在的小模块实例。
以上，我们已经了解了小模块属性的大致工作原理，接下来我们来制作另外两个复杂一些的小模块属性。
首先是“必填”属性，这个属性除了影响到红色星号的显示，还会对用户的输入内容进行校验。我们先把红色星号的显示属性，绑定这个必填变量：
然后在输入框失焦时，根据必填属性的值，来判断是否进入校验逻辑：
最后，我们来制作内容属性。内容属性和标题属性不同，标题是一个单项属性，即小模块实例中，填写的“标题”属性内容，单向决定了左侧文本显示的值。因此，我们只需要做一个简单的绑定即可。但内容属性，是一个双向属性，即小模块实例中内容属性填写的值，会影响输入框的内容，同时，用户在输入框中输入的值，也会反向影响到内容属性的值。针对用户输入型的组件，比如输入框，下拉菜单，选择钮等等，等会存在类似的双向属性。
制作双向属性，我们除了需要将组件的属性与公共变量进行绑定以外，还需要在用户输入行为完成后，对小模块的属性进行手动更新：
如上图所示，在第1步中，将输入框的内容与“内容”公共变量进行了绑定，这一步和“标题”属性的处理一致，其作用就是当用户在小模块实例中修改“内容”属性时，输入框中显示的内容会随之改变。接下来，在第2步中，我们需要在输入框失焦时，将“内容”公共变量的值设置为用户输入的值，这样就完成了用户输入的内容对小模块属性的反向更新。
设置好之后，我们可以在小模块实例中验证一下这个功能：
以上，我们已经了解了各种小模块属性的制作方法，最后，为了一个属性更容易被用户理解，我们可以为公共变量添加备注，备注添加后，会自动在小模块实例的属性面板中出现小问号说明：
#### 小模块方法（动作）
小模块的方法，通过在“公共方法”对象容器下，添加动作组来实现。继续使用上面输入小模块的例子，我们可以将输入框的聚焦方法，抛出来作为小模块的方法。首先，在公共方法下添加一个动作组，命名为输入框聚焦:
动作组添加之后，小模块实例中，就可以选到“输入框聚焦”方法了：
接下来，我们来为这个方法添加实现。这个方法很简单，只需要在“输入框聚焦”动作组中，调用输入框的聚焦方法即可：
接下来，我们来为这个方法添加一个参数：是否选中，这个参数用来指定输入框聚焦时，是否将输入内容设置为选中状态。首先我们为动作组添加一个入参“是否选中”，然后在动作组中根据入参的值来判断调用的输入框方法。制作完成之后，就可以在小模块实例中调用这个方法，并指定入参了：
公共方法除了可以设置入参（接收参数），还可以设置返回参数。比如，在方法中调用了一个API，我们可以将API的返回结果作为公共方法的返回结果，这样，在小模块实例中调用这个公共方法时，就可以获取到它的返回结果了。
最后，和小模块的属性类似，为公共方法添加备注，可以帮助使用小模块实例的用户更好的理解这个方法的详情：
#### 小模块事件
## 和属性和方法类似，小模块的事件，通过在“自定义事件”容器下添加自定义事件组件来实现：
事件添加后，小模块实例的触发事件中，就可以选到这个事件了：
接下来，我们来实现这个事件的逻辑。这个“输入中”的事件，我们希望用来抛出用户在输入框中输入/删除任意字符的行为，和原始输入框的“输入改变”事件对应。要将输入框的“输入改变”事件，抛出为小模块的事件，我们需要用“自定义事件”组件作为中转。在原始输入框的“输入改变”事件触发时，让自定义事件“触发”，这样，就可以把输入框的“输入改变”事件，传递给小模块了：
自定义事件，还可以定义参数，比如，我们希望在输入改变时，将用户当前输入的内容也一起抛出来。那就可以在自定义事件中，先定义一个“输入内容”参数：
然后，触发自定义事件时，把输入框的当前内容传给这个参数：
这样，在小模块实例的“输入中”事件里，就可以拿到当前用户输入的内容了：
若有收获，就点个赞吧
0 人点赞
