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