快速获取天猫商品价格

码栈可视化开发实例教程-快速获取天猫商品价格


码栈提供的可视化编程是面向无编程经验的开发者，它提供了通过拖动的方式实现应用逻辑的功能。 开发者不需要再关注编程语法、运行环境以及复杂的API，只需要按照流程拖动滑块并将其拼接在一起即可。

可视化编程界面主要分为`工具箱`、`画布区`两个部分，`工具箱`中包含开发者可能用到的所有命令，选中需要的滑块将其拖动到`画布区`即可。详细介绍请[点击这里]


本教程将通过`天猫搜索`的应用实例来为大家讲解可视化的使用方法，内容包括基础应用、使用参数面板、使用数据视图、使用循环和判断

第一节：基础应用

1. 在右侧的浏览器输入 www.tmall.com，然后输入回车


2. 拖动`打开网页`到画布区，并在配置对话框中修改打开网址为"www.tmall.com"，点击确定


3. 拖动`填写输入框内容`到画布区，并在配置对话框中修改输入内容为"电视"


4. 点击`捕获网页元素`，在弹出的录制控件中点击`开始录制`，然后在右侧浏览器中选择"天猫搜索框"，点击保存并关闭录制控件窗口


5. 拖动`点击网页元素`到画布区，点击`捕获网页元素`，在弹出的录制窗口中点击`开始录制`，然后在右侧浏览器中选择"天猫搜索按钮"，点击保存并关闭录制控件窗口


6. 点击`保存`，切换到`执行预览`并点击`开始`按钮运行应用

第二节：使用参数面板

上例中我们使用“电视”作为搜索关键字，如果想在运行时动态的修改关键字就需要使用`参数面板`的功能。码栈通过`参数面板`来实现运行时的自定义内容
下面我们将通过`参数面板`来实现自定义搜索内容


1. 在`参数面板`中添加一个名称为"关键字"的参数


2. 拖动`读取参数面板`到画布区，将其放置到`打开网页`的下面；配置`参数名称`为"关键字"，点击确定


3. 双击`填写输入框内容`，在弹出的配置对话框中修改`输入内容`，选择名称为"参数值"的动态内容，点击确定


4. 点击`保存`，切换到`执行预览`；在`关键字`中输入"洗衣机"，并点击`开始`按钮运行应用




第三节：使用数据视图
`数据视图`主要用于保存运行结果及数据导入、导出，本节将通过保存运行结果来介绍`数据视图`的使用方式



1. 在`数据视图`中添加一个名称为"商品名称"的列


2. 拖动`定时器`到画布区，并点击确定。由于天猫搜索结果是延迟加载的，所以此处需要添加`定时器`，实际开发中不一定需要


3. 拖动`获取网页元素内容`到画布区，点击`捕获网页元素`，在弹出的录制窗口中点击`开始录制`，将鼠标移动到商品名称位置并点击鼠标，点击`保存`关闭


4. 拖动`创建新行`到画布区，设置`设置值`为`网页元素内容`的动态内容，点击确定


5. 点击`保存`，切换到`执行预览`；在`关键字`中输入"洗衣机"，并点击`开始`按钮运行应用


第三节：使用循环和判断

`循环`主要用于处理一些重复性的动作，`判断`主要用于根据不同的条件执行不同的动作
下面我们将模拟一个实际的业务场景：将所有洗衣机价格大于2000元的商品保存到数据视图



1. 删除`创建新行`
2. 双击`获取网页元素`，修改名称为"获取结果数量"，选择提取类型为`个数`


3. 点击`捕获网页元素`，在弹出的对话框中点击`开始录制`，将鼠标移到价格上点击，点击`获取相似元素`，依次保存


4. 拖动`循环执行`到画布区，设置`循环次数`为`获取结果数量`


5. 拖动`获取网页元素内容`到画布区，并重命名为"获取价格"，修改`网页元素位置`为`已循环次数`


6. 重复第3步，录制价格


7. 拖动`正则表达式`到画布区，重命名为`提取价格`，设置`正则表达式`为"￥(\d+)"，设置`要匹配的内容`为`获取价格`，点击确定


8. 拖动`条件判断`到画布区，判断条件设置为"提取价格 大于 2000"，点击确定
9. 拖动`获取网页元素内容`到画布区，重命名为`获取商品名称`，点击`捕获网页元素`，在弹出的录制窗口中点击`开始录制`，将鼠标移动到商品名称位置并点击鼠标，点击`获取相似元素`，点击`保存`关闭
10. 拖动`创建新行`到画布区，设置`设置值`为`获取商品名称`的动态内容，点击确定
11. 点击`保存`，切换到`执行预览`；在`关键字`中输入"洗衣机"，并点击`开始`按钮运行应用