V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
yazoox
V2EX  ›  程序员

一个有关前端页面/用户向导的技术问题,绞尽脑汁想了半天,头晕脑胀,特来请教一下大家

  •  
  •   yazoox · 2023-09-08 08:28:13 +08:00 · 1076 次点击
    这是一个创建于 467 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们的产品使用的是 react + typescript 开发的 web app/前端页面。

    产品中,经常会需要在页面中间弹出一个 dialog (当然,这个都是 div 等元素合成的),已经实现了。PM 想针对这个 dialog ,制作产品向导(product tour)。于是我 google 了一把,还好,现在有一些成熟的工具。

    但是 PM 的要求很不一般,不是开屏杀。而是需要用户操作到某一个页面后,比如,打开了某个 dialog ,针对这个 dialog 上面几个组件,比如,input text, list ,ok button ,等等,做三个页面向导(还是很花里胡哨的向导,我找到的工具,基本上向导里的都是纯 text ,还不能使用 react 定制页面,要么就是要收费的,比如 intro.js )。然后,等用户点击了 ok button ,切换到另外一个页面/dialog ,再制作几个向导。

    所以,研究了几个工具,貌似都不太好实现。所以特意来请教一下大家。看看没有什么思路。

    • 自己写?针对某个页面上的元素,在它的旁边弹一个 float 在最上面的窗口,有没有比较好用的库。(或者搜索关键字是有没有推荐)
    • 或者有没有 包/库 能够实现这个需求,我没有找到的?
    • 或者现在的包就够用,我的思路有问题?

    等等...

    谢谢大家

    p.s.
    https://www.chameleon.io/blog/javascript-product-tours
    https://userguiding.com/blog/react-onboarding-tour/
    https://blog.bitsrc.io/7-awesome-javascript-web-app-tour-libraries-6b5d220fb862

    xomix
        1
    xomix  
       2023-09-08 08:41:58 +08:00
    你们 pm 是不是想要国产哪种点着点着一个视频看完不再出现的哪种提示?
    SimonTart
        2
    SimonTart  
       2023-09-08 08:43:40 +08:00   ❤️ 2
    https://driverjs.com/ 你需要这个
    790002517zzy
        3
    790002517zzy  
       2023-09-08 09:51:45 +08:00 via Android   ❤️ 1
    这个比 2 楼那个更好用,二楼那个层级老是有问题,回调也少
    https://github.com/josias-r/boarding.js
    yazoox
        4
    yazoox  
    OP
       2023-09-08 10:01:29 +08:00
    @SimonTart 这个好像比前面我自己找到的几个强大一些。但是,所以这些 tour ,都只能渲染一段 text ,我需要的渲染的一个页面到 tour 里面去。
    driver.js ,好像可以定制 dom ,不知道能否搞定。我试试吧......
    万分感谢
    gkinxin
        5
    gkinxin  
       2023-09-08 10:06:39 +08:00
    @yazoox #4 antd5 也有 tour ,是可以渲染页面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1012 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:29 · PVG 05:29 · LAX 13:29 · JFK 16:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.