之前由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