在本章中，你将学会使用全局变量和局部变量创建一个SearchEngine搜索引擎。
项目背景
不知道多久之前听过一个段子：
老板：我们要开发一个搜索引擎，代替百度成为独角兽！
程序员：好的。
老板：下班之前搞定。
程序员：什么？！
老板：不就是一个输入框和一个按钮嘛，都用不了多久。
程序员：你***
刚听这个段子时着实笑到我了，一个搜索引擎哪有可能那么简单，需要的推荐算法、搜索逻辑可能有些企业一辈子都做不出来。
那有没有可能我们就按照这个老板的思路，做一个假的搜索引擎呢？就一个搜索页面，然后使用其他搜索引擎的搜索结果。
说干就干！
项目创建
首先，创建一个新项目，命名为SearchEngine。
逻辑梳理
首先我们要知道常用的几个搜索引擎的查询链接，这里以百度为例：
https://www.baidu.com/s?tn=88093251_47_hao_pg&ie=utf-8&wd=
它的后面只需要接需要搜索的内容，就可以以百度搜索引擎进行搜索内容。
而我们要做的事情，是整合这些常用的搜索引擎的搜索链接拼接方式，然后通过输入框传值的方式，实现搜索效果。
这里我们以百度、必应、搜狗、知乎、谷歌作为常用的搜索引擎。
基础样式-搜索引擎选择
拖入一个“矩形2”组件，修改内部文字为“百度”。
在“样式”工具栏中，设置它的位置为（100，100），设置它的尺寸为40*20，字体为12，字体颜色为#333333，矩形填充颜色为#F4F4F4，圆角半径为4。
然后设置交互样式。
在“交互”工具栏中，设置2个交互样式，鼠标悬停的样式，勾选“填充颜色”，设置颜色为#1890FF，勾选“字色”，设置颜色为#FFFFFF。
再次，加入交互动作。
在“交互”工具栏中，新建交互动作，选择“单击时”，选择“设置选中”，设置“当前”值为“真”。
我们复制多几个，然后修改矩形中的文字，这样，我们就得到了一个按钮组。
为了美观，且我们的按钮组需要调整相同的间距，这里设置为10，水平对齐。
以及我们选中全部按钮，在“交互”工具栏中命名“选项组”为“搜索引擎”。
再给第一个“搜索引擎”按钮添加一个“载入时”的交互样式，设置当前为“真”就完成了搜索引擎选择的基础样式。
基础样式-搜索框
下面，我们来完成下搜索框的样式。
拖入一个“文本框”组件，命名为“搜索内容”。
在“样式”工具栏中，设置距离上面“搜索引擎选择”按钮组的位置为10，设置尺寸为450*44。
设置文字字号为14，字体颜色为#000000，设置文本框的填充颜色为#F4F4F4，设置圆角半径为4，左侧边距为40。
圆角半径点开“可见性”，设置只有左边两个为圆角。
在“交互”工具栏中，设置“提示文字的样式”，勾选字色为#C5C9CF。
设置提示文字为“请输入你想要的内容”，设置隐藏提示为“获取焦点”。
拖入一个“搜索”SVG图片（这是网上下载的）。
在“样式”工具栏设置尺寸为17*17，设置填充颜色为#000000。
拖入一个“矩形2”组件，命名为“搜索按钮”。
把它放在搜索内容输入框右边，设置尺寸为100*44。
修改内部文字为“立即搜索”，设置字号为14，字体颜色为#FFFFFF。按钮填充颜色设置为#1890FF，设置圆角为4，可见性设置为右边两角。
我们在浏览器中预览下效果。
交互动作-切换搜索引擎
按照搜索引擎的交互逻辑，当我们点击上面的“搜索引擎选择”时，系统需要记录我们点击的是哪一个搜索引擎。
这时，我们用到了全局变量。
在Axure顶栏，选择“项目”，选择“全局变量”，我们设置一个变量
变量名称：ur 默认值：https://www.baidu.com/s?tn=88093251_47_hao_pg&ie=utf-8&wd=
然后在选择搜索引擎的时候更新赋值。
选中按钮，在“交互”工具栏中，在“单击时”的交互下添加动作，选择“设置变量值”，目标为“url”全局变量，设置值为网站相应的搜索链接。
这样我们就完成了每次切换搜索引擎时的赋值操作。
交互动作-立即搜索
下面，我们完成搜索的交互。
选中“立即搜索”的按钮，在“交互”工具栏中新建交互，选择“单击时”，选择“打开链接”，选择“链接到URL或文件路径”，点击“fx”打开编辑值弹窗。
点击“插入变量或函数”，选择“url”全局变量，再在旁边添加“[[LAR1]]”。
在局部变量选择“添加局部变量”设置元件文字为“搜索内容”输入框的值。
这样，我们就将搜索引擎的搜索链接与输入框的输入内容进行关联了。
我们设置玩编辑值后，在交互动作中，设置打开在“新窗口/新标签”。
这样我们就实现了点击“立即搜索”按钮，在浏览器会对应打开一个新页面并搜索。
交互动作-回车快捷键搜索
在日常使用搜索引擎中，除了点击“立即搜索”按钮外，我们常常会使用键盘上的“回车”按钮进行快速搜索。
实现这个功能也比较简单，选中“搜索内容”输入框，在“交互”工具栏中，设置“提交按钮”为“搜索按钮”。
这样，我们就实现了在搜索输入框内输入完内容，点击回车就立即搜索的效果。
我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
搜索引擎：ricardowesley.gitee.io/searchengin…
快来动手试试吧！
