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,一经查实,立即删除!

相关文章

Ubuntu18.04安装最新版Docker

卸载旧的docker版本apt-get remove docker docker-engine docker.io containerd runc更新软件列表apt-get update.允许apt命令可以使用HTTPS访问Docker repositoryapt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common添加Docker…

MIP 问题解决方案大全(2018-06更新)

在 MIP 推出后&#xff0c;我们收到了一些站长的疑问。现将常见问题整理出来&#xff0c;帮助大家了解 MIP 的知识。 一、MIP 认知类问题二、改造前准备三、前端改造&#xff0c;组件使用四、提交生效五、MIPCache六、更多学习资源 一、MIP 认知类问题 1.1 MIP 化的收益是什…

Ubuntu18使用docker快速安装oracle 11g

1、安装docker环境&#xff0c;参照Ubuntu18.04安装最新版Docker 2、下载oracle镜像docker pull deadok22/docker-oracle-xe-11g 3、下载完成后&#xff0c;启动oracle镜像作为容器&#xff1a;docker run -h "oracle" --name "oracle" -d -p 49160:22 -p …

ubuntu新建用户后,终端下方向键和tab键不可用的解决方法

问题描述&#xff1a; 用adduser命令新增了用户之后&#xff0c;发现在该新建用户下的命令终端&#xff0c;使用方向键无法调出历史命令&#xff0c;同时tab键也无法补全输入命令。 问题解决&#xff1a; 在/etc/passwd中发现&#xff0c;该新建用户使用的shell为/bin/sh&…

移动Web体验月报(6月):MIP 核心代码升级,增加基于 Vue 开发能力

原创&#xff1a; BrilliantOpenWeb OpenWeb开发者 7月6日 作者 | Brilliant Open Web 团队 编辑 | Daisy 升级与重要进展 历时2个月&#xff0c;MIP团队完成了核心代码重构与核心功能升级&#xff0c;MIP新版本核心代码&#xff08;V2&#xff09;在实现向下完全兼容当前代…

腾讯云ubuntu18安装图形化界面

0、apt-get update 1、sudo apt-get install xinit 2、sudo apt-get install gdm3 3、apt-get install ubuntu-desktop

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 扩展组件开发手册

本手册将向你展示&#xff0c;完成一个 MIP 扩展组件的开发需要做哪些事情。在此之前&#xff0c;我们假定你&#xff1a; 有一定的 HTML、CSS 和 JavaScript 基础 了解 AMD 的模块管理方式 熟悉版本管理工具 Git 有自己的 GitHub 账号 懂得使用 npm 步骤 通常情况下&am…

Zookeeper分布式安装部署

本篇博客将主要介绍如何进行Zookeeper的分布式安装部署 集群规划 在Carlota1、Carlota2、Carlota3三台机器上进行部署。 安装部署 1、解压安装 上传压缩文件apache-zookeeper-3.6.1-bin.tar.gz到三台机器上解压文件tar -zxvf apache-zookeeper-3.6.1-bin.tar.gz改个名&…

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;使用该组件必须在引用本组件链接前引用 <…

日常问题——hadoop 任务运行到running job就卡住了 INFO mapreduce.Job: Running job: job_1595222530661_0003

执行mapreduce没报错&#xff0c;可是任务运行到running job就卡住在 INFO mapreduce.Job: Running job: job_1595222530661_0003 解决方法 mapred-site.xml下将 <property><name>mapreduce.framework.name</name><value>yarn</value> </pr…

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 注意&…

代码实现——MapReduce统计单词出现次数

需求 对以下txt文档进行单词出现次数统计&#xff08;txt文档在/Users/lizhengi/test/input/目录下&#xff09; hadoop take spring spark hadoop hdfs mapreduce take Tomcat tomcat kafka kafka flume flume hive实现 1、新建Maven工程&#xff0c;pom.xml依赖如下 <…

MIP个性化组件提交规范

MIP个性化组件一般用来实现前后端数据传输或特殊的交互效果&#xff0c;由广大开发者贡献。出于性能、可维护性等方面的考虑&#xff0c;开发者在新增组件或升级组件时&#xff0c;请遵守以下规范。 规范中的必须&#xff08;MUST&#xff09;&#xff0c;禁止&#xff08;MUS…

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

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

代码实现——MapReduce实现Hadoop序列化

简单介绍 1、什么是序列化 序列化&#xff1a;把内存中的对象&#xff0c;转换成字节序列(或其他数据传输协议)以便于存储到磁盘(持久化)和网络传输。反序列化&#xff1a;将收到字节序列(或其他数据传输协议)或者是磁盘的持久化数据&#xff0c;转换成内存中的对象。 2、 为…

日常问题——hadoop启动后发现namenode没有启动,但是排除了格式化过度的问题

hadoop启动后发现namenode没有启动&#xff0c;网上说的格式化过度的问题我是没有的&#xff0c;因为我只格式化过一次。之后查看日志 vim /opt/hadoop/logs/namenode对应的log文件 发现 2020-03-03 23:16:21,868 INFO org.apache.hadoop.metrics2.impl.MetricsSystemImpl: Na…

Zookeeper3.6.1常用的Shell命令

1、客户端连接 zkCli.sh zkCli.sh -server host:port2、显示节点信息 -s状态 -w监听器 -R递归 ls [-s] [-w] [-R] path3、创建节点 -s加序列号 -e临时节点 create [-s] [-e] path [data]4、获取节点值 -s状态 -w监听器 get [-s] [-w] path5、设置节点值 -s状态 set [-s] […

CentOS7下MySQL5.7的安装

1、下载MySQL 安装包&#xff1a; wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpmyum -y localinstall mysql57-community-release-el7-11.noarch.rpm 2、在线安装MySQL yum -y install mysql-community-server 3、启动mysql 服务 systemct…