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

⚡️ Taro 小程序的用户体验优化 × 7

  •  2
     
  •   nanxiaobei · 33 天前 · 1783 次点击
    这是一个创建于 33 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 Taro 开发 FUTAKE 小程序时,7 个与用户体验有关的优化。

    👉 点击体验 FUTAKE 🌁

    1. Dark Mode

    参考 官方 Dark Mode 适配指南 添加 theme.json,并在 app.config.js 中添加相关配置。

    小程序自身 UI 的 Dark Mode,可使用 CSS 变量来控制,其它需要变化的色值,均源自 CSS 变量即可。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/dark-mode

    2. 可拖动的 Modal

    FUTAKE 实现了类似手机原生弹窗的效果 —— 按住弹窗体后,可上下拖动弹窗。

    实现方式即监听 touch 相关事件,动态设置 CSS 偏移,为进一步提升性能,使用原生小程序 wxs 来写。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/draggable-modal

    3. 毛玻璃 tabBar

    使用自定义 tarBar,实现模糊半透明的毛玻璃效果,随着页面滚动 tabBar 一直动态变化。

    使用 CSS 的 backdrop-filter 来实现。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/custom-tab-bar

    4. 页面向右滑直接返回

    手机系统为左侧边缘向右滑返回,但如果屏幕过大,操作并不太顺手。

    在一些 App 中,实现了直接在页面上右滑返回的效果,例如 Slack 和 Snapchat,体验非常顺滑。

    在 Taro 小程序中,首先需要添加一个公共组件,页面均使用此公共组件包裹,然后在公共组件中监听 touch 相关事件。

    这里的重点是需要计算滑动的角度,例如 这样的可以返回,但 这样的,应该忽略掉。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/touch-move-back

    5. 毛玻璃下拉加载效果

    小程序原生的下拉加载也不错,但不够特别。FUTAKE 实现了毛玻璃下拉加载效果:

    GIF 较模糊,强烈建议体验小程序的实际效果。

    同样是监听 touch 事件,但实现更复杂一些,需要根据偏移,处理毛玻璃的模糊度,以及触发 loading 动画等。

    在 React 中使用时,要注意将 loading 元素隔离开来,因为 loading 元素是不断 re-render 的。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/blur-loading

    6. Swiper 动态列表数据

    FUTAKE 使用 Swiper 组件,实现了类似抖音的上下滑动浏览。

    但随着列表元素不断增加,小程序将变得卡顿,因为需要实现列表数据的动态化。

    展示正在浏览的条目以及前后预载入条目,其它条目展示空元素占位即可。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/use-dynamic-list

    7. 双击点赞动画

    FUTAKE 实现了类似 Instagram 的对图片双击即可点赞的效果。

    同时增加了「喜欢」展示红色 ❤️,「取消喜欢」展示白色 🤍 的逻辑。

    🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/double-click-like


    👉 欢迎体验 FUTAKE 🗺

    👉 访问 FUTAKE 官网 🗺

    20 条回复    2021-09-16 18:33:43 +08:00
    Valid
        1
    Valid   33 天前
    sheet modal 是自己写的吗
    nanxiaobei
        2
    nanxiaobei   33 天前 via iPhone
    @Valid 是的,利用上面那个已有 model 实现的
    7gugu
        3
    7gugu   33 天前
    楼主牛逼!
    newbieRenew
        4
    newbieRenew   33 天前 via iPhone
    我想知道这个框架能用 React Hook 嘛? 之前看要管理一堆周期,头大,弃之。
    FightPig
        5
    FightPig   33 天前
    taro 升 3 后性能有点差,不知道现在怎么样了,好久没用了
    nanxiaobei
        6
    nanxiaobei   33 天前
    @7gugu #3 😏
    nanxiaobei
        7
    nanxiaobei   33 天前
    @newbieRenew #4 是的,Taro 可以全部 Hooks 开发,没有一个 class 组件
    nanxiaobei
        8
    nanxiaobei   33 天前
    @FightPig #5 我之前也没用过 Taro 2,不太了解 😂
    FightPig
        9
    FightPig   33 天前
    @nanxiaobei 我从 1 用到 3,然后 3 性能有点问题,不过开发起来真舒服
    dcalsky
        10
    dcalsky   33 天前
    图片审核这块怎么做的?每张图都审核吗
    wanxiankai
        11
    wanxiankai   33 天前   ❤️ 1
    体验了一下非常 nice,刚好最近把公司的小程序从 Taro 1.3.22 升级到了 3.2.0,可以参考你的再做一波优化,感谢分享!
    nanxiaobei
        12
    nanxiaobei   33 天前
    nanxiaobei
        13
    nanxiaobei   33 天前
    @wanxiankai #11 😏
    lycode
        14
    lycode   32 天前
    很需要这个 touch,好好向楼主学习
    nanxiaobei
        15
    nanxiaobei   32 天前
    @lycode #14 😂
    Valid
        16
    Valid   32 天前   ❤️ 1
    满满的干货
    @nanxiaobei
    nanxiaobei
        17
    nanxiaobei   31 天前
    @Valid #16 感谢!
    Macolor21
        18
    Macolor21   31 天前
    点赞->登录->获取手机号码->登录->获取微信昵称和头像->昵称重复 X -> 跳回第一步或者继续获取

    意思是我还需要改个微信昵称才能用你的账号啊?重新定义用户体验
    Macolor21
        19
    Macolor21   31 天前
    @Macolor21 我知道,有人要提了,微信可以自定义多个用户昵称和头像用于这类场景。是的,直接获取信息的时候就可以改,然后呢,改完之后你按确定,显示手机号码获取失败!又让你获取一遍
    nanxiaobei
        20
    nanxiaobei   31 天前 via iPhone
    @Macolor21 昵称重复?等我问问接口怎么处理的,理论上不应该有这个提示
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2839 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 04:48 · PVG 12:48 · LAX 21:48 · JFK 00:48
    ♥ Do have faith in what you're doing.