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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2017 到 2018,PWA 技术到底经历了什么

高磊 OpenWeb开发者 1周前 在 GMTC 2018 全球大前端会议举办期间&#xff0c;高磊担任主题演讲嘉宾&#xff0c;并担任 PWA 专场出品人。作为有近 10 年 Web 前端技术开发、管理经验的开发者&#xff0c;高磊一直关注着 PWA 技术的发展。 2017年 6月10日&#xff0c;GMTC 201…

CentrOS7静默安装oracle11g

最近要做一个用ogg实现oracle到kafka的增量数据实时同步&#xff0c;但是Oracle就让我装了好久&#xff0c;这里来记录一下安装oracle过程。 1.建立swap分区 创建充当swap分区的文件&#xff0c;文件大小就是要增加的swap大小&#xff0c;of是文件位置&#xff0c;bs为单位&a…

MIP 网站中熊掌号登录

标题内容类型通用支持布局responsive,fixed-height,fill,container,fixed所需脚本https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&#xff1a;使用该组件必须在引用本组件链接前引用 <…

MIP 支付组件,支付流程:

MIP 支付组件&#xff0c;支付流程&#xff1a; 标题内容类型通用支持布局responsive,fixed-height,fill,container,fixed所需脚本https://c.mipcdn.com/static/v1/mip-simple-pay/mip-simple-pay.js,https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&…

jar包在Hadoop集群上测试(MapReduce)

本片使用MapReduce——统计输出给定的文本文档每一个单词出现的总次数的案例进行&#xff0c;jar包在集群上测试 1、添加打包插件依赖 <build><plugins><plugin><artifactId>maven-compiler-plugin</artifactId><version>3.6.2</versio…

什么是集群(cluster)

1、集群 1.1 什么是集群 简单的说&#xff0c;集群(cluster)就是一组计算机&#xff0c;它们作为一个整体向用户提供一组网络资源。这些单个的计算机系统就是集群的节点(node)。一个理想的集群是&#xff0c;用户从来不会意识到集群系统底层的节点&#xff0c;在他/她们看来&am…

JDK源码解析之 Java.lang.Double

Double类是原始类型double的包装类&#xff0c;它包含若干有效处理double值的方法&#xff0c;如将其转换为字符串表示形式&#xff0c;反之亦然。Double类的对象可以包含一个double值。 Double类包装原始类型的值 double中的对象。类型的对象 Double包含一个类型为的字段 doub…

sed教程入门与实例练习(二)

让我们看一下 sed 最有用的命令之一&#xff0c;替换命令。使用该命令&#xff0c;可以将特定字符串或匹配的规则表达式用另一个字符串替换。下面是该命令最基本用法的示例&#xff1a; $ sed -e ’s/foo/bar/’ myfile.txt上面的命令将 myfile.txt 中每行第一次出现的 ‘foo’…

Oracle GoldenGate微服务架构

Oracle GoldenGate支持两种架构&#xff0c;经典架构和微服务架构&#xff08;MA&#xff09;。 可以出于以下目的配置Oracle GoldenGate&#xff1a; 从一个数据库中静态提取数据记录&#xff0c;并将这些记录加载到另一个数据库中。连续提取和复制事务性数据处理语言&#…

Oracle GoldenGate经典架构

可以使用Oracle GoldenGate Classic Architecture从命令行配置和管理数据复制。 图示的说明logicalarch2.png 注意&#xff1a; 这是基本配置。根据业务需求和用例&#xff0c;可以配置此模型的不同变体。 1、Manager Manager是Oracle GoldenGate的控制过程。必须先在Oracl…

awk教程入门与实例练习(一)

Awk 是一种非常好的语言&#xff0c;同时有一个非常奇怪的名称。在本系列&#xff08;共三篇文章&#xff09;的第一篇文章中&#xff0c;Daniel Robbins 将使您迅速掌握 awk 编程技巧。随着本系列的进展&#xff0c;将讨论更高级的主题&#xff0c;最后将演示一个真正的高级 a…

HDFS-简介

HDFS 是 Hadoop Distribute File System 的简称&#xff0c;意为&#xff1a;Hadoop 分布式文件系统&#xff0c;是一种旨在在商品硬件上运行的分布式文件系统。它与现有的分布式文件系统有许多相似之处。但是&#xff0c;与其他分布式文件系统的区别很明显。HDFS具有高度的容错…

JDK源码解析之 java.lang.Thread

位于java.lang包下的Thread类是非常重要的线程类&#xff0c;它实现了Runnable接口&#xff0c;今天我们来学习一下Thread类&#xff0c;在学习Thread类之前&#xff0c;先介绍与线程相关知识&#xff1a;线程的几种状态、上下文切换&#xff0c;然后接着介绍Thread类中的方法的…

HDFS-文件读写过程

一、文件读取 Client向NameNode发起RPC请求&#xff0c;来确定请求文件block所在的位置&#xff1b;NameNode会视情况返回文件的部分或者全部block列表&#xff0c;对于每个block&#xff0c;NameNode 都会返回含有该 block 副本的 DataNode 地址&#xff1b; 这些返回的 DN 地…

Hive-简介入门

Hive简介 Hive最初是Facebook为了满足对海量社交网络数据的管理和机器学习的需求而产生和发展的。互联网现在进入了大数据时代&#xff0c;大数据是现在互联网的趋势&#xff0c;而hadoop就是大数据时代里的核心技术&#xff0c;但是hadoop的mapreduce操作专业性太强&#xff0…

Hive-原理解析

一、Hive 架构 下面是Hive的架构图。 Hive的体系结构可以分为以下几部分 1、用户接口&#xff1a;CLI&#xff08;hive shell&#xff09;&#xff1b;JDBC&#xff08;java访问Hive&#xff09;&#xff1b;WEBUI&#xff08;浏览器访问Hive&#xff09; 2、元数据&#x…

JDK源码解析之 java.lang.ClassLoader

Class代表它的作用对象是类&#xff0c;Loader代表它的功能是加载&#xff0c;那么ClassLoader就是把一个以.class结尾的文件以JVM能识别的存储形式加载到内存中。 一、核心方法 1、loadClass方法 protected Class<?> loadClass(String name, boolean resolve) throws…

JDK源码解析之 Java.lang.Package

如果我们在Class对象上调用getPackage方法&#xff0c;就可以得到描述该类所在包的Package对象(Package类是在java.lang中定义的)。我们也可以用包名通过调用静态方法getPackage或者调用静态方法getPackages(该方法返回由系统中所有已知包构成的数组)来获得Package对象。getNam…

Docker入门-架构

Docker 包括三个基本概念: 镜像&#xff08;Image&#xff09;&#xff1a;Docker 镜像&#xff08;Image&#xff09;&#xff0c;就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。容器&#xff08;Cont…

Docker原理之Namespaces

命名空间&#xff08;namespaces&#xff09;是 Linux 为我们提供的用于分离进程树、网络接口、挂载点以及进程间通信等资源的方法。 一、Namespaces 在日常使用 Linux 或者 macOS 时&#xff0c;我们并没有运行多个完全分离的服务器的需要&#xff0c;但是如果我们在服务器上启…