MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素
2018-05-04 16:04
267 查看
之前由MIP团队维护的《移动 Web 加速技术月报》从本期开始,正式升级为《MIP 技术月报》,与以往不同的是,《MIP 技术月报》将会与大家分享包含移动加速技术以外的其他移动应用开发的技术,从移动用户体验、开发体验出发来分享 MIP 的更多技术点,技术面也将涉及更广的范围。更重要的是,每期会与大家分享 MIP 项目的当月重大技术进展。
MIP 页面滑动时悬浮元素展现优化。用户上下滑动时隐藏/展现悬浮元素,优化用户页面浏览体验。
缺少统一封装,API 不够友好;
登录都是同步跳转,页面状态无法保持,体验不流畅;
每个站点的流程与交互体验不统一,用户习惯无法培养。
https://github.com/mipengine/mip-extensions/issues/1096
可以通过此文档查看更多示例与用法:
https://github.com/mipengine/mip-extensions-platform/tree/master/mip-login-xzh
如果对使用熊掌号登录组件有任何疑问或问题,请在 issue 中进行留言!
具体效果示例如下:
更多内容可查看:
https://www.mipengine.org/examples/mip-extensions/mip-fixed.html
2018年4月,MIP 团队启动了全站 MIP 化的技术方案讨论与设计,目前已经有内部案例。我们将在不久对外发布这一技术升级,让大家通过使用 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
相关文章推荐
- MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素
- MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素
- 任务问题Oracle 技术支持之现场优化的思维路径
- 本周ASP.NET英文技术文章推荐[很久以前 - 02/26]:Immutability、InterpolationMode、CompositingQuality、性能优化、单点登录、Spring.NET、Facebook、MySQL、Web Deployment Tool
- 各厂商防火墙登录IP、初始密码(技术支持)
- 网页优化过程中应该注意网页页面的元素有哪些
- wordpress主题开发教程手记:wp-login.php登录页面优化
- 缓存技术(页面静态化)与mysql优化
- 大型网站提速关键技术(页面静态化,memcached,MySql优化)(三)
- 界面优化处理技术之(三)登录框表格组件优化处理
- 基于页面染色技术的内存数据库访问优化方法
- 自己写的一个选择器,支持单选,组选,子元素选,求优化~~
- MIP技术进展月报第2期: 数据绑定,异步脚本加速
- 网站优化的关键技术:页面静态化和缓存
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
- 页面元素优化
- 超棒的悬浮层式的页面元素注解jQuery插件 - Chardin.js
- jQuery--页面图片等元素滚动动态加载技术
- MIP技术进展月报第3期:MIP小姐姐听说,你想改改MIP官网?