MIP 技术月报（4月）：MIP 支持熊掌号登录；MIP 页面悬浮元素优化

BrilliantOpenWeb
408 阅读4分钟
原文链接： mp.weixin.qq.com

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

作者 | Brilliant Open Web 团队 编辑 | 媛媛

本期看点

  • MIP 为开发者提供熊掌号登录组件。在提升使用 MIP 开发的熊掌号站点用户登录体验的同时，也大幅提升站点登录功能的接入效率。

  • MIP 页面滑动时悬浮元素展现优化。用户上下滑动时隐藏/展现悬浮元素，优化用户页面浏览体验

MIP 页面支持熊掌号登录

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

  • 缺少统一封装，API 不够友好；

  • 登录都是同步跳转，页面状态无法保持，体验不流畅； 

  • 每个站点的流程与交互体验不统一，用户习惯无法培养。

MIP 熊掌号登录示例

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

如何使用

我们在 Github issue 中记录了关于熊掌号登录组件相关的文档和讨论，识别下图二维码即可查看：

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

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 团队希望通过一系列 MIP 技术革新，让开发者通过 MIP 构建良好体验与性能的移动 Web 站，而不仅仅是单个移动 Web 页面。

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

其他技术升级预告：

  • MIP 预渲染技术，让用户享受极致的速度体验

  • MIP 助力熊掌号，让熊掌号站点更容易地开发MIP

Brilliant Open Web 

BOW（Brilliant Open Web）团队，是一个专门的Web技术建设小组，致力于推动 Open Web 技术的发展，让Web重新成为开发者的首选。

BOW 关注前端，关注Web；剖析技术、分享实践；谈谈学习，也聊聊管理。

关注 OpenWeb开发者，回复“加群”，让我们一起推动 OpenWeb技术的发展！

OpenWeb开发者

ID：BrilliantOpenWeb

技术连接世界，开放赢得未来

avatar
文章
阅读
粉丝