牛刀云小程序开发教程 : 第2篇开发模式 : 进入开发模式 : 实战案例：HelloWorld

【学习目标】

通过学习 Hello World 了解在开发模式下，书写JS代码的方法，学会从事件中获取参数，以及获取数据集JS对象的方法。

【案例说明】

Hello World是学习开发模式的第一个应用，是只有一个页面的入门应用。案例运行效果如图13-9所示。运行效果是，在输入框中输入“小目标”，在输入框下面显示“Hello 小目标”。

图13-9 Hello World 运行效果

【开发过程】

实现思路：使用输入框组件实现用户输入，在输入框的值改变事件中，获取输入的内容加上“Hello：”，存入静态数据集，使用文本组件显示数据集中的内容。

1、数据制作

在数据制作区中新增一个静态数据集，并添加输入、输出两列，如图13-10所示。

图13-10 新增静态数据集

2、页面制作

切换到页面制作区，在主页的设计区中，添加新增的静态数据集作为页面数据。添加输入框组件让用户在此输入内容，添加文本组件，格式化显示用户输入的内容。各组件属性见表13-1。设计器效果如图13-11所示。

表13-1 组件属性说明

图13-11 添加组件及设置组件属性

从表13-1中可以看出，用户输入的内容存入静态数据集的输入列，文本组件显示输出列的内容。那么，在哪里格式化输入列的内容，存入输出列呢？可以在输入框组件的“值改变”事件中，从事件参数event中获得输入框中的内容，在前面加上“Hello：”，然后写入输出列。

给输入框组件添加值改变事件的方法是：选择“值改变”事件为“代码”，单击事件方法右侧的“跳转”按钮，设计区由设计页切换到JS页，同时系统生成onInputValuechange事件方法，在事件方法中加入下面的代码，如图13-12所示。

onInputValuechange(event/*{{{*/=this._e.input_valuechange/*}}}*/){

let hi = "Hello：" + event.value;

this.comp("tableData").setValue("fshuchu", hi);

}

图13-12 编辑JS代码

事件方法中的代码说明见表13-2。

表13-2 事件方法代码说明

事件方法中的代码	说明
onInputValuechange	事件方法名
event	事件参数名，JSON类型，每种事件有自己的参数。输入框值改变事件中event.value表示输入框中的值，此时还未存入数据集组件中
/{{{/=this._e.input_ valuechange/}}}/	系统自动生成，用于编辑器的代码提示
this.comp("tableData")	tableData是静态数据集组件的id值，使用this.comp("组件id")获取组件的JS对象获取JS对象后，可以调用组件的JS方法
setValue("fshuchu", hi)	setValue是数据集组件的给列赋值的方法，有两个参数：第一个参数是列标识，第二个参数是值。Fshuchu是静态数据集输出列的标识，可以在数据制作区、数据集结构、列标识中看到

3、页面预览

单击“预览”按钮显示运行页面。在输入框中输入“小目标”，用鼠标在页面上空白的地方单击，使得输入框中的焦点移出，文本组件中显示“Hello：小目标”。