V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
phodal
V2EX  ›  分享创造

Web 开发者技能树 [移动版] 预览:陪你成为顶尖开发者~

  •  
  •   phodal ·
    phodal · 2016-12-30 09:45:56 +08:00 · 2518 次点击
    这是一个创建于 2864 天前的主题,其中的信息可能已经有所发展或是发生改变。

    上周六陪我们家 @花仲马 去看一部狗血的电影《摆渡人》。在这期间,我又想到我伟大的技能树可以单独地出一个版本。于是,我就简单地先撸了一个 Demo 版本。

    原型仍然还是原生的那个原型:https://github.com/phodal/sherlock,还是基于以前的 Skilltree 。

    Sherlock

    只是现在变成了移动版,除了可以当成一个 Android 应用、 iOS 应用,它还将作为 PWA 应用运行——这意味着,你可以在带有 Chrome 浏览器上安装离线这个应用。

    先将自己的技能树的功能一个个的迁移了过来:

    1. 使用之前的 Sherlock 项目生成的 SVG
    2. 在 SVG 上添加事件绑定
    3. 准备并展示相应的数据
    4. 添加 TODO Lists 功能
    5. 完成 TODO 事项便点亮技能

    由于是预览版,所以打开方式还是一样的:

    1. 点击技能进行详情页
    2. 在详情页里拥有相关资料的介绍,并且可以点亮技能

    SkillTree Mobile

    PWA 打开方式

    步骤如下:

    1. 你需要安装一个 Google 的 Chrome 浏览器。
    2. 打开 「 Growth 技能树」的地址:https://phodal.github.io/motree/
    3. 待页面加载完后,点击右上角的菜单,选择「添加到主屏幕」

    Skilltree PWA

    然后你就可以运行应用~~。

    Android 用户也可以从 Google Play 上下载该应用:https://play.google.com/store/apps/details?id=ren.growth.skilltree

    项目地址:https://github.com/phodal/motree

    那么,你希望拥有什么功能呢?

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1990 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:19 · PVG 00:19 · LAX 09:19 · JFK 12:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.