应用系统
更新时间:2023-04-14 14:07:42文档 属性·动作·事件
常见功能
应用系统组件允许调用系统功能以执行某些全局操作。可实现的常用功能如下:
- 调试:调用调试记录、弹框提示等,用于对案例进行调试;
- 设置 Url 参数:可在 Url 地址中添加键值,在不影响案例本身访问的情况下携带某些信息,用于转发记录资源等;
- 设置 Hash 参数:可在 Url 地址中携带某些锚点信息,以实现在不刷新页面的状态下指导浏览器跳转至指定页面或指定位置。
- 其他系统功能:例如将制定内容复制到剪贴板、拨打电话等;
当我们需要执行上述动作时,就需要借助于应用系统组件。
系统仅能被添加为前台的子对象,每个案例中仅能添加一个应用系统系统。
调试记录
调试记录(console.log() )用于在浏览器的控制台输出信息。输出的信息可指定为某组件的属性值、文本内容、变量值或公式。
该操作可以将应用运行过程中的变量状态-即时呈现在控制台中,对于开发过程进行测试很有帮助。
例如,假设现有一个数组里面有成百上千的元素,我们想知道每个元素具体的值,可以通过控制台即时呈现,而完全不打扰当前线程:在测试过程中,控制台需要可见。
1、控制台的调用
以Chrome 浏览器为例,控制台可以通过以下方法开启:
使用快捷键 Command + Option + J(Mac) 或者Control + Shift + J (Windows/Linux)。
使用快捷键F12。
选择Chrome菜单 > 更多工具 > JavaScript 控制台。
2、调试记录的使用
调试记录可以即时将系统中的当前值-输入到控制台中进行显示。 例如,现在通过一个触发器-向一维数组中添加随机值,每次添加后-希望将当前内容输出到控制台中进行查看。则首先添加触发器并设定如下:
触发器每次触发向一维数组的开头添加一个随机值。将触发器的播放间隔设定为1秒。
然后通过调试记录输出一维数组的当前值,在信息一栏中选取“一维数组·值”:
进行预览,效果如下。可以看到,随着触发器的每次触发,调试记录中将即时显示当前指定的信息:
设置URL参数和Hash参数
url 参数是 url 地址串内的查询字符串,从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分,以“=”连接键值对,不同键值对之间再使用“&”连接,如下:
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
在该 url 地址中, 总共存在两个 url 参数,分别为 key1=value1 与 key2=value2。
url 参数会参与服务器请求,作为服务器请求的参数,每当 url 参数发生改变后、都会向服务器重新发起请求并刷新页面,url 参数一般都是记录一些用于后台查询的入参;hash 参数是 url 地址串的锚部分(通常从 # 号开始),仍以上面的 url 地址为例,#SomewhereInTheDocument 就是其 hash 参数。它可以理解为资源内部的书签,可记录某个页面、滚动条位置、视频音频的某个节点、历史记录等参数,浏览器会自动识别该参数并滚动或跳转到特定的位置。
hash 参数与 url 参数有以下的异同:
·共同点:均将信息记录在 url 地址内,在分享网页时如果需要传递参数,使用 url 参数或 hash 参数均可以实现带参数的分享——一般在分享时为页面添加这两种参数,然后在页面加载的时候读取参数并执行相应的动作; 需要注意的是,设置 url 参数总是会导致页面的刷新,可能会影响用户体验,而在微信内分享使用 hash 参数、则会被过滤导致分享的 url 地址无法携带 hash 参数,因而选用哪一种参数作为分享参数需根据自身情况考虑。
· 格式区别:url 参数的基本格式是在 ? 后附加若干个以 = 连接的键值对,各键值对间以 & 连接;也可以通过 URL 传递页面参数;hash 则使用在“#”后附加键值对的方式。
· 功能区别:使用 hash 参数传值,浏览器不会向服务器发起请求,不会导致页面刷新。 常用于在不需要请求服务器,可由浏览器端脚本直接定位到某个条件下的页面展示。
URL参数:
当前 URL 的查询字符串-可以通过以下操作进行编辑:
step1:在前台添加一个系统组件和两个按钮
step2:给按钮设置事件
注意:使用 获取URl参数时,需要将结果赋值给文本或一个变量; 如果要批量获取URL参数,需要赋值给一个JSON变量。
Hash参数
当前 URL 下的Hash参数,可以通过以下操作进行编辑:
在下面的演示中,用户单击顶部横幅上的按钮, 然后当前 URL 的Hash值改变,页面将滚动到相应的内容处。
step1:添加一个文本变量、系统和带有 3 个按钮的相对横幅。 行表示页面的分区。
step2:给前台添加事件。在应用初始化时,添加名称为“顶部”的Hash参数。
网址变化时,获取该Hash值并保存在文本变量中,用于滚动页面。
注意:要执行以上动作,需要保证前台的剪切属性是打开的
step3:给三个按钮分别添加点击事件:
进行预览,点击按钮可以看到自动滚动效果。