网站首页 >> 牛刀云小程序开发 >> 第1篇制作模式 >> 页面制作 >> 高级组件

2.3.7.15 复杂逻辑

复杂逻辑组件是通过画代码的方式实现一段逻辑。它和在事件中使用自定义有2个区别:一是可以被重复使用,例如:在页面中有2个地方调用同一段逻辑,就可以定义一个复杂逻辑,在2个地方调用。二是可以获得返回值,在表达式编辑器中会显示复杂逻辑组件,这样组件的属性值也可以通过画代码的方法设置。

 

1、编辑代码

复杂逻辑组件是功能组件,选择复杂逻辑组件,单击属性栏设置区域的“编辑代码”按钮进入画代码界面。

画代码的目标是解决某个特定的问题,解决问题需要有思路,这个思路用代码表现出来便是逻辑。与初中、高中证明数学题一样,逻辑清晰,并把它表达出来是最终的目标。画代码只是把原本程序员一行行手写的代码,改为使用画流程图的方式实现而已。

画代码是实现逻辑的手段,其实也是用一种特殊的语言——程序语言,而不是文字来表达一段意思。平时写文章需要注意分段,分层,分条理。画代码也是一样,要求思路清晰、结构清晰。在画代码的时候,要仔细想想,如何把变量名取得清楚一些,如何把逻辑表现地清晰一些。

 

1)开始和结束

    一段代码必须有一个开始,如图4-64所示,可以有一个或多个结束,也可以没有结束,如图4-65所示。

4-64  代码开始

    “开始”标识代码的起点。有没有“结束”取决于使用画代码的方式。如果使用的是事件上的自定义画代码,就不需要“结束”。如果是使用复杂逻辑组件,就可以设置“结束”,并在结束中设置“返回值”,这个值就作为请求的返回值,可以在表达式编辑器中使用。

4-65  代码结束

 

2)动作

“动作”就是设置要执行的动作,如图4-66所示。动作是系统API。根据动作的不同,在选择“执行动作”后,可能会设置“目标对象”;在“输入设置”中设置“变量初始值”、“变量类型”;在“输出设置”中设置“返回值类型”、“变量名称”、“使用返回值”和“新增变量”等信息。

4-66  代码动作

    在设置“动作”时,会出现两种页面,一个是选择动作的页面,如图4-68所示。一个是选择值的页面,如图4-67所示。选择动作就是选择一个要执行的动作;选择值就是给动作的某个属性设置值。这两个页面完全不同,即使都显示上下文变量,前者选择变量的方法,后者选择变量的值。

说明: 编辑器

4-67  设置动作时设置值

4-58中工具栏上的符号按钮说明如下:

l  数学计算符:+  -  *  /  %取余数

l  逻辑预算符:||或者  &&并且  !

l  比较运算符:>大于  >=大于等于  <小于  <=小于等于  !=不等于  ==等于

l  常用符号:英文双引号   空格

 

单击“执行动作”右侧的…按钮,打开选择动作页面。在这里,可以选择组件的API、上下文变量的方法、系统工具类和辅助方法。

 

l  选择组件的方法

    在“组件”下面列出的是页面中引入的组件,每个组件下提供该组件的方法,如图4-68所示。

说明: 组件方法

4-68  组件的方法

 

l  选择上下文变量方法

在声明变量、使用动作返回值之后,这些变量就成为上下文变量,即在当前代码中可以访问的变量,根据变量的类型不同,变量的方法也不同,如图4-69所示。

说明: 上下文变量

4-69  上下文变量的方法

l  选择工具类方法

    “工具”中列出的都是系统API,如图4-70所示,包括UUID类。

说明: 工具类

4-70  工具类的方法

 

l  选择辅助动作

    “辅助动作”下面的3个动作是常用动作,如图4-71所示。声明变量是新建一个简单类型的变量;退出循环是退出当前循环。

说明: 辅助动作

4-71  辅助动作

 

3)条件分支和分支合并

在确认订单页面中,提交订单时判断是否选择了收货地址,如果已选择地址,则保存订单,并进入支付页面,如果没选择地址,则提示“请先添加收货地址”,这个场景就是条件分支,根据不同的条件,执行不同的动作。条件分支的条件就设置为:判断订单数据集的收货地址列是否为空。在条件分支后面增加两个动作,分别用两根连接线连接这两个动作。在上面连接线的条件值中选择真,如图4-72所示,表示条件为真时执行这条连接线后面的动作,那么动作就应该设置为:提示 “请先添加收货地址”。两条连接线只在一条上标注条件值即可。没有标注条件值的连接线连接的动作,表示条件为假时执行的动作,此时应该设置为保存订单。

4-72  条件分支

分支各自结束后,还需要汇聚到一起,继续往下执行,就需要在两条分支的后面连接一个分支合并,在分支合并后再添加新的动作。

4)循环

在购物车页面中,结算时要将购物车数据集中的数据复制到订单详情数据集中。这就需要循环购物车数据集的所有数据,一条一条的赋值给订单详情数据集。这个场景就是循环,循环对象就是购物车数据集。在循环中添加动作,获取循环变量所有列的值,添加到订单详情数据集中,如图4-73所示。

在循环中添加动作的操作有些特殊。如果选中循环,添加动作,动作就会添加到循环的后面。在循环内添加动作的方法是,在设计区中的网格线上单击,使得设计区的所有图形都处于非选中状态。此时,单击工具栏中的动作,放入循环中,就可以将动作放到循环内。

说明: 循环

                                                                           4-73  循环

在循环中,循环对象是数据集组件,循环变量就包括数据集组件中的行对象,数据集组件中有多少行,循环就会执行多少次。在循环中执行“获取列值”和“设置列值”动作时,通常需要使用循环变量中的行对象,才能获取到循环中的当前行。将“获取列值”和“设置列值”动作的“输入设置”中的“行”属性设置为“循环变量.行对象即可,其中“循环变量.行对象是在表达式编辑器中选择的。

 

5)连接线

    当一个图形被选中,再单击工具栏上面的一个图形,系统会在被选中图形后面绘制新选择的图形,并且生成连接线,因此通常不需要手工添加连接线。其实图形可以任意放置,连接线也可以重新添加。添加连接线的方法是:在工具栏上选择连接线,将鼠标滑动到连接线起点的图形上,图形会显示出3个大定位点,按住鼠标左键不松手,拖曳到连接线的终点图形,终点图形会出现1个大定位点,拖曳到定位点,松开鼠标,连接线添加完成。

 

6)设置返回值

    要想在“结束”中设置返回值,必须先在“全局属性”中设置“返回值类型”,如图4-74所示。切换到“全局属性”页,在“返回值类型”中选择一个正确的类型。

4-74  设置返回值类型

 

    设置“返回值类型”后,单击“结束”,结束的基本设置中就会显示出“返回值”属性,设置一个返回值即可,如图4-75所示。

4-75  设置返回值

 

7)查看代码

画代码是使用画流程图的方式,代替手写代码,因此画代码的结果就是生成代码。有兴趣的话,可以单击“查看代码”看看生成的代码。

 

8)启用浏览器调试

在画代码中提供了调试代码的功能,选中“启用浏览器调试”复选框,就在该段代码的开头增加了断点,即插入了debugger;语句在预览页面中,按F12打开浏览器的开发人员工具,刷新当前页面,执行操作触发复杂代码逻辑,开发人员工具执行到断点,进入调试界面。调试代码的具体方法参见“14.4.4调试JS”一节。

 

2、基础属性

复杂逻辑组件提供1个基础属性:显示名称,用于在表达式编辑器的函数区域中显示复杂逻辑。

 

3、操作

    复杂逻辑组件提供1个操作:执行,用于在组件的事件中执行复杂逻辑。

 

4、在表达式编辑器中使用

页面中添加复杂逻辑组件,并设置“显示名称”属性后,在表达式编辑器的函数区域中,会显示出来,如图4-76所示。在函数区域中显示出了“显示名称”属性定义为“获取编号”的复杂逻辑。复杂逻辑的使用方法和函数区域中的其它函数一样。

4-76  表达式编辑器中使用复杂逻辑

 

5、示例

购物车中商品合计的计算逻辑为:只计算选中状态为1的商品的合计。采用复杂逻辑实现该业务功能,复杂逻辑共包含7个动作,1个分支条件和1个循环,如图4-77所示。

说明: 商品合计

4-77  购物车合计画代码

4-12列出了逻辑图中各步骤的说明及编号。

4-12  逻辑说明

步骤

购物车商品总计逻辑

1

声明一个变量sum=0

2

循环购物车数据集

3

获取循环项中选中状态的列值checked

4

获取循环项中折扣价的列值price

5

获取循环项中数量的列值num

6

判断checked是否等于1

7

9

8

修改变量sum=sum+ price*num

10

退出当前循环

11

结束返回sum

4-13列出了7个动作的属性设置。

4-13  动作属性设置

步骤

动作

调用设置

输入设置

输出设置

1

辅助动作→声明变量

执行动作=变量声明

变量初始值=0

返回值类型=含小数数字

变量名称=sum

3

组件→业务数据→获取列值

执行动作=获取列值

目标对象=购物车

列名称=选中状态

=item.行对象

返回值类型=字符串

使用返回值=

新建变量=

变量名称=checked

4

组件→业务数据→获取列值

执行动作=获取列值

目标对象=购物车

列名称=商品ID-折扣价

=item.行对象

返回值类型=字符串

使用返回值=

新建变量=

变量名称=price

5

组件→业务数据→获取列值

执行动作=获取列值

目标对象=购物车

列名称=数量

=item.行对象

返回值类型=字符串

使用返回值=

新建变量=

变量名称=num

8

辅助动作→修改变量

执行动作=修改变量

 

变量值= sum +  price * num

返回值类型=含小数数字

变量名称=sum

10

辅助动作→退出循环

 

 

 

    4-14列出了条件分支及两条连接线的属性设置。

4-14  条件分支属性设置

步骤

图形

属性设置

6

条件分支

条件=checked==1

7

条件为真的连接线

条件值=true

9

条件为假的连接线

条件值不需要设置

4-15列出了循环的属性设置。

4-15  循环属性设置

步骤

图形

属性设置

2

循环

循环对象=购物车 循环变量名称=item

 

逻辑图画好后,单击“确定”按钮关闭代码编辑器,修改复杂逻辑组件的“显示名称”属性为“商品合计”。在显示商品合计的文本组件的动态文本属性中,打开表达式编辑器,选择“商品合计()”,运行后即可在文本中显示出合计金额。