浏览器起始页

第一课：缘起、演示

(10:25)

  1. 缘起

    本课程目的是如何在众触低代码平台快速开发一个浏览器新标签页的教学示例。课程开发前试用了市面上几乎所有的新标签页，选中iTab作为仿制案例是个人觉得它是当时最优秀的，也喜欢它的UI风格。喜欢此课程的朋友请支持iTab原创。需要注意的是本案例作为教学示例是不更新的，而原创目前正在快速迭代中的，比如正在开发文件夹功能，喜欢尝鲜的朋友应该关注iTab原创。当然了，对于有一定开发能力的朋友可以基于我的这个模板快速二次定制开发，做出完全符合自己喜好而独具一格的起始页，有这个意愿的朋友可以微信我（kenyxy）组个群一起探讨自定义风格的话题。

  2. 演示
    熟悉iTab的可以跳过，因为几乎是像素级的复刻，除了出于教学目的稍微做了一些简化，也特意去掉了好些自定义选项，留给二次开发朋友作为补充练习。
    卡片式小组件，网站导航，自定义图标，添加图标，调节尺寸，分类书签，添加分组，切换搜索引擎，拖拽自动排列布局，极简模式，云端备份与同步，数据导入导出。

第二课：主体功能

(39:46)

  1. 初始化数据
    从localStorage读取用户配置
    $v.config = localStorage("config")

    如果首次使用则从数据库拉取默认配置
    $xtk.get("x", "config")
    $v.config = $r.x
    localStorage("config", $v.config)

  2. 侧边栏分组
    源自动态数据$v.config.nav；点击时把主体部分滚到到对应页面。
    拖拽排序
    计算需要滚到的距离：$l.scroll = $$(".grids").slice(0, $i).reduce('$acc + getComputedStyle($x).height.parseInt() + 55', 0)
    平滑滚到：$v.mainE.scrollTo({ top: $l.scroll, behavior: "smooth" })
    添加分组

  3. 主体导航卡片/图标
    源自动态数据$v.nav，二维数组和数据源嵌套。
    使用grid css网格排版，并设置grid-auto-flow: dense属性来填充网格剩余空位使得图标自动排布。
    拖拽排序并自动排列
    交叉观察器：滚动时检测主体容器交叉情况并控制滚动和侧边栏的活跃分组。

  4. 搜索引擎
    百度搜索提示/自动补全：load("https://suggestion.baidu.com/su?wd=" + $f.search.txt)
    提示回调函数：$w.baidu.sug = func('$v.suggestion = $arg.s; render()')
    搜索历史：$v.history.unshift($f.search.txt)
    切换搜索引擎：$v.config.searchEngine
    添加搜索引擎：$xtk.get("x", "searchEngine")

  5. 聚焦模式

  6. 数据结构
    config：各种设置项；nav：导航卡片/图标；focusMode：聚焦模式；history：搜索历史；notes：记事本。

  7. 备份与恢复
    数据导入导出；云端备份与同步（需账号）

第三课：自定义设置

(38:26)

  1. 右键弹窗：图标右键、侧边栏右键、根节点右键
    设置图标/小组件都需要知道它的位置信息：$i是它在当前页组件列表的下标index，$p是它的父级parent数据源，即它所属导航页，$p.$i就是导航页在导航分组的下标了。

  2. 调节图标样式：尺寸、圆角、间距、文字大小与颜色

  3. 调节壁纸遮罩度与模糊度

  4. 添加图标，自定义图标

  5. 右键删除、批量删除

  6. 调节布局

第四课：卡片小组件

(1:02:38)

  1. 时钟
    每隔一秒timeout(1000)循环调用自身一次。为了性能，用现在的时间跟上一次的时间比较（时对时、分对分、天对天），不同时才去操作对应的页面元素。
    点击弹出屏保电子钟：
    通过数组$v.modal.arr: [3, 10, ":", 6, 10, ":", 6, 10]渲染时钟的每一位，数字表示当前位有多少种数字可能，比如第一个是十位上的小时，有3种可能：0，1，2，第四位的是十位上的分钟，满60分就得进位为小时。
    桌面上的时钟就是简化版的时钟小组件，逻辑类似。

  2. 世界时钟
    挂载时把配置项放到变量后渲染render()完成后选取所有时分秒元素，然后根据各地时差计算出各自的旋转角度，每隔一秒更新一次样式。
    点击弹出配置窗口

  3. 备忘录
    挂载时读取备忘录列表

  4. 倒计时

  5. 壁纸
    挂载时读取最新Bing壁纸，从最后一张开始每隔一段时间往前翻一张，点击时立马换一张。
    可下载壁纸和设为桌面壁纸

  6. 热搜榜

  7. 汇率

  8. 彩虹屁

  9. 今日诗词

定时任务

热搜、汇率和彩虹屁的数据来自天行数据API，在控制面版的【定时任务】栏可以看到：每小时获取一次热搜，每天获取一次汇率和彩虹屁。由于是免费账号，获得数据的频次受限，所以获取的数据先存入数据库，用户从数据库拿而不直接从第三方API拿。
另外每天也获取当天的必应墙纸。
今日诗词本身是免费的，就直接从它的API拿。在组件挂载时直接加载它的JS文件，它提供一个load函数，执行一次就返回新诗词，我们把它放到变量后渲染出来。

由众触低代码平台生成和驱动