由于经常要向用户介绍本次更新了哪些特性,于是做了一个 guideline 前端组件
发现一个挺好的名字没被占用,就叫它 web-assistant
实现那种黑色遮罩层+聚光灯式的步骤演示,让用户自己一步一步点击将所有步骤看完
除了 guideline 以外,还做了类似轮播图式的“intro 组件”,以及纯遮罩层和吐司,都集成在这同一个库,接下来还想做一个“意见反馈组件”也集成进去
在 npm 开源了,地址是 https://www.npmjs.com/package/web-assistant
demo 页面由于人比较懒,没有做得很花哨(简陋到可怕),但 show code 那里通过 function.toString()和 window.eval()的方式,做了个好玩的代码编辑器效果,算是个丐版的 codepen 吧
其实开发到半途看到intro.js这个库了,但感觉它跟我想要的不太一样,还是坚持把轮子造完了,实现了自己想要的效果。onNext 如果传入 async function 可以做很多酷炫的操作,比如用户一路点击“下一步”,页面自动填写完表单并提交。由于用了 async/await ,虽然最终提交成功的 dom 对象在一开始并不存在,但最后仍能将它高亮给用户看,整个过程很像 puppeteer 那种感觉。
组件用 svelte 开发的,我最近一年很迷 svelte (虽然自己用得并不很熟练),觉得它特别适合用来开发 web components
依赖了 html2canvas 这个库,大部分场景应该没问题,如果高亮的内容里包含跨域图片也许会翻车吧
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.