zoukankan      html  css  js  c++  java
  • MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素

    之前由MIP团队维护的《移动 Web 加速技术月报》从本期开始,正式升级为《MIP 技术月报》,与以往不同的是,《MIP 技术月报》将会与大家分享包含移动加速技术以外的其他移动应用开发的技术,从移动用户体验、开发体验出发来分享 MIP 的更多技术点,技术面也将涉及更广的范围。更重要的是,每期会与大家分享 MIP 项目的当月重大技术进展。

    本期看点

    • MIP 为开发者提供熊掌号登录组件。在提升使用 MIP 开发的熊掌号站点用户登录体验的同时,也大幅提升站点登录功能的接入效率。
    • MIP 页面滑动时悬浮元素展现优化。用户上下滑动时隐藏/展现悬浮元素,优化用户页面浏览体验。

    MIP 页面支持熊掌号登录

    登录是移动中最常见的应用场景之一,但也是目前 Web 体验最不佳的功能点之一,其中有以下原因:

    • 缺少统一封装,API 不够友好;
    • 登录都是同步跳转,页面状态无法保持,体验不流畅;
    • 每个站点的流程与交互体验不统一,用户习惯无法培养。

    MIP 熊掌号登录示例

    MIP 团队针对以上体验不佳的情况,为开发者提供了 Native Like 体验的熊掌号登录组件,用户在 MIP 中能够体验到一致的登录流程。已经接入百度熊掌号的 MIP 站点,可以快速的使用登录组件向用户提供登录功能。登录效果示例如下:

    登录示例

    如何使用

    我们在 Github issue 中记录了关于熊掌号登录组件相关的文档和讨论,链接如下:

    https://github.com/mipengine/mip-extensions/issues/1096

    可以通过此文档查看更多示例与用法:

    https://github.com/mipengine/mip-extensions-platform/tree/master/mip-login-xzh

    如果对使用熊掌号登录组件有任何疑问或问题,请在 issue 中进行留言!

    MIP 页面悬浮元素优化,让用户浏览更沉浸

    移动中另一个重要的体验特性是沉浸式浏览,经过 MIP 团队调研,目前移动 Web 页面中存在大量头部与底部的悬浮功能,开发者使用悬浮的初衷是为用户提供更便捷的其他功能入口,但大多数站点并没有考虑悬浮功能与沉浸式浏览体验的冲突。

    悬浮优化示例

    MIP 团队为此提供了通用的页面悬浮元素优化,开发者可通过简单配置即可完成页面悬浮元素的体验优化,用户向上滑动阅读页面时,头部与底部悬浮元素可被隐藏,露出更多页面阅读面积,让用户浏览更加沉浸!

    具体效果示例如下:

    悬浮优化示例

    如何使用

    MIP 团队在原来悬浮组件文档基础上,新增了悬浮配置项。可以通过以下代码配置悬浮元素自动隐藏。

    <mip-fixed type="top" data-slide>
        顶部悬浮 - 向上滑动隐藏
    </mip-fixed>
    

    更多内容可查看:

    https://www.mipengine.org/examples/mip-extensions/mip-fixed.html

    下期预告

    全站 MIP 化技术方案即将对外发布

    移动 Web 的体验问题从来不是开发一个页面就能解决的,2018 年以来,MIP 团队从聚焦移动页面的速度转向聚焦整个移动站的整体体验。MIP 团队希望通过一系列的技术革新,让开发者不仅拥有的是快速、流畅的单个移动 Web 页面,更能够利用 MIP 轻松搭建体验与性能俱佳的移动网站。

    2018年4月,MIP 团队启动了全站 MIP 化的技术方案讨论与设计,目前已经有内部案例。我们将在不久对外发布这一技术升级,让大家通过使用 MIP 开发一个完整的站点!

    其他技术升级预告:

    • MIP 预渲染技术,让用户享受极致的速度体验
    • MIP 助力熊掌号,让熊掌号站点更容易地开发MIP
  • 相关阅读:
    一行代码搞定Dubbo接口调用
    测试周期内测试进度报告规范
    jq 一个强悍的json格式化查看工具
    浅析Docker容器的应用场景
    HDU 4432 Sum of divisors (水题,进制转换)
    HDU 4431 Mahjong (DFS,暴力枚举,剪枝)
    CodeForces 589B Layer Cake (暴力)
    CodeForces 589J Cleaner Robot (DFS,或BFS)
    CodeForces 589I Lottery (暴力,水题)
    CodeForces 589D Boulevard (数学,相遇)
  • 原文地址:https://www.cnblogs.com/mipengine/p/mip-monthly-201804.html
Copyright © 2011-2022 走看看