快速开始

本篇文档将带领大家快速借助宜搭自定义页面能力搭建一个简单 Demo 并发布上线，Demo 效果如下所示：

通过上面的效果我们可以看到，当用户在输入框中输入姓名并点击生成按钮，程序将自动生成问候语并打印在按钮下方，我们会尽可能详细的讲解每一个步骤，如果用户在这个过程中对于宜搭的产品功能有所疑惑，欢迎移步至宜搭使用手册进行查看，下面我们就从 0 开始来实现上面的 Demo 效果。

用户可以通过访问 Hello 示例查看真实效果，同时用户也可以访问自定义组件设计器查看具体实现。

步骤 1：创建宜搭应用

首先我们需要在宜搭工作台中创建一个应用 (详见使用手册)，如果您已有可用的应用则可以跳过本步，如下所示，我们创建一个名为 demo 示例 的空白应用：

步骤 2：创建自定义页面

接下来我们需要创建一个自定义页面来实现 Demo 的功能，如下所示，当前我们还不需要用到页面模板，因此在选择模板环节可以点击 跳过 按钮直接进入自定义页面设计器：

宜搭的自定义页面设计器如下所示，具体功能介绍详见设计器文档，开发者可以在进入设计器后修改当前页面的名称：

步骤 3：拖入组件并配置属性

我们的 Demo 示例非常简单，总共包含三个组件，开发者可以从组件库面板中将组件先拖入画布，用户也可以前往组件文档查看更多组件配置能力：

输入框- 用于输入姓名，我们将组件的 标题 属性设置为”姓名”；
按钮- 用于获取用户输入姓名并生成问候语，我们将按钮组件的 标题 属性设置为”生成”；
文本- 用于显示问候语，为了美观我们在样式面板中设置上边距：20px，字体大小：20px，如下所示；

步骤 4：创建全局变量

从这一步我们要开始实现逻辑部分了，首先，我们需要创建一个全局变量用于存储问候语（全局变量使用详见全局变量文档），如下所示，我们创建一个名为helloWord的全局变量：

步骤 5：绑定按钮点击事件

我们需要当用户点击按钮时获取输入框的内容，并生成问候语打印在下方，接下来我们将讲解如何绑定事件并生成问候语： 1.给按钮绑定点击事件，如下所示，绑定后我们会在动作面板自动生成一个 JS 函数（用户也可以自定义函数名）；

2.使用 getValue API 获取输入框的内容，宜搭提供了非常丰富的宜搭JSAPI，如下所示，我们根据输入框组件的唯一标识获取用户输入内容：

3.构造问候语，并使用 setState API 更新全局变量的内容触发页面重新渲染，onClick 的全部代码如下所示：

export function onClick() {
  // 获取姓名输入框内容
  const name = this.$('textField_kzdxqcod').getValue();

  // 更新全局变量
  this.setState({
    helloWord: `Hello ${name} !`,
  });
}

步骤 6：文案绑定数据源变量

最后一步，我们需要将全局变量绑定到文本组件的 内容 属性上进行展示，如下所示：

步骤 7：预览&发布

到目前为止，我们的 Demo 示例就已经开发完成了，用户可以点击设计器右上角的 预览 按钮进行预览：

完成预览后点击 保存 按钮保存页面，接下来便可以通过点击应用右上角的访问按钮，访问我们搭建的 Demo 页面了：

最后

到此我们已经完成了快速开始 Demo 示例的制作，用户可以通过访问 Hello 示例查看效果，通过本示例用户可以初步了解宜搭自定义页面的基本使用流程，如果想了解更加复杂的示例教程，可以移步到 TodoMVC 教程进行查看。

开始使用

开发指南

API

教程

组件

步骤 1：创建宜搭应用

步骤 2：创建自定义页面

步骤 3：拖入组件并配置属性

步骤 4：创建全局变量

步骤 5：绑定按钮点击事件

步骤 6：文案绑定数据源变量

步骤 7：预览&发布

最后

​步骤 1：创建宜搭应用

​步骤 2：创建自定义页面

​步骤 3：拖入组件并配置属性

​步骤 4：创建全局变量

​步骤 5：绑定按钮点击事件

​步骤 6：文案绑定数据源变量

​步骤 7：预览&发布

​最后

步骤 1：创建宜搭应用

步骤 2：创建自定义页面

步骤 3：拖入组件并配置属性

步骤 4：创建全局变量

步骤 5：绑定按钮点击事件

步骤 6：文案绑定数据源变量

步骤 7：预览&发布

最后